Android 复杂界面开发实践之 ViewController: 介绍

   <p>ViewControler 是一种界面开发组件化实现方式,利用它可以将一些复杂的 UI 界面开发组件化, 从而更好的组织代码结构,从而提高开发效率,降低维护成本。</p>    <p>这里先放一张 ViewControler 示意图，如下所示。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/19234867b87e0222333966c5a117f1ca.png"></p>    <h2><strong>优点</strong></h2>    <ul>     <li>界面开发组件化，解决 Activity/Fragment 中 UI 代码臃肿问题。</li>     <li>灵活的 UI 开发，同一组件可用于多处，代码重用。</li>     <li>易维护，开发简单。</li>    </ul>    <h2><strong>使用方法</strong></h2>    <p>目前已经使用 ViewControler 完成了一个房屋详情页开发 demo ,你可以直接运行代码,查看 demo 如何运行,下面是一般的使用流程。</p>    <h3><strong>1、根据业务需求,划分 UI 组件</strong></h3>    <p>如下所示是一个示例的 UI 开发场景,这是一个房屋详情页面,</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/257d6701c6eb32024127209e870572ee.png"></p>    <p>按照一般的开发方式,我们需要在 layout 中先写好所有的布局,然后在对应的 Activity 中 实例化所有的 View 示例,然后请求数据后,把数据分别填充在不同的 View 上,最终完成这个界面的开发。</p>    <p>但是现在,我们利用 ViewControler 后,可以把这儿界面组件化,显然我们可以把它分为四个 UI 组件。</p>    <ul>     <li> <p>房屋图片组件</p> </li>     <li> <p>房屋信息组件</p> </li>     <li> <p>房屋描述组件</p> </li>     <li> <p>房屋评论组件</p> </li>    </ul>    <p>至于怎么划分组件,完全取决于具体的 UI 情景,这里只是以一个房屋详情页进行举例。</p>    <h3><strong>2、实现组件</strong></h3>    <p>只要划分完组件后,接下来就是分别实现组件的过程,这里以评论组件位例进行介绍,这里命名为 HouseCommentViewControler。</p>    <p>所有的组件都可以通过继承 ViewControler 实现, ViewControler 是一个抽象类,你只需要实现下面三个抽象方法即可。</p>    <ul>     <li> <p>resLayoutId()</p> </li>     <li> <p>onCreatedView(View view)</p> </li>     <li> <p>onBindView(T data)</p> </li>    </ul>    <p><strong>resLayoutId</strong></p>    <p>该方法指定该 ViewControler 对应的 layout ID。所以这里需要去根据具体的 UI 样式去创建一个评论组件的 layout,然后在这里返回对应的 layout id。</p>    <p><strong>onCreatedView(View view)</strong></p>    <p>该方法是用于初始化 View 的一个方法,你可以在这里实例化对应组件内的所有 View,也可以在 这里对 View 做一些事件监听等<strong>等。</strong></p>    <p><strong>onBindView(T data)</strong></p>    <p>这个方法是最终进行数据绑定的地方。</p>    <p>ViewControler 是一个泛型类,这里的 T 是这个 ViewControler 对应的数据类型。对于评论组件,只是展示一列不同用户的评价信息, 使用简单的字符串集合即可,所以这里的 T 应该是 List .</p>    <p><strong>示例</strong></p>    <p>下面是 HouseCommentViewControler 的实现方式</p>    <pre>  <code class="language-java">//继承 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);      }  }</code></pre>    <p>具体实现可查看对应 demo 中 HouseCommentViewControler 的 实现源码</p>    <p>至此,评论组件的实现类 HouseCommentViewControler 已经开发完毕,剩下的其他组件开发方式都一样。</p>    <p>下面是不同组件对应的实现类。</p>    <ul>     <li> <p>房屋图片组件 -> HousePhotoViewController</p> </li>     <li> <p>房屋信息组件 -> HouseParamViewControler</p> </li>     <li> <p>房屋描述组件 -> HouseDescViewControler</p> </li>     <li> <p>房屋评论组件 -> HouseCommentViewControler</p> </li>    </ul>    <h3><strong>3、在 Activity 中配置组件</strong></h3>    <p>开发完成组件后,剩下的事就是在 Activity 中去组合这几个组件了, 这里通过 Activity 中的一个容器 View 与组件关联,所以这里需要在 Activity 中定义 一个容器 View,一般可以选择一个垂直的 LinearLayout。</p>    <p>接下来首先需要实例化组件,接着将组件与 Activity 关联,然后在合适的时机向组件填充数据,如下所示。</p>    <pre>  <code class="language-java">//定义组件实例  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);  }</code></pre>    <p>最终的实现结果如下</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/852d0960d78fd35c5e52260d0925e75a.png" alt="Android 复杂界面开发实践之 ViewController: 介绍" width="1024" height="768"></p>    <h3><strong>总结</strong></h3>    <p>至此, 界面开发完成。</p>    <p>你会发现主界面中看不到任何具体 View 操作相关的代码, 因为这些代码都已经被分发到不同的 ViewController 中去了。如上图所示，每一部分的开发逻辑都被分发到了不同的 ViewControler 中，这样在后期在开发维护过程中，如果某一部分要修改一些逻辑或者 UI 结构，你只需要到对应的 ViewControler 中去进行修改即可，如果这个界面需要新增一个模块，只需要新建一个 ViewControler 就可以灵活的添加新模块。</p>    <p>你会发现，Activity\Fragment 很少做改动。一般的操作直接在对应的 ViewControler 中完成即可。这种方案极大的解决了 Activity 中 UI 逻辑代码复杂的问题。总之，在特定的界面开发中使用这种组件化的开发模式后,后续的维护开发就会变得特别有条理，非常高效。</p>    <p>另外，由于示例的原因，这里的 View 结构看山去比较简单，但是在实际开发中，你遇到的情况，View 会比这复杂很多，在越复杂的场景中，ViewControler 的威力也就越大。</p>    <p> </p>    <p> </p>    <p>来自：http://gudong.name/2016/11/06/viewcontroler-introduce.html</p>    <p> </p>