Android 布 局 翻 译 器

Android 布 局 翻 译 器

标签(空格分隔): 2020


0x1、引言


2333,看这标题就知道不是什么正经技术文章,花了点时间,写了个「无用良品」,以后请叫我「Android界爱迪生——樊少皇」,蟹蟹~

最近公司APP版本迭代,一个人写界面,写到我真的想吐:

有些路人可能会说:不喜欢写,你不会拖拉控件吗,憨憨。

可能各位都是:i9 9900K,850 PRO,64G DDR4,拖拽控件丝滑流畅,不知人间疾苦...
如果您像小弟一样用着公司配的:i3家用台式机,你也会秒变「祖安人

拖拽卡顿不灵活不说,拖拽完还得进代码调来调去,有时效率还不如手敲。
Google很久以前出的ConstraintLayout约束布局是挺好用的,就是要写多一堆属性,比如每个控件必不可少的:

虽说AS自动补全,但是写起来,效率并不是很高。作为一个「具有4点多堆砌布局经验的Android开发仔」一个重要的标准就是:看到一个设计图,立马在心中解析出「页面布局的层次结构」比如这样的个人中心的页面:

直接解析:

约束布局
    相对布局
        回退- Button
        标题-TextView
    卡片视图
        约束布局
            头像-ImageView
            登陆提示-TextView
            更多箭头-ImageView
    卡片视图
        约束布局
            订单图标-ImageView
            订单文本-TextView
            订单更多-ImageView
            兑换图标-ImageView
            兑换文本-TextView
            兑换更多-ImageView
...略

解析倒是挺简单,不顾敲起来,大部分是机器式重复,。前不久在逼乎上看到这段话:

觉得还挺有道理,着实需要一种智识和能力去改进,从这样的「时间泥潭」中跳出。

脑海中萌生了「模板代码」思路:

和AS自带新建布局模板的方式有点不一样,精确到控件级别,用 关键字匹配 控件对应的模板代码。

当我输入tv的时候,导入对应的一大串代码,输入tvc的时候导入另一串代码。
不过这个思路在我写完一个TextView后就放弃了,TM的那么多控件,要写多少套,而且很多属性是多余的...

这种思路妥妥滴不行,于是又萌生了另一种思路:

定义一套自己的语法规则,写少量,用脚本翻译成AS里的XML文件

啧啧啧,这样也意味着可以

可以脱离Android Studio写布局文件,而且比一个个字母手敲xml高效!

想想,你可以「在地铁上用便签写布局,然后到公司用脚本直接翻译成XML布局」太酷了吧!


0x2、规律 => 规则


定义这套语法规则之前,我们先要了解一下xml布局的规律:

# XML由一个个标签(结点)构成,分为:单标签 和 双标签(可嵌套),如:
<TextView .../> 和 <LinearLayout ..></LinearLayout> 

# 然后标签的组成
<控件名 
    属性:值
    属性:值 
    .../>

综上,不难得出两个规律:

① 标签其实有三种:开标签关标签闭合标签,要进行区分
② 标签 = <控件名 若干属性:值>

另外,Android是建议,每个控件都设置一个id属性的,不难定义一个类来代表一个标签:

class Node:
    def __init__(self, widget=None, id=None, kv=None):
        self.widget = widget
        self.id = id
        self.kv = kv

1、标签的区分


上面也说了,标签由三种,这里引入三个符号来进行标记(+-*),比如:

+ 线性布局
    * 文本视图
- 线性布局

新建配置文件config.ini用于保存「自定义简称控件的映射关系

注意这里的简称可以定义成你自己喜欢的,中文也行
接着写个读取配置文件的脚本config_getter.py,读取下:

再接着新建一个输入源test.txt文件,内容如下:

最后写脚本读取txt文件,按行读取,过滤空格和换行根据字符串第一个字符进行过滤

运行后可以看到输出的xml文件:

堆一起,看不出什么,格式化看看效果:

啧啧啧,有内味了。


2、属性


一个控件可以有多个属性,多个属性怎么进行分割呢?笔者用的是「>
然后属性和值又怎么分割呢?本来是想用 :或| 的,后面发现都用到了,最后决定用「-」来分割。
一个简单的示例如下:

* bt > bt_back > w-56 > h-56 > t-返回 

上述的代码代表:

定义一个按钮,id为bt_back,宽56dp,高56dp,文本为返回

另外,有些常用的属性-值,可以简化下,比如:

android:layout_width="wrap_content"

# 可以写成
w-wrap_content

# 简化
w-w

# 再简化
ww

ww 就可以代替:android:layout_width="wrap_content"

程序处理的时候需要对:w-w 和 ww进行区分,区分方法也很简单:

len(split("-")) == 1,说明是后者,否则是前者

啧啧啧,可以,继续~


3、值


值的情形稍微复杂一点,常见的有下面这些:

android:gravity="center|start"
android:layout_width="match_parent"
android:background="@drawable/ic_back_white"
android:layout_marginStart="60dp"
app:layout_constraintDimensionRatio="16:9"

其实划分下,笔者需要只需区分三种类型

  • ① 直接填充 -> 属性="xxx"
  • ② 数字dp -> 属性="xdp"
  • ③ @资源引用 -> 属性="@x/y"

所以处理的流程:

Step 1:判断是否为数字,是的话加上dp,否则跳Step 2
Step 2:利用正则判断是否为@类型,是的话提取下类型与值,否则跳Step3
Step 3: 判断是否包含此属性,是填充模板,否则直接填充

也很简单,接下来就是写代码来组装我们的「老八秘制小汉堡」了!!!


0x3、组装老八秘制小汉堡


先是完善配置文件:config.ini

这里可以根据自己的习惯自定义在对应的区域,增加或者减少,动态配置~
在翻译脚本 AutoTranslate.py 的开头读取一波配置信息:

接着定义一个读取节点列表的方法:

再接着定义一个解析翻译结点内容的方法:


最后定义一个写入文件的方法:

接着花几分钟写个布局txt文件:

转换脚本调用下相关方法:

运行一波,可以看到生成了一个test.xml的布局文件,打开瞅瞅:

啧啧,格式化?

把xml复制到项目中,看看效果?

此处应该有掌声!啪啪啪!


0x4、奥利给,吃粑粑


脚本的大概雏形完成了,后面可以优化下交互和小细节,不过感觉没技术含量?巧了,最近在 刷题,加个算法耍耍?来个LeetCode原题有效的括号,题目描述如下:

就是 匹配符号开闭,跟我们这个场景非常相似哇,匹配开闭节点

# 开闭节点需要一一对应,比如:
+ cly
- cly

# 多了少了,都不行(如下两种都是错误的)
+ cly
+ cly
- cly

+ cly
+ ly
- cly
- ly

怎么解决?最标准解法就是用 了,比较简单,直接撸代码:

接着调用下:

故意写错结点,运行看看:

可以,大功告成~


0x5、小结


久违的摸鱼闲暇时光,给大家做了一个老八秘制作小🍔,呸...

Android布局翻译器

有了它,你可以在🚇🚍上用文本编辑器,便签等来完成Android布局的编写。
当然,目前只是雏形,你可以根据自己需要,进行动态配置,优化等,以此提高你的效率~
此时我突然想起:曾扬言收购苹果,如今直播带货的老罗,当初提出的TNT系统,结合下这个脚本,
写布局完全可以靠喊:

文本框 > 居中 > 变黑 > 变大 > 加粗...

啧啧啧,有点意思,本节的一本正经的胡说八道到此结束,感谢阅读~