Android ToolBar 的簡單封裝

使用過 ToolBar 的朋友肯定對其使用方法不陌生，由於其使用方法非常easy。假設對 ActionBar 使用比較熟練的人來說。ToolBar 就更easy了！只是，相信大家在使用的過程中都遇到過這樣一個問題，須要在每個我們要使用的 xml 中加入 ToolBar 這個控件，比方我須要在 MainActivity中使用 ToolBar，則他的 xml 文件須要這樣寫，

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <android.support.v7.widget.Toolbar
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:id="@+id/id_tool_bar"
        android:background="?attr/colorPrimary"
        app:navigationIcon="?attr/homeAsUpIndicator"
        >
    </android.support.v7.widget.Toolbar>
    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="asdfasf"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

同理其它 Activity 中須要用頁都須要在 xml加入

<android.support.v7.widget.Toolbar
        android:layout_height="?
attr/actionBarSize" android:layout_width="match_parent" android:id="@+id/id_tool_bar" android:background="?attr/colorPrimary" app:navigationIcon="?attr/homeAsUpIndicator" > </android.support.v7.widget.Toolbar>

這樣一段代碼，盡管不多。可是我們最煩的就是寫反復代碼，也不符合我們的編程思想；所以就有了下面寫法

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white">

    <include layout="@layout/toolbar" android:layout_width="match_parent" android:layout_height="?
attr/actionBarSize" /> <TextView  android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="asdfasf" android:layout_alignParentBottom="true"/> </RelativeLayout> 

toolbar.xml的代碼例如以下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:layout_height="?attr/actionBarSize" android:layout_width="match_parent" android:id="@+id/id_tool_bar" android:background="?attr/colorPrimary" app:navigationIcon="?
attr/homeAsUpIndicator" > </android.support.v7.widget.Toolbar> </FrameLayout>

這樣我們僅僅須要在每個我們要使用 toolbar 的 xml 中通過 include 嵌入 toolbar.xml布局即可，感覺和之前的比，確實是少了幾行代碼！可是意義不大。

而我這里要實現的封裝。是能夠不須要在 xml 中寫一行關於 toolbar 的代碼，也就是跟平時不用 toolbar 一樣的寫法即可！請接着往下看。

前提是准備好toolbar.xml,ToolBarActivity.java,ToolBarHelper.java
toolbar.xml中配置 toolbar 的基本屬性：
toolbar 的寬高，toolbar 的背景顏色等其它樣式
ToolBarActivity.java是所以須要使用 toolbar Activity 的父類，這里我把他定義為抽象類，由於單獨的這個類不能完畢不論什么功能
ToolBarHelper.java 是 Activity 和 toolbar 的關聯類

先來看 toolbar.xml的代碼

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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  設置高度為 ActionBar 的高度 android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" android:id="@+id/id_tool_bar" 背景顏色為 ActionBar 的背景顏色 android:background="?
attr/colorPrimary" 返回button的圖標 app:navigationIcon="?attr/homeAsUpIndicator" > </android.support.v7.widget.Toolbar> </FrameLayout>

ToolBarActivity.java的內容：主要代碼是在setContentView（int id） 實現

package toolbar.toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

/** * Created by moon.zhong on 2015/6/12. * time : 10:26 */
public abstract class ToolBarActivity extends AppCompatActivity {
    private ToolBarHelper mToolBarHelper ;
    public Toolbar toolbar ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public void setContentView(int layoutResID) {

        mToolBarHelper = new ToolBarHelper(this,layoutResID) ;
        toolbar = mToolBarHelper.getToolBar() ;
        setContentView(mToolBarHelper.getContentView());
        /*把 toolbar 設置到Activity 中*/
        setSupportActionBar(toolbar);
        /*自己定義的一些操作*/
        onCreateCustomToolBar(toolbar) ;
    }

    public void onCreateCustomToolBar(Toolbar toolbar){
        toolbar.setContentInsetsRelative(0,0);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home){
            finish();
            return true ;
        }
        return super.onOptionsItemSelected(item);
    }
}

ToolBarHelper.java
這個類的功能是：先創建一個 ViewGroup 來作為視圖的父 View，把用戶定義的 View。和 toolBar 依次 Add 到 ViewGroup 中；

package toolbar.toolbar;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

/** * Created by moon.zhong on 2015/6/12. * time : 10:45 */
public class ToolBarHelper {

    /*上下文，創建view的時候須要用到*/
    private Context mContext;

    /*base view*/
    private FrameLayout mContentView;

    /*用戶定義的view*/
    private View mUserView;

    /*toolbar*/
    private Toolbar mToolBar;

    /*視圖構造器*/
    private LayoutInflater mInflater;

    /* * 兩個屬性 * 1、toolbar是否懸浮在窗體之上 * 2、toolbar的高度獲取 * */
    private static int[] ATTRS = {
            R.attr.windowActionBarOverlay,
            R.attr.actionBarSize
    };

    public ToolBarHelper(Context context, int layoutId) {
        this.mContext = context;
        mInflater = LayoutInflater.from(mContext);
        /*初始化整個內容*/
        initContentView();
        /*初始化用戶定義的布局*/
        initUserView(layoutId);
        /*初始化toolbar*/
        initToolBar();
    }

    private void initContentView() {
        /*直接創建一個幀布局，作為視圖容器的父容器*/
        mContentView = new FrameLayout(mContext);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        mContentView.setLayoutParams(params);

    }

    private void initToolBar() {
        /*通過inflater獲取toolbar的布局文件*/
        View toolbar = mInflater.inflate(R.layout.toolbar, mContentView);
        mToolBar = (Toolbar) toolbar.findViewById(R.id.id_tool_bar);
    }

    private void initUserView(int id) {
        mUserView = mInflater.inflate(id, null);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        TypedArray typedArray = mContext.getTheme().obtainStyledAttributes(ATTRS);
        /*獲取主題中定義的懸浮標志*/
        boolean overly = typedArray.getBoolean(0, false);
        /*獲取主題中定義的toolbar的高度*/
        int toolBarSize = (int) typedArray.getDimension(1,(int) mContext.getResources().getDimension(R.dimen.abc_action_bar_default_height_material));
        typedArray.recycle();
        /*假設是懸浮狀態，則不須要設置間距*/
        params.topMargin = overly ? 0 : toolBarSize;
        mContentView.addView(mUserView, params);

    }

    public FrameLayout getContentView() {
        return mContentView;
    }

    public Toolbar getToolBar() {
        return mToolBar;
    }
}

到這里，toolbar 的簡單封裝就算完畢了。一起來看看封裝之后的效果吧

MainActivity.java

package toolbar.toolbar;

import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ToolBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

    @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;
    }

}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white">
    <TextView  android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
    <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="asdfasf" android:layout_alignParentBottom="true"/>
</RelativeLayout>

到這里我們無論是 MainActivity 還是 activity_main中都沒有出現 ToolBar，僅僅是 MainActivity 不再繼承 AppCompatActivity。而是繼承我們 ToolBarActivity，執行效果看看：

ToolBar 的其它使用方法這里就不講了，跟 ActionBar 使用方法差點兒一樣。

最后：
在使用 ToolBar 的時候，須要使用無 ActionBar 的主題，

    <!-- Base application theme. -->
    <style name="AppThemeParent" parent="Theme.AppCompat.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@android:color/holo_red_light</item> </style>

再上一張自己定義 View 的 ToolBar 效果圖：
標題居中，右側能夠加入button

源代碼下載