Android Toolbar 总结

ToolBar介绍

ToolBar是Android5.0引入，可使用support v7兼容包开发。Android开发中逐渐使用ToolBar替换掉ActionBar。

ToolBar常用设置项

• toolbar:navigationIcon
  左侧图标，默认是一个Back箭头
• toolbar:logo
  app图标，展示位置和navigationIcon差不多，一般用navigationIcon
• toolbar:subtitle
  副标题
• toolbar:title
  标题

注：命名空间一定要用toolbar，不要用android命名空间。sdk bug，用android命名空间，设置不生效。

项目开发

由于项目开发过程中，对toolbar的自定义程度比较高，所有没有采用toolbar自带的几个属性，而是采用在xml文件ToolBar标签包裹自定义布局的方式引入。
1）在layout布局文件中引入ToolBar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/ToolbarStyle"
        app:theme="?attr/actionBarTheme">
        <include layout="@layout/toolbar_web"/>
    </android.support.v7.widget.Toolbar>

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"/>

</RelativeLayout>

代码中，Toolbar标签内包裹了实际的布局文件，此处使用include标签，保证代码的整洁性。
toolbar_web.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/app_brand_color"
                android:orientation="horizontal">
    <LinearLayout
        android:id="@+id/toolbar_back"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginRight="60dp"
        android:layout_alignParentLeft="true"
        android:background="@drawable/btn_white_hover"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        >
        <ImageView
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            android:src="@drawable/toolbar_back"
            />
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            android:singleLine="true"
            android:textColor="#ffffff"
            android:textSize="20sp"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/toolbar_share"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp"
        android:background="@drawable/btn_white_hover"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        >
        <ImageView
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:scaleType="centerCrop"
            android:src="@drawable/web_share_ic"
            />
    </LinearLayout>
</RelativeLayout>

项目中以toolbar_xxx.xml的命名方法统一定义toolbar内部的布局文件，布局文件内部toolbar_back，toolbar_title采用统一的命名方法，以便于项目管理。

layout目录下部分toolbar布局文件

2）代码中使用ToolBar

• 在BaseActivity中用toolbar替换默认的actionbar

  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      int layoutId = getLayoutId();
      if (layoutId != -1) {
          setContentView(layoutId);
      }
      Injector.inject(this,this);
  
      mContext = this;
  
      readIntent();
  
      if (findViewById(R.id.toolbar) != null){
          toolbar = (Toolbar) findViewById(R.id.toolbar);
          setSupportActionBar(toolbar);
          getSupportActionBar().setDisplayHomeAsUpEnabled(false);
          getSupportActionBar().setDisplayShowTitleEnabled(false);
      }
  
      initControls(savedInstanceState);
      setListeners();
      overridePendingTransition(R.anim.left_in, R.anim.hold);
  
  }
  

这里必须要设置setDisplayHomeAsUpEnabled为false，否则就算没有设置navigationIcon，也会莫名其妙的出现默认的Icon~~

2)在实际的activity中，找到对应的View实例

activity中绑定对应的view

3）ToolBar相关view的响应事件

@Override
  protected void setListeners() {
      toolbarBack.setOnClickListener(this);
      toolbarSend.setOnClickListener(this);
      listView.setOnItemClickListener(itemClickListener);
  }

 @Override
   public void onClick(View v) {
       switch (v.getId()){
           case R.id.toolbar_back:
               finish();
               break;
           case R.id.toolbar_send:
               int position = listView.getCheckedItemPosition();
               if(position < 0){
                   ToastUtils.showToast("请选择一个分数");
                   return;
               }
               break;
       }
   }