最近一直在做一些代碼自動化生成工作,主要目標是從業務需求的配置文件可以直接生成 Android 和 iOS 的 UI 代碼。在 Android 平臺在生成 Activity 時,會默認使用 ButtetKnife 來處理事件綁定的工作。
配置文件的片斷如下:
{
"id": "tvName",
"type": "TextView",
"style": {
"layout_width": "match_parent",
"layout_height": "match_parent"
},
"event": {
"onClick": "function(view){
//自定義代碼
}"
}
}
這段配置很簡單、也很容易理解,了解Android開發的同學一下就能看明白,它就是一個 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 事件的實現部分。為了提高代碼的簡潔性,后來做出了一版修改,生成使用了 ButterKnife 的源代碼,代碼如下:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout...);
ButterKnife.bind(this);
}
@OnClick(R.id.tvName)
public void tvNameOnClick() {
...
}
控件的聲明部分已經不再需要,通過ButterKnife 自動綁定,而onCreate部分是固定不變的,所以在 ButterKnife 模式下,真正的生成代碼只有 tvNameOnClick 部分了,可謂是相當簡潔。
對于這兩版生成的代碼,雖然代碼量和簡潔性差距很大,但是從生成難度上講,幾乎沒有區別。所以我一直是偏愛第二種生成風格的。但是不管是哪種風格,關于 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 文件又應該如何來設計呢?
剛開始做時也沒有啥經驗,就只能憑空設計了,以下是一個 OnClickListener 的原型:
public interface OnClickListener {
void onClick(View var1);
}
生成的代碼如下:
private View.OnClickListener tvNameOnOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View view) {
...
}
};
所以在最早的實現中,就直接簡短粗暴的使用了一個模板代碼:
private View.OnClickListener {{listenerName}} = new View.OnClickListener() {
@Override
public void onClick(View view) {
{{body}}
}
};
但是這樣帶來的問題就是無法進行函數原型檢測
接下來的問題就是如何知道一個Listener的Setter方法是什么呢?一個標準的Listener Setter 一般是 setOnClickListener,setOnLongClickListener 這樣。但是如果第三方控件不是按這樣的規則命名或則setXXXListener 需要更多的參數的時候,該怎么辦呢?
我們先來看看 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,對應需要調用的方法是 doClick, 而這個doClick的原型是接受一個View 類型的參數,returnType 沒有寫,默認為 void。
所以看到這里基本上也能想通,不管實現代碼是否高大上,上述提到的信息都必不可少。下面這一段是我最早設計的一個控件的 metadata 文件片段,
private View.OnClickListener {{listenerName}} = new View.OnClickListener() {
@Override
public void onClick(View v) {
{{body}}
}
};
event: {
onClick: {
name: 'OnClickListener',
setter: '{{objName}}.setOnClickListener({{listenerName}});',
listener: //上面模板代碼的引用
}
雖然在短期內解決了事件代碼生成的問題,但是上面提到的問題一個都沒有解決,不能原型檢測,不能支持自定義控件以及多函數Listener。
所以新的 metadata 文件設計應運而生:
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控件應該具有哪些屬性,其中的 event 屬性是一個 Event類型,而Event類型下面有兩個屬性,分別是兩個函數原型。有了這部分信息,就可以在代碼生成的時候完美檢測配置文件的事件是否是該控件所具有的屬性,以及函數原型是否正確。
export interface EventSetter {
onClick: setOnClickListener;
onLongClick: setOnLongClickListener;
}
interface setOnClickListener {
(onClick: onClick): void;
}
interface setOnLongClickListener {
(onLongClick: onLongClick): void;
}
另外一部分就是 Setter 問題,通過上述代碼,也完整的描述了一個 Listener Setter 的 name 以及接受的函數原型,對于多函數 Listener 也能輕易處理了。