Srain

Android 统一的页面头部

---

需要解决的问题

没有统一的页头处理，导致：

• 各个页面的 layout 文件都需要细碎地包含页头信息，id 的不一致，给管理带来麻烦
• 有可能导致样式不统一
• 样式如果要改动，那必是伤筋动骨
• 各个页面，分头各自处理页头逻辑重复劳动，一些统一的逻辑，比如统一埋点，却又容易出现不一致
• 其他的更多

---

解决方案

• 基本思路

  • 页头控件形式实现。
  • 一个基类 Activity 使用此控件，公开 setTitle() 等方法，处理页头点击返回，数据记录等逻辑。

• 抽象和封装

  1. HeaderBarBase: 对应的布局文件为：base_header_bar_base.xml。

     • 处理左中右三个布局关系，用于样式统一。
     • 监听点击事件。监听左中右布局点击，避免实际区域太小无法点击的糟糕的用户体验。
     • 作为基类抽象，可扩展多多个页头：普通页头/特殊页头等。

     HeaderBarBase.java

     HeaderBarBase
        |
        +- +getLeftViewContianer()
        +- +getCenterViewContainer();
        +- +getRightViewContainer();
        |
        +- +setLeftOnClickListner();
        +- +setCenterOnClickListner();
        +- +setRightOnClickListner();
     

  2. TitleHeaderBar 继承于 HeaderBarBase, 对应的布局文件为：base_header_bar_title.xml，处理普通页头 UI 和业务逻辑。

  TitleHeaderBar.java

     TitleHeaderBar --> HeaderBarBase
         |
         +- +getLeftImageView();
         +- +getCenterTextView();
         +- +getRightTextView();
  

• 易用性的实现

  TitleBaseActivity, 包含了 TitleHeaderBar, 统一处理了页面页头逻辑。对应的布局文件为: activity_title_base.xml:

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="#ffffff"
      android:orientation="vertical" >
  
      <com.etao.mobile.views.header.TitleHeaderBar
      android:id="@+id/ly_header_bar_title_wrap"
      android:layout_width="match_parent"
      android:layout_height="44dp" >
      </com.etao.mobile.views.header.TitleHeaderBar>
  
  </LinearLayout>
  

  • TitleBaseActivity的内容为布局文件中LinearLayout;
  • LinearLayout 包含了一个 TitleHeaderBar, 可以统一统一页面返回，点击数据埋点等细化的业务逻辑;
  • 重写 setContentView(), 将内容添加到了此 LinearLayout 上
  • 直接继承 TitleBaseActivity 使用即可, 使用简单:

  TitleBaseActivity.java:

  TitleBaseActivity
     |
     +- -mContentViewContainer
     |
     +- -mTitleHeaderBar;     // protected, 子类可根据自身情况处理
     |
     +- -enableDefaultBack(); // 默认为true，点击左侧图标默认行为：返回
     |
     +- -setHeadTitle()       // 设置标题
  

• 扩展性

  即可继承 TitleBaseActivity, 也可以在布局文件中使用 TitleHeaderBar, 甚至可以从 HeaderBarBase 继承, 实现定制的头部。

---

comments powered by Disqus