Android進階 一個專案，一個Toolbar

smartsean發表於2019-03-04
Android

需求

在日常的開發當中，經常會用到Toolbar作為標題欄，如果在每個view裡面都寫一個Toolbar的話，顯然有點冗餘，一般情況下在每個專案裡面都有一個BaseActivity，作為所有Activity的父類，我們就可以在BaseActivity中封裝好Toolbar，在子類用BaseActivity提供的方法呼叫即可。

展示

來來來，往這邊看，下面的的gif都是通過一個Toolbar實現的：

toolbar.gif

是不是很不錯，只用在子Activity中呼叫BaseActivity中的方法或者重寫方法就可以了。有興趣的可以看下程式碼，歡迎指正

Demo地址

實現

先在BaseActivity中寫好佈局檔案，一個Toolbar和一個RelativeLayout：

先看佈局檔案activity_base.xml：

  • common_title_tb 就是我們複用的toolbar。
  • common_title_tv 就是複用的toolbar中的標題。
  • RelativeLayout 就是我們子Activity所要顯示的地方
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_base"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.sean.demo.ui.BaseActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/common_title_tb"
        android:layout_width="match_parent"
        android:layout_height="@dimen/common_toolbar_height"
        android:background="@color/colorPrimary"
        android:elevation="6dp">

        <TextView
            android:id="@+id/common_title_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="我是標題"
            android:textColor="@color/white"
            android:textSize="16sp" />

    </android.support.v7.widget.Toolbar>

    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"></RelativeLayout>

</LinearLayout>
複製程式碼

然後我們需要在BaseActivity中暴露給子類特定的方法，讓子類去根據自己的實際情況去定製頁面。

接下來看下我們的BaseActivity：

主要方法有：

  • setToolBar 子類重新設定Toolbar樣式（需要子類重新寫一個Toolbar）
  • hidetoolBar 子類不需要Toolbar的時候，可以隱藏掉通用的Toolbar
  • setToolBarMenuOnclick 給Toolbar的menu設定點選事件，滿足不同頁面的需求
  • setBackArrow 設定通用的返回按鈕，需要的時候直接呼叫該方法就可以了
  • setContentLayout 設定子類的佈局（這個時候就不用設定setContentView()了）
  • setTitle 設定標題文字

程式碼：


public class BaseActivity extends AppCompatActivity {

    /**
     * 通用的ToolBar標題
     */
    private TextView commonTitleTv;
    /**
     * 通用的ToolBar
     */
    private Toolbar commonTitleTb;
    /**
     * 內容區域
     */
    private RelativeLayout content;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_base);
        initView();
        setSupportActionBar(commonTitleTb);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    }

    private void initView() {
        commonTitleTv = (TextView) findViewById(R.id.common_title_tv);
        commonTitleTb = (Toolbar) findViewById(R.id.common_title_tb);
        content = (RelativeLayout) findViewById(R.id.content);
    }


    /**
     * 子類呼叫，重新設定Toolbar
     *
     * @param layout
     */
    public void setToolBar(int layout) {
        hidetoolBar();
        commonTitleTb = (Toolbar) content.findViewById(layout);
        setSupportActionBar(commonTitleTb);
        //設定actionBar的標題是否顯示，對應ActionBar.DISPLAY_SHOW_TITLE。
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    }

    /**
     * 隱藏ToolBar，通過setToolBar重新定製ToolBar
     */
    public void hidetoolBar() {
        commonTitleTb.setVisibility(View.GONE);
    }

    /**
     * menu的點選事件
     *
     * @param onclick
     */
    public void setToolBarMenuOnclick(Toolbar.OnMenuItemClickListener onclick) {
        commonTitleTb.setOnMenuItemClickListener(onclick);
    }


    /**
     * 設定左上角back按鈕
     */
    public void setBackArrow() {
        final Drawable upArrow = getResources().getDrawable(R.drawable.common_back_ic);
        //給ToolBar設定左側的圖示
        getSupportActionBar().setHomeAsUpIndicator(upArrow);
        // 給左上角圖示的左邊加上一個返回的圖示 。對應ActionBar.DISPLAY_HOME_AS_UP
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //設定返回按鈕的點選事件
        commonTitleTb.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }

    /**
     * 設定toolbar下面內容區域的內容
     *
     * @param layoutId
     */
    public void setContentLayout(int layoutId) {
        LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View contentView = inflater.inflate(layoutId, null);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        content.addView(contentView, params);
    }

    /**
     * 設定標題
     *
     * @param title
     */
    public void setTitle(String title) {
        if (!TextUtils.isEmpty(title)) {
            commonTitleTv.setText(title);
        }
    }

    /**
     * 設定標題
     *
     * @param resId
     */
    public void setTitle(int resId) {
        commonTitleTv.setText(resId);
    }
}
複製程式碼

比如你想在上面gif圖的EventBusActivity的Activity使用，並且實現menu點選事件、返回按鈕、設定標題等操作，只需要下面很簡單的程式碼就可以了：

再來看看子Activity：

   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentLayout(R.layout.activity_event_bus);//設定到BaseActivity中的content中
        setTitle("EventBus使用");//設定標題
        setBackArrow();//設定返回按鈕和點選事件
        setToolBarMenuOnclick(new EventBusMenuItemClick());//設定menu選單的顯示和點選事件
    }
複製程式碼

各位看官感興趣的話，歡迎去看看，這裡是地址，有什麼可以修改的，歡迎提出寶貴意見！

你可以通過以下方式關注我：

  1. CSDN
  2. 掘金
  3. 個人部落格

相關文章