AppCompatActivity与toolbar的结合，Bas

2016-07-08 本文已影响5627人大前端圈

Android 5.0的时候就用Toolbar替代了ActionBar,而ActionBarActivity又被AppCompatActivity替代，那么使用方法就是引入Toolbar设置到Activity中

一个应用的几乎所有界面都需要头部app bar,为了能够方便各个界面方便使用，统一管理，这里就来对toolBar进行简单的封装。

先上两张图：

main.png

1，定义一个toolbar_layout.xml文件

封装toolbar，其他界面需要用，只要include进来就可以了，
自定义返回按钮(navigation)，标题(Title)，副标题(subTitle),toolbar默认的title在头部的左边，由于toolbar是ViewGroup的子类，它就是个容器，这里我们自定义一个title,subTitle，定义两个TextView放在ToolBar控件中，布局如下：

    <?xml version="1.0" encoding="utf-8"?>  
    <android.support.v7.widget.Toolbar  
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:id="@+id/toolbar"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="@color/colorPrimary"  
        android:minHeight="?attr/actionBarSize">  
        <!--自定义toolbar的title 和subtitle -->  
        <TextView  
            android:id="@+id/toolbar_subtitle"  
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:singleLine="true"  
            android:textColor="@color/white"  
            android:text="subtitle"  
            android:paddingRight="10dp"  
            android:layout_gravity="right" />  
      
        <TextView  
            android:id="@+id/toolbar_title"  
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:lines="1"  
            android:ellipsize="end"  
            android:text="title"  
            android:scrollHorizontally="true"  
            android:textColor="@color/white"  
            android:layout_gravity="center" />  
      
    </android.support.v7.widget.Toolbar>

2，我们知道在AndroidManifest.xml清单文件下application中设置了android:theme="@style/AppTheme"而查看AppTheme看到如下样式：

      <resources>  
          <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
          </style>  
      </resources>

从名字我们就可以看出来，默认的标题栏为黑色。我们使用了toolbar就必须修改样式文件，将原来的标题栏去掉，修改后的样式文件如下：

  <style name="AppTheme" parent="AppTheme.Base">  
    </style>  
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">  
        <item name="colorPrimary">@color/colorPrimary</item>  
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
        <item name="colorAccent">@color/colorAccent</item>  
   </style>

实际上就是设置没有标题，无actionBar主题

  <style name="Theme.AppCompat.Light.NoActionBar">  
      <item name="windowActionBar">false</item>  
      <item name="windowNoTitle">true</item>  
  </style>

为了支持5.0的手机，需要建立一个文件夹values-v21，再新建style.xml文件，设置
```
  <style name="AppTheme" parent="AppTheme.Base">  
  </style>      
```

3,封装一个基类，BaseAppCompatActivity，里面实现toolBar的封装，注释已经写的很详细了，代码如下：

  package com.hdc.toolbardemo;  

  import android.os.Bundle;  
  import android.support.v7.app.AppCompatActivity;  
  import android.support.v7.widget.Toolbar;  
  import android.util.Log;  
  import android.view.View;  
  import android.widget.TextView;  
    
  /** 
   * Created by wk on 2016/7/7. 
   * Base Activity. 
   */  
  public abstract class BaseAppCompatActivity extends AppCompatActivity {  
      private static final String TAG = BaseAppCompatActivity.class.getSimpleName();  
      private TextView mToolbarTitle;  
      private TextView mToolbarSubTitle;  
      private Toolbar mToolbar;  
    
      @Override  
      protected void onCreate(Bundle savedInstanceState) {  
          super.onCreate(savedInstanceState);  
          setContentView(getLayoutId());  
    
          mToolbar = (Toolbar) findViewById(R.id.toolbar);  
         /* 
          toolbar.setLogo(R.mipmap.ic_launcher); 
          toolbar.setTitle("Title"); 
          toolbar.setSubtitle("Sub Title"); 
          */  
          mToolbarTitle = (TextView) findViewById(R.id.toolbar_title);  
          mToolbarSubTitle = (TextView) findViewById(R.id.toolbar_subtitle);  
          if (mToolbar != null) {  
              //将Toolbar显示到界面  
              setSupportActionBar(mToolbar);  
          }  
          if (mToolbarTitle != null) {  
              //getTitle()的值是activity的android:lable属性值  
              mToolbarTitle.setText(getTitle());  
              //设置默认的标题不显示  
              getSupportActionBar().setDisplayShowTitleEnabled(false);  
          }  
    
      }  
    
      @Override  
      protected void onStart() {  
          super.onStart();  
          /** 
           * 判断是否有Toolbar,并默认显示返回按钮 
           */  
          if(null != getToolbar() && isShowBacking()){  
               showBack();  
          }  
      }  
    
      /** 
       * 获取头部标题的TextView 
       * @return 
       */  
      public TextView getToolbarTitle(){  
              return mToolbarTitle;  
      }  
      /** 
       * 获取头部标题的TextView 
       * @return 
       */  
      public TextView getSubTitle(){  
          return mToolbarSubTitle;  
      }  
    
      /** 
       * 设置头部标题 
       * @param title 
       */  
      public void setToolBarTitle(CharSequence title) {  
          if(mToolbarTitle != null){  
              mToolbarTitle.setText(title);  
          }else{  
              getToolbar().setTitle(title);  
              setSupportActionBar(getToolbar());  
          }  
      }  
    
      /** 
       * this Activity of tool bar. 
       * 获取头部. 
       * @return support.v7.widget.Toolbar. 
       */  
      public Toolbar getToolbar() {  
          return (Toolbar) findViewById(R.id.toolbar);  
      }  
    
      /** 
       * 版本号小于21的后退按钮图片 
       */  
      private void showBack(){  
          //setNavigationIcon必须在setSupportActionBar(toolbar);方法后面加入  
          getToolbar().setNavigationIcon(R.mipmap.icon_back);  
          getToolbar().setNavigationOnClickListener(new View.OnClickListener() {  
              @Override  
              public void onClick(View v) {  
                  onBackPressed();  
              }  
          });  
      }  
    
      /** 
       * 是否显示后退按钮,默认显示,可在子类重写该方法. 
       * @return 
       */  
      protected boolean isShowBacking(){  
          return true;  
      }  
    
      /** 
       * this activity layout res 
       * 设置layout布局,在子类重写该方法. 
       * @return res layout xml id 
       */  
      protected abstract int getLayoutId();  
    
      @Override  
      protected void onDestroy() {  
          super.onDestroy();  
          Log.v(TAG, "onDestroy...");  
    
      }  
  }

4，这样就基本把boolbar封装好了，在其他Activity中就可以方便使用了
如，在MainActivity.java中，继承BaseAppCompatActivity，复写getLayoutId()方法，设置布局文件，在布局文件中把toolbar_layout文件include进来
<include layout="@layout/toolbar_layout"/>，一句话就包含了toolbar,很方便，
复写isShowBacking()方法，设置是否显示返回按钮，默认显示不需复写.getToolbarTitle().setText("主界面");getSubTitle().setText("更多");调用这两个方法就可以设置标题和副标题，其他页面也是一样很方便的调用

  package com.hdc.toolbardemo;  

  import android.content.Intent;  
  import android.os.Bundle;  
  import android.view.Menu;  
  import android.view.MenuItem;  
  import android.view.View;  
  import android.widget.Toast;  
    
  public class MainActivity extends BaseAppCompatActivity {  
    
      @Override  
      protected void onCreate(Bundle savedInstanceState) {  
          super.onCreate(savedInstanceState);  
          getToolbarTitle().setText("主界面");  
          getSubTitle().setText("更多");  
      }  
      /** 
       * 设置不显示返回按钮 
       * 
       * @return 
       */  
      protected boolean isShowBacking() {  
          return false;  
      }  
      /** 
       * 设置布局 
       * 
       * @return 
       */  
      @Override  
      protected int getLayoutId() {  
          return R.layout.activity_main;  
      }  
      /** 
       * 跳转到登录界面 
       * 
       * @param view 
       */  
      public void login(View view) {  
          Intent intent = new Intent(this, LoginActivity.class);  
          startActivity(intent);  
      }  
    
      @Override  
      public boolean onCreateOptionsMenu(Menu menu) {  
          // Inflate the menu; this adds items to the action bar if it is present.  
          getMenuInflater().inflate(R.menu.menu_main, menu);  
          return true;  
      }  
    
      @Override  
      public boolean onOptionsItemSelected(MenuItem item) {  
          // TODO Auto-generated method stub  
          switch(item.getItemId()){  
              case R.id.menu_about:  
                  Toast.makeText(MainActivity.this, ""+"关于", Toast.LENGTH_SHORT).show();  
                  break;  
              case R.id.menu_settings:  
    
                  Toast.makeText(MainActivity.this, ""+"设置", Toast.LENGTH_SHORT).show();  
                  break;  
              case R.id.menu_quit:  
    
                  Toast.makeText(MainActivity.this, ""+"退出", Toast.LENGTH_SHORT).show();  
                  break;  
              default:  
                  break;  
          }  
          return super.onOptionsItemSelected(item);  
      }  
  }

源码下载地址，点击这里。。。

参考资料：

android：ToolBar详解(手把手教程)
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html

Android设置Toolbar的标题居中
http://dastorm.com/2015/05/31/android%E8%AE%BE%E7%BD%AEtoolbar%E7%9A%84%E6%A0%87%E9%A2%98%E5%B1%85%E4%B8%AD/

Activity之AppCompatActivity与toolbar的结合
http://www.myexception.cn/android/2053784.html

Android 5.x Theme 与 ToolBar 实战
http://blog.csdn.net/lmj623565791/article/details/45303349

改文章已同步到公众号，欢迎大家专注！

公众号.jpg

AppCompatActivity与toolbar的结合，Bas

猜你喜欢

热点阅读