基于AndroidStudio自定义顶部菜单栏----ActionBar和ToolBar的基本实现

• 自定义ActionBar
• 自定义ToolBar

自定义ActionBar

ActionBar是一个确定用户位置的窗口功能，并且能提供用户操作和导航的模块。使用ActionBar能够为用户提供一个熟悉的界面进行界面的切换，这个切换能够使系统更优雅是适应不同屏幕的配置。
ActionBar可以自定义以下几种元素，实现不同风格

• 设置返回键
• 设置标题
• 自定义搜索框
• 自定义菜单（图标及文字形式的菜单）
  我在项目中封装了7种ActionBar，可以适应不同的需求
  （1）去掉系统自带的ActionBar，在values/styles.xml中修改style为：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

• 可以根据喜好更改颜色（参数如下）

 <!--状态栏颜色-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <!--控制各个控件被选中时的颜色-->
<item name="colorAccent">@color/colorAccent</item>
    <!--页面背景色-->
<item name="android:windowBackground">@color/windowBackg</item>
    <!--底部导航栏颜色-->
<item name="android:navigationBarColor">@color/navigationColor</item>
    <!--Appbar背景色-->
<item name="android:colorPrimary">@color/colorPrimary</item>
    <!--ToolBar上的Title颜色-->
<item name="android:textColorPrimary">@color/textColorPrimary</item>
    <!--各个控制控件的默认颜色-->
<item name="android:colorControlNormal">@color/colorControlNormal</item>

（2）为自定义的ActionBar定义布局（customactionbar.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="wrap_content"
    android:background="#00BFFF">

    <ImageView
        android:id="@+id/header_back"
        android:layout_width="26dp"
        android:layout_height="26dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:padding="4dp"
        android:src="@mipmap/ic_arrow_back" />

    <LinearLayout
        android:id="@+id/linear_header_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <TextView
            android:id="@+id/header_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/search"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@drawable/edittext_bg_shape"
        android:layout_margin="3dp"
        android:layout_centerInParent="true"
        android:padding="5dp"
        android:visibility="gone">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:hint="search"
            android:layout_centerInParent="true"
            android:padding="3dp"
            android:textColor="#fff"
            android:textSize="13sp" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:padding="12dp">

        <TextView
            android:id="@+id/header_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="#fff"/>
    </RelativeLayout>

    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

（3）在activity_main.xml中定义所有actionbar的布局

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.actionbar.customactionbar.MainActivity">

    <com.example.actionbar.customactionbar.CustomActionBar
        android:id="@+id/actionbar_0"
        android:layout_width="match_parent"
        android:layout_height="45dp"/>

    <com.example.actionbar.customactionbar.CustomActionBar
        android:id="@+id/actionbar_1"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="20dp"/>

    <com.example.actionbar.customactionbar.CustomActionBar
        android:id="@+id/actionbar_2"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="20dp"/>

    <com.example.actionbar.customactionbar.CustomActionBar
        android:id="@+id/actionbar_3"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="20dp"/>

    <com.example.actionbar.customactionbar.CustomActionBar
        android:id="@+id/actionbar_4"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="20dp"/>

    <com.example.actionbar.customactionbar.CustomActionBar
        android:id="@+id/actionbar_5"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="20dp"/>

    <com.example.actionbar.customactionbar.CustomActionBar
        android:id="@+id/actionbar_6"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="20dp"/>

</LinearLayout>

（4）定义CustomActionBar类，封装了ActionBar的各种函数

public class CustomActionBar extends LinearLayout {

    private ImageView headerBack;
    private TextView headerTitle, headerMenuText;
    private LinearLayout Search;
    private LayoutInflater mInflater;
    private View headView;

    public CustomActionBar(Context context) {
        super(context);
        init(context);
    }

    public CustomActionBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public void init(Context context) {
        mInflater = LayoutInflater.from(context);
        headView = mInflater.inflate(R.layout.customactionbar, null);
        addView(headView);
        initView();
    }

    private void initView() {
        headerBack = headView.findViewById(R.id.header_back);
        headerTitle = headView.findViewById(R.id.header_title);
        headerMenuText = headView.findViewById(R.id.header_menu);
        Search = headView.findViewById(R.id.search);
        headerBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ((Activity) getContext()).finish();
            }
        });
    }

    public void setStyle(String title) {
        if (title != null)
            headerTitle.setText(title);
    }

    /**
     * 标题加文字菜单
     *
     * @param title
     * @param menuText
     * @param listener
     */
    public void setStyle(String title, String menuText, OnClickListener listener) {
        setStyle(title);
        if (menuText != null)
            headerMenuText.setText(menuText);
        headerMenuText.setOnClickListener(listener);
    }

    /**
     * 只有右边字体
     *
     * @param menuText
     * @param listener
     */
    public void setStyle(String menuText, OnClickListener listener) {
        headerBack.setVisibility(GONE);
        if (menuText != null)
            headerMenuText.setText(menuText);
        headerMenuText.setOnClickListener(listener);
    }

    /**
     * 标题加图标菜单
     *
     * @param title
     * @param menuImgResource
     * @param listener
     */
    public void setStyle(String title, int menuImgResource, OnClickListener listener) {
        setStyle(title);
        headerMenuText.setBackgroundResource(menuImgResource);
        headerMenuText.setOnClickListener(listener);
    }

    public void setStyle(boolean hasSearch){
        if(hasSearch){
            Search.setVisibility(VISIBLE);
        }
    }

    /**
     * 将默认的返回按钮功能去掉
     */
    public void setStyleNoBack(String title) {
        setStyle(title);
        headerBack.setVisibility(GONE);
    }
}

（5）在MainActivity类中实现各种ActionBar

public class MainActivity extends AppCompatActivity {

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

        init();
    }

    private void init() {
        CustomActionBar actionBar0 = findViewById(R.id.actionbar_0);
        CustomActionBar actionBar1 = findViewById(R.id.actionbar_1);
        CustomActionBar actionBar2 = findViewById(R.id.actionbar_2);
        CustomActionBar actionBar3 = findViewById(R.id.actionbar_3);
        CustomActionBar actionBar4 = findViewById(R.id.actionbar_4);
        CustomActionBar actionBar5 = findViewById(R.id.actionbar_5);
        CustomActionBar actionBar6 = findViewById(R.id.actionbar_6);

        //actionbar0默认只有返回键

        //只有标题
        actionBar1.setStyleNoBack("标题");

        //只有菜单
        actionBar2.setStyle("菜单", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"您点击了菜单",Toast.LENGTH_SHORT).show();
            }
        });

        //返回键 + 标题
        actionBar3.setStyle("标题");

        //返回键 + 标题 + 菜单
        actionBar4.setStyle("标题", "菜单", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"您点击了菜单",Toast.LENGTH_SHORT).show();
            }
        });

        //返回键 + 标题 + 菜单图标
        actionBar5.setStyle("标题", R.mipmap.more_white, new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"您点击了菜单",Toast.LENGTH_SHORT).show();
            }
        });

        //搜索框模式
        actionBar6.setStyle(true);
    }
}

• 搜索框格式实现：在drawable中创建相应的格式文件，定义如下

<?xml version="1.0" encoding="utf-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="25dp" />
    <solid android:color="#F3F3F3" />
</shape>

效果图

自定义ToolBar

Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件。由于他的可定制度高，所以已经逐步替代掉了ActionBar。实际上这两个可以理解为同一个东西，ToolBar是对ActionBar的升级，使用起来也基本是一样的。
ToolBar可自定义以下几种元素，以适应不同的需求

• 设置导航栏图标
• 设置logo
• 设置标题与子标题
• 设置菜单（文字及图标菜单）
• 可自定义添加一至多个控件
  （1）编写activity_main.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" >
    <Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="#FFFFFF"
        app:popupTheme="@style/Theme.Toolbar.base.MenuItem">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Clock"/>
    </Toolbar>

</FrameLayout>

（2）创建自定义的菜单（Menu文件）

<?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_search"
        android:icon="@mipmap/ic_search"
        android:title="@string/menu_search"
        android:showAsAction="ifRoom|withText" />
    <item
        android:id="@+id/menu_notification"
        android:icon="@mipmap/ic_clock"
        android:title="@string/menu_notification"
        android:showAsAction="ifRoom|withText" />
    <item
        android:id="@+id/menu_close"
        android:title="@string/menu_close"
        app:showAsAction="never"/>
    <item
        android:id="@+id/menu_about"
        android:title="@string/menu_about"
        app:showAsAction="never"/>
</menu>

（3）在MainActivity中具体实现工具栏

public class MainActivity extends AppCompatActivity {
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去掉自带的ActionBar
//        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initEvents();
    }

    private void initEvents() {
        //设置menu监听器
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                int menuItemId = item.getItemId();
                switch (menuItemId) {
                    case R.id.menu_close:
                        Toast.makeText(MainActivity.this, R.string.menu_close, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_about:
                        Toast.makeText(MainActivity.this, R.string.menu_about, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_search:
                        Toast.makeText(MainActivity.this, R.string.menu_search, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_notification:
                        Toast.makeText(MainActivity.this, R.string.menu_notification, Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });
    }

    private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.tool_bar);
        //设置导航栏图标
        mToolbar.setNavigationIcon(R.mipmap.ic_menu_logo);
        //设置app logo
        mToolbar.setLogo(R.mipmap.ic_launcher);
        //设置主标题
        mToolbar.setTitle("Title");
        //设置主标题文本的字体，大小，颜色等主题属性
        mToolbar.setTitleTextAppearance(getApplicationContext(), R.style.Theme_Toolbar_Base_Title);
        //设置子标题
        mToolbar.setSubtitle("Subtitle");
        //设置子标题文本的字体，大小，颜色等主题属性
        mToolbar.setSubtitleTextAppearance(getApplicationContext(), R.style.Theme_Toolbar_Base_Subtitle);
        //加载menu布局文件
        mToolbar.inflateMenu(R.menu.toolbar_menu);
    }
}

（4）去掉系统自带的ActionBar（也可以需要的 Activity设置为NoActionBar主题），这里因为MainActivity是使用默认的，所以我们采用修改默认主题的父类为：

parent="Theme.AppCompat.Light.NoActionBar"

也可以在setContentView()之前调用supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
（5）在values/styles.xml文件下设置标题的主题（字体大小，颜色等）
这里比较简单，就不上代码了。
效果图

参考
android：ToolBar详解（手把手教程）
Toolbar的详细介绍和自定义Toolbar
Android ToolBar 使用完全解析
作者：龚崇敏
原文链接：
https://blog.csdn.net/qq_40663411/article/details/106447982