最近一直在做一些代碼自動化生成工作扣孟,主要目標(biāo)是從業(yè)務(wù)需求的配置文件可以直接生成 Android 和 iOS 的 UI 代碼计雌。在 Android 平臺在生成 Activity 時,會默認(rèn)使用 ButtetKnife 來處理事件綁定的工作训唱。
配置文件的片斷如下:
{
"id": "tvName",
"type": "TextView",
"style": {
"layout_width": "match_parent",
"layout_height": "match_parent"
},
"event": {
"onClick": "function(view){
//自定義代碼
}"
}
}
這段配置很簡單褥蚯、也很容易理解,了解Android開發(fā)的同學(xué)一下就能看明白雪情,它就是一個 layout 文件和 UI 事件的一個整合遵岩。event 部分會在 Activity 中生成如下代碼:
private TextView tvName;
public void onCreate(Bundle savedInstanceState) {
...
tvName = (TextView)findViewById(R.id.tvName);
tvName.setOnClickListener(tvNameOnOnClickListener);
}
private View.OnClickListener tvNameOnOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View view) {
}
};
生成的代碼分為三部分,分別是控件的聲明巡通、初始化以及 OnClick 事件的實(shí)現(xiàn)部分尘执。為了提高代碼的簡潔性,后來做出了一版修改宴凉,生成使用了 ButterKnife 的源代碼誊锭,代碼如下:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout...);
ButterKnife.bind(this);
}
@OnClick(R.id.tvName)
public void tvNameOnClick() {
...
}
控件的聲明部分已經(jīng)不再需要,通過ButterKnife 自動綁定弥锄,而onCreate部分是固定不變的丧靡,所以在 ButterKnife 模式下,真正的生成代碼只有 tvNameOnClick 部分了籽暇,可謂是相當(dāng)簡潔温治。
對于這兩版生成的代碼,雖然代碼量和簡潔性差距很大戒悠,但是從生成難度上講熬荆,幾乎沒有區(qū)別。所以我一直是偏愛第二種生成風(fēng)格的绸狐。但是不管是哪種風(fēng)格卤恳,關(guān)于 Event 生成這里一直都有幾個亟待解決的問題累盗,那就是:
- 如何從一個配置文件的 Event 描述上,匹配到真正的 Android UI Event
- 如何得到任意一個 Event Listener 的原型
- 如何得到任意一個 Event Listener 在控件對象上的 Setter 方法突琳,以及 Setter 方法的原型
- 自定義控件的自定義事件以及包含多個 Callback 的 Event Listener 該如何處理
在配置文件的 TextView 控件中描述了一個如下事件:
"event": {
"onClick": "function(view){
//自定義代碼
}"
}
那么如何判斷一個 TextView 是否具有一個 onClick 事件呢若债?所以這里就需要為每一個控件定義一個 metadata 文件或者類頭文件的東西,以用于描述一個控件到底具有哪些事件拆融。在生成的時候蠢琳,用配置文件中的事件名字去查表檢測是否存在這個事件。
檢測到事件是否存在才是萬里長征第一步镜豹,接下來的問題就是如何判斷配置文件中書寫的事件是否符合 Event Listener 的原型挪凑,以及這個 metadata 文件又應(yīng)該如何來設(shè)計(jì)呢?
剛開始做時也沒有啥經(jīng)驗(yàn)逛艰,就只能憑空設(shè)計(jì)了,以下是一個 OnClickListener 的原型:
public interface OnClickListener {
void onClick(View var1);
}
生成的代碼如下:
private View.OnClickListener tvNameOnOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View view) {
...
}
};
所以在最早的實(shí)現(xiàn)中搞旭,就直接簡短粗暴的使用了一個模板代碼:
private View.OnClickListener {{listenerName}} = new View.OnClickListener() {
@Override
public void onClick(View view) {
{{body}}
}
};
但是這樣帶來的問題就是無法進(jìn)行函數(shù)原型檢測
接下來的問題就是如何知道一個Listener的Setter方法是什么呢散怖?一個標(biāo)準(zhǔn)的Listener Setter 一般是 setOnClickListener,setOnLongClickListener 這樣肄渗。但是如果第三方控件不是按這樣的規(guī)則命名或則setXXXListener 需要更多的參數(shù)的時候镇眷,該怎么辦呢?
我們先來看看 ButterKnife 是怎么做的翎嫡?找到一個 OnClick Annotation 的源代碼:
@Target(METHOD)
@Retention(CLASS)
@ListenerClass(
targetType = "android.view.View",
setter = "setOnClickListener",
type = "butterknife.internal.DebouncingOnClickListener",
method = @ListenerMethod(
name = "doClick",
parameters = "android.view.View"
)
)
public @interface OnClick {
/** View IDs to which the method will be bound. */
int[] value() default { View.NO_ID };
}
可以看到 ButterKnife 在這個 Annotation 中完整的描述了一個 Event Listener 涉及到的所有信息欠动,Listener 的原型和 Setter 的原型。這個 Listener 的 type 是 DebouncingOnClickListener惑申,對應(yīng)需要調(diào)用的方法是 doClick具伍, 而這個doClick的原型是接受一個View 類型的參數(shù),returnType 沒有寫圈驼,默認(rèn)為 void人芽。
所以看到這里基本上也能想通,不管實(shí)現(xiàn)代碼是否高大上绩脆,上述提到的信息都必不可少萤厅。下面這一段是我最早設(shè)計(jì)的一個控件的 metadata 文件片段,
private View.OnClickListener {{listenerName}} = new View.OnClickListener() {
@Override
public void onClick(View v) {
{{body}}
}
};
event: {
onClick: {
name: 'OnClickListener',
setter: '{{objName}}.setOnClickListener({{listenerName}});',
listener: //上面模板代碼的引用
}
雖然在短期內(nèi)解決了事件代碼生成的問題靴迫,但是上面提到的問題一個都沒有解決惕味,不能原型檢測,不能支持自定義控件以及多函數(shù)Listener玉锌。
所以新的 metadata 文件設(shè)計(jì)應(yīng)運(yùn)而生:
export interface View {
type: string;
id: string;
style: Style;
event: Event;
}
export interface Event {
onClick: onClick;
onLongClick: onLongClick;
}
export interface onClick {
(view: View): void;
}
export interface onLongClick {
(view: View): void;
}
這段文件完整的描述了一個View控件應(yīng)該具有哪些屬性名挥,其中的 event 屬性是一個 Event類型,而Event類型下面有兩個屬性芬沉,分別是兩個函數(shù)原型躺同。有了這部分信息阁猜,就可以在代碼生成的時候完美檢測配置文件的事件是否是該控件所具有的屬性,以及函數(shù)原型是否正確蹋艺。
export interface EventSetter {
onClick: setOnClickListener;
onLongClick: setOnLongClickListener;
}
interface setOnClickListener {
(onClick: onClick): void;
}
interface setOnLongClickListener {
(onLongClick: onLongClick): void;
}
另外一部分就是 Setter 問題剃袍,通過上述代碼,也完整的描述了一個 Listener Setter 的 name 以及接受的函數(shù)原型捎谨,對于多函數(shù) Listener 也能輕易處理了民效。