Android ToolBar 基础使用——进阶封装BaseActivity（附源码）

小咪咪 2021-09-12 07:38 397阅读 0赞

# 前言 #

>     在2015年的Google I/O大会上推出Design Support库，这个库讲Material Design 中最具代表性的一些控件和效果进行了封装，使得开发者在即使不了解Material Design的情况下也能轻松地将自己的应用Material华。这篇博文就说讲解其中一个 ToolBar的控件，我们之前对于ActionBar是比较熟悉的，但是大多数开发中都是将其隐藏掉了，因为其自己身设计上限定位于活动的顶部，不能实现一些Material效果，所以官方一级不建议使用了。相比之下，Toolbal的强大之处在于，它不仅继承了ActionBar的所有功能，而且具备灵活性，可自由搭配其他控件完成Material效果。接下来手把手教新手如何使用，并抽象成类在项目中使用。
> 
>   
>

本案例，先上效果图：

### ![70][]  
  ###

CSDN 资源下载：[Toolbar封装抽象类源码][Toolbar]

GitHub 源码地址：[https://github.com/aiyangtianci/ToolBarDemo][https_github.com_aiyangtianci_ToolBarDemo]

### 一、首先定义Style，做为整个项目的基本风格 ###

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

colorPrimary  :  标题栏的背景色

colorPrimaryDark: 状态栏的背景色

colorAccent : 控件效果的背景色

### 二、接下里在布局中使用v7.widget.Toolbar控件 替代 ActionBar 在活动中显示 ###

<?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"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical">
    
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/toolbar"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
     
        </android.support.v7.widget.Toolbar>
    
    </LinearLayout>

> 上面是布局文件中的代码：这里ToolBard单独设置了Theme主题，这是因为我们的基本style是淡色（Light）的主题，因此Toolbar现在也是淡色主题，而Toolbar的各种元素会自动使用深色系，去区分主题颜色，之前ActionBar的文字是白色的，现在变成了黑色，效果会看起来不佳，所以将Toolbar的单独指定深色主题，但是如果Toolbar使用了菜单，弹出后的效果依然是深色主题，所以再指定popupThme淡色主题，app：popupThme可以兼容5.0以下版本。

下面看在Activity中的代码：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        //设置不现实自带的title文字
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    
    }

运行起来，就可以看见最原始ToolBar了。

### 三、最后我们自定义 ToolBar 文字按钮进行交互 ###

1、设置标题栏的返回按钮：

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

2、标题title居中显示：

<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:textColor="#ffffff"
            android:layout_gravity="center"/>
    </android.support.v7.widget.Toolbar>

style是让字体大小与Toolbar保持一致。

3、右侧按钮或文字显示：

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
         getMenuInflater().inflate(R.menu.toobar,menu);
       
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       
        if (item.getItemId() == R.id.settings){
            Toast.makeText(this,"You Are Right",Toast.LENGTH_SHORT).show();
        }
        return true;
    }

## 四、进阶封装BaseActivity ##

Toolbar是活动的标题栏，把ToolBar 封装成一个抽象Base类，可以加快开发的脚步使代码更整洁清晰。这里我附上源码，非常实用，新手必备，加快开发速度和保持项目统一风格。

/[res][]/[menu][]/toobar.xml

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
    
        <item
            android:id="@+id/menu_item_one"
            android:icon="@mipmap/ic_launcher"
            android:orderInCategory="1"
            android:title="Settings_one"
            app:showAsAction="always"
            />
    
        <item
            android:id="@+id/menu_item_two"
            android:icon="@mipmap/ic_launcher"
            android:orderInCategory="2"
            android:title="Settings_two"
            app:showAsAction="always"
    
            />
    </menu>

/ TopBarBaseActivity.java

public abstract class TopBarBaseActivity extends AppCompatActivity {
        private String menuStr;
        private int menuResId;
        private String menuStr2;
        private int menuResId2;
        private TextView tvTitle;
        private FrameLayout viewContent;
        private Toolbar toolbar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.activity_main);
    
            //1、设置支出，并不显示项目的title文字
            toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayShowTitleEnabled(false);
    
            //2、将子类的布局解析到 FrameLayout 里面
            viewContent = (FrameLayout) findViewById(R.id.viewContent);
            LayoutInflater.from(this).inflate(getConentView(), viewContent);
    
            //3、初始化操作（此方法必须放在最后执行位置）
            init(savedInstanceState);
        }
    
        /**
         * 设置布局资源
         *
         * @return
         */
        protected abstract int getConentView();
    
        /**
         * 初始化操作
         *
         * @param savedInstanceState
         */
        protected abstract void init(Bundle savedInstanceState);
    
        /**
         * 设置页面标题
         *
         * @param title 标题文字
         */
        protected void setTitle(String title) {
            if (!TextUtils.isEmpty(title)) {
                tvTitle = (TextView) findViewById(R.id.tv_title);
                tvTitle.setText(title);
            }
        }
        /**
         * 设置显示返回按钮
         */
        protected void setTitleBack(boolean visible) {
            if (visible) {
                toolbar.setNavigationIcon(R.mipmap.back_whait);//设置返回按钮
            }
        }
    
        /**
         * 设置标题栏右键按钮事件
         *
         * @param menuStr 文字
         * @param menuResId 图片icon
         * @param onClickListener 事件响应
         */
        protected void setToolBarMenuOne(String menuStr, int menuResId, OnClickRightListener onClickListener) {
            this.onClickRightListener = onClickListener;
            this.menuStr = menuStr;
            this.menuResId = menuResId;
        }
        protected void setToolBarMenuTwo(String menuStr, int menuResId, OnClickRightListener onClickListener) {
            this.onClickRightListener2 = onClickListener;
            this.menuStr2 = menuStr;
            this.menuResId2 = menuResId;
        }
        /**
         * 设置拦截事件处理业务逻辑
         *
         * @param item 自定义菜单项
         * @return
         */
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()) {
                case android.R.id.home:
                    Toast.makeText(this, "嘿 ！不知道点击返回就退出应用吗？", Toast.LENGTH_SHORT).show();
                    finish();
                    break;
                case R.id.menu_item_one:
                    this.onClickRightListener.onClick();
    
                    break;
                case R.id.menu_item_two:
                    this.onClickRightListener2.onClick();
    
                    break;
            }
            return true;//拦截系统处理事件
        }
    
        /**
         * 加载Toolbar标题右菜单图标和文字
         * @param menu
         * @return
         */
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            if (menuResId != 0 || !TextUtils.isEmpty(menuStr)) {//显示自定义右菜单
                getMenuInflater().inflate(R.menu.toobar, menu);
            }else if (menuResId2 != 0 || !TextUtils.isEmpty(menuStr2)){
                getMenuInflater().inflate(R.menu.toobar, menu);
            }else {
    
                //如果把下面这行代码表示右侧菜单显示默认值。
                //显示的默认Menu、Item里的值必须在menu文件中配置好文字和icon。
    //            getMenuInflater().inflate(R.menu.toobar, menu);
            }
            return true;
        }
    
        /**
         * 选择性显示图标或文字
         * @param menu
         * @return
         */
        @Override
        public boolean onPrepareOptionsMenu(Menu menu) {
            if (menuResId != 0) {
                menu.findItem(R.id.menu_item_one).setIcon(menuResId);
            } else if (!TextUtils.isEmpty(menuStr)) {
                menu.findItem(R.id.menu_item_one).setTitle(menuStr);
            }else{
                menu.findItem(R.id.menu_item_one).setVisible(false);
            }
    
            if (menuResId2 != 0){
                menu.findItem(R.id.menu_item_two).setIcon(menuResId2);
            } else if (!TextUtils.isEmpty(menuStr)) {
                menu.findItem(R.id.menu_item_two).setTitle(menuStr2);
            }else {
                menu.findItem(R.id.menu_item_two).setVisible(false);
            }
    
            return super.onPrepareOptionsMenu(menu);
        }
    
        private OnClickRightListener onClickRightListener;
        private OnClickRightListener onClickRightListener2;
    
        public interface OnClickRightListener {
            void onClick();
        }
    
    }

public class MainActivity extends TopBarBaseActivity {
    
        private Context mContext = MainActivity.this;
        @Override
        protected int getConentView() {
            return R.layout.activtiy_one;
        }
        @Override
        protected void init(Bundle savedInstanceState) {
    
            setTitle("ToolBar");
    
            setTitleBack(true);
    
            //设置右侧菜单选项即事件处理
            setToolBarMenuOne("", R.mipmap.suggest_icon, new OnClickRightListener() {
                @Override
                public void onClick() {
                    Toast.makeText(mContext, "第一个按钮触发效果！厉害了！", Toast.LENGTH_SHORT).show();
                }
            });
            setToolBarMenuTwo("", R.mipmap.message_icon, new OnClickRightListener() {
                @Override
                public void onClick() {
                    Toast.makeText(mContext, "嘿 ！不错哦~", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

CSDN 资源下载：[Toolbar封装抽象类源码][Toolbar]

GitHub 源码地址：[https://github.com/aiyangtianci/ToolBarDemo][https_github.com_aiyangtianci_ToolBarDemo]

![20180517193545374][]

感谢android之路有大家一起学习，我并不孤单。谢谢。

[70]: /images/20210802/7bb6667072554e2ca6bcadbc44dd6598.png
[Toolbar]: http://download.csdn.net/download/csdn_aiyang/9857837
[https_github.com_aiyangtianci_ToolBarDemo]: https://github.com/aiyangtianci/ToolBarDemo
[res]: https://github.com/aiyangtianci/ToolBarDemo/tree/master/app/src/main/res
[menu]: https://github.com/aiyangtianci/ToolBarDemo/tree/master/app/src/main/res/menu
[20180517193545374]: /images/20210802/5d64ea22e9e14adf862c95c5f6dacc38.png