Android 復雜界面開發實踐之 ViewController: 介紹
ViewControler 是一種界面開發組件化實現方式,利用它可以將一些復雜的 UI 界面開發組件化, 從而更好的組織代碼結構,從而提高開發效率,降低維護成本。
這里先放一張 ViewControler 示意圖，如下所示。
優點
- 界面開發組件化，解決 Activity/Fragment 中 UI 代碼臃腫問題。
- 靈活的 UI 開發，同一組件可用于多處，代碼重用。
- 易維護，開發簡單。
使用方法
目前已經使用 ViewControler 完成了一個房屋詳情頁開發 demo ,你可以直接運行代碼,查看 demo 如何運行,下面是一般的使用流程。
1、根據業務需求,劃分 UI 組件
如下所示是一個示例的 UI 開發場景,這是一個房屋詳情頁面,
按照一般的開發方式,我們需要在 layout 中先寫好所有的布局,然后在對應的 Activity 中 實例化所有的 View 示例,然后請求數據后,把數據分別填充在不同的 View 上,最終完成這個界面的開發。
但是現在,我們利用 ViewControler 后,可以把這兒界面組件化,顯然我們可以把它分為四個 UI 組件。
-
房屋圖片組件
-
房屋信息組件
-
房屋描述組件
-
房屋評論組件
至于怎么劃分組件,完全取決于具體的 UI 情景,這里只是以一個房屋詳情頁進行舉例。
2、實現組件
只要劃分完組件后,接下來就是分別實現組件的過程,這里以評論組件位例進行介紹,這里命名為 HouseCommentViewControler。
所有的組件都可以通過繼承 ViewControler 實現, ViewControler 是一個抽象類,你只需要實現下面三個抽象方法即可。
-
resLayoutId()
-
onCreatedView(View view)
-
onBindView(T data)
resLayoutId
該方法指定該 ViewControler 對應的 layout ID。所以這里需要去根據具體的 UI 樣式去創建一個評論組件的 layout,然后在這里返回對應的 layout id。
onCreatedView(View view)
該方法是用于初始化 View 的一個方法,你可以在這里實例化對應組件內的所有 View,也可以在 這里對 View 做一些事件監聽等等。
onBindView(T data)
這個方法是最終進行數據綁定的地方。
ViewControler 是一個泛型類,這里的 T 是這個 ViewControler 對應的數據類型。對于評論組件,只是展示一列不同用戶的評價信息, 使用簡單的字符串集合即可,所以這里的 T 應該是 List .
示例
下面是 HouseCommentViewControler 的實現方式
//繼承 ViewControler
public class HouseCommentViewControler extends ViewControler<List<String>>
//指定 layout id
@Override
protected int resLayoutId() {
return R.layout.detail_comment_layout;
}
// View 初始化
@Override
protected void onCreatedView(View view) {
ButterKnife.bind(this,view);
}
// 綁定數據到 view
@Override
protected void onBindView(List<String> comments) {
for (String comment:comments) {
TextView view = new TextView(getContext());
view.setBackgroundResource(R.color.bk_item);
view.setText(comment);
int padding = Utils.dp2px(16);
view.setPadding(padding,padding,padding,padding);
mLlContainer.addView(view);
}
}
具體實現可查看對應 demo 中 HouseCommentViewControler 的 實現源碼
至此,評論組件的實現類 HouseCommentViewControler 已經開發完畢,剩下的其他組件開發方式都一樣。
下面是不同組件對應的實現類。
-
房屋圖片組件 -> HousePhotoViewController
-
房屋信息組件 -> HouseParamViewControler
-
房屋描述組件 -> HouseDescViewControler
-
房屋評論組件 -> HouseCommentViewControler
3、在 Activity 中配置組件
開發完成組件后,剩下的事就是在 Activity 中去組合這幾個組件了, 這里通過 Activity 中的一個容器 View 與組件關聯,所以這里需要在 Activity 中定義 一個容器 View,一般可以選擇一個垂直的 LinearLayout。
接下來首先需要實例化組件,接著將組件與 Activity 關聯,然后在合適的時機向組件填充數據,如下所示。
//定義組件實例
private ViewControler<List<String>> mHousePhotoViewController;
private ViewControler<HouseDetail.Param> mHouseParamViewControler;
private ViewControler<List<String>> mHouseCommentViewControler;
private ViewControler<String> mHouseDescViewControler;
//實例化組件
mHousePhotoViewController = new HousePhotoViewController(this);
mHouseParamViewControler = new HouseParamViewControler(this);
mHouseDescViewControler = new HouseDescViewControler(this);
mHouseCommentViewControler = new HouseCommentViewControler(this);
//模擬數據獲取操作
getData();
//數據獲取成功后向組件填充數據
private void fillData(HouseDetail detail) {
mHousePhotoViewController.fillData(detail.photos);
mHouseParamViewControler.fillData(detail.param);
mHouseDescViewControler.fillData(detail.desc);
mHouseCommentViewControler.fillData(detail.comments);
}
最終的實現結果如下
總結
至此, 界面開發完成。
你會發現主界面中看不到任何具體 View 操作相關的代碼, 因為這些代碼都已經被分發到不同的 ViewController 中去了。如上圖所示，每一部分的開發邏輯都被分發到了不同的 ViewControler 中，這樣在后期在開發維護過程中，如果某一部分要修改一些邏輯或者 UI 結構，你只需要到對應的 ViewControler 中去進行修改即可，如果這個界面需要新增一個模塊，只需要新建一個 ViewControler 就可以靈活的添加新模塊。
你會發現，Activity\Fragment 很少做改動。一般的操作直接在對應的 ViewControler 中完成即可。這種方案極大的解決了 Activity 中 UI 邏輯代碼復雜的問題。總之，在特定的界面開發中使用這種組件化的開發模式后,后續的維護開發就會變得特別有條理，非常高效。
另外，由于示例的原因，這里的 View 結構看山去比較簡單，但是在實際開發中，你遇到的情況，View 會比這復雜很多，在越復雜的場景中，ViewControler 的威力也就越大。
來自：http://gudong.name/2016/11/06/viewcontroler-introduce.html