android Toolbar的简单使用

一、基本使用

1.活动主题更改为隐藏ToolBar

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

2.布局中添加toolbar

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>

3.实例化

//实例化
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

效果如下

4.基本属性

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:navigationIcon="@drawable/toolbar_back"
        app:logo="@drawable/toolbar_logo"
        app:title="大标题"
        app:titleTextColor="#e26b6b"  
        app:subtitle="子标题"
        app:subtitleTextColor="#6decd5">
    </android.support.v7.widget.Toolbar>

app:navigationIcon="@drawable/toolbar_back" //左侧图标

app:logo="@drawable/toolbar_logo" //logo

app:title="大标题" //大标题

app:titleTextColor="#e26b6b" //大标题颜色

app:subtitle="子标题" //子标题

app:subtitleTextColor="#6decd5" //子标题颜色

效果如下;

5.添加选项菜单

第一步创建菜单文件

<?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/toolbar_menu_settings"
        android:icon="@drawable/toolbar_setting"
        android:orderInCategory="100"
        android:title="settings"
        app:showAsAction="never"/>
    <item
        android:id="@+id/toolbar_menu_share"
        android:icon="@drawable/toolbar_share"
        android:orderInCategory="110"
        android:title="share"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/toolbar_menu_search"
        android:icon="@drawable/toolbar_search"
        android:orderInCategory="100"
        android:title="search"
        app:showAsAction="ifRoom"/>
</menu>

第二部在代码中重写onCreateOptionsMenu方法加载菜单文件

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu,menu);
        return true;
    }

效果如下

二、个性设置

1.左侧返回箭头

想要显示自带的返回箭头，需要去掉之前设定的属性：

app:navigationIcon="@mipmap/title_bar_back"

然后在代码中添加：

ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
     actionBar.setHomeAsUpIndicator(R.drawable.design_menu);     //设置图标
     actionBar.setDisplayHomeAsUpEnabled(true);                   //显示
}

效果

2.溢出图标颜色

在style文件中添加：

<!-- 溢出菜单图标颜色-->
<item name="colorControlNormal">@android:color/white</item

2.自定义右侧溢出图标

<style name="AppTheme.MyNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 溢出菜单图标颜色-->
        <item name="colorControlNormal">@android:color/white</item>
        <!-- 溢出菜单图标自定义-->
        <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>

        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="OverflowButtonStyle" parent="android:Widget.ActionButton.Overflow">
        <item name="android:src">@drawable/toolbar_menu_add</item>
    </style>

补充：

由于我们使用的是AppCompatActivity，因此必须使用AppCompat的相关主题，我这里使用亮色调的没有ActionBar的主题，注意需要在清单文件当中去使用自己定义的主题。

为了完全去掉ActionBar，需要把windowActionBar、windowNoTitle以及加上android声明的也写上，确保把系统自带的以及第三方兼容包的ActionBar都彻底去掉。

效果：

3.更改弹出菜单背景

在Style文件中添加样式：

<!-- toolbar弹出菜单样式背景 -->
    <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
        <item name="android:colorBackground">@color/gray</item>
    </style>

在布局文件中添加使用主题：

app:popupTheme="@style/ToolbarPopupTheme"

此时运行效果：

3.更改弹出文字颜色

<style name="AppTheme.MyNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 溢出菜单图标颜色-->
        <item name="colorControlNormal">@android:color/white</item>
        <!-- 溢出菜单图标自定义-->
        <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
        <!-- 溢出菜单文字颜色-->
        <item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item>

        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <!--溢出菜单文字颜色-->
    <style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
        <item name="android:textColor">@color/white</item>
    </style>

效果：

4.修改(大/小)标题文字大小

添加style

<!-- toolbar小标题文字大小 -->
    <style name="SubToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">18sp</item>
    </style>
    <!-- toolbar大标题文字大小 -->
    <style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">12sp</item>
    </style>

布局文件添加

app:titleTextAppearance="@style/ToolbarTitleSize"
app:subtitleTextAppearance="@style/SubToolbarTitleSize"

效果：

5.修改弹出菜单位置

添加style：

<!--菜单弹出-->
    <style name="OverflowMenuStyle">
        <!-- 弹出层背景颜色 -->
        <item name="android:colorBackground">@color/gray</item>
        <!-- 设置弹出菜单文字颜色 -->
        <item name="android:textColor">@color/white</item>

        <!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
        <item name="overlapAnchor">false</item>
        <item name="android:dropDownWidth">wrap_content</item>
        <item name="android:paddingRight">5dp</item>
        <!-- 弹出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar -->
        <item name="android:dropDownVerticalOffset">5dp</item>
        <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
        <item name="android:dropDownHorizontalOffset">0dp</item>
    </style>

布局文件

app:popupTheme="@style/OverflowMenuStyle"

效果：

6.事件处理

6.1返回按钮事件

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(ToolBarActivity.this,"ToolBar",Toast.LENGTH_SHORT).show();
            }
        });

6.2菜单项点击事件

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.toolbar_menu_search:
                Toast.makeText(ToolBarActivity.this,"search",Toast.LENGTH_SHORT).show();
                break;
            case R.id.toolbar_menu_share:
                Toast.makeText(ToolBarActivity.this,"share",Toast.LENGTH_SHORT).show();
                break;
            case R.id.toolbar_menu_settings:
                Toast.makeText(ToolBarActivity.this,"settings",Toast.LENGTH_SHORT).show();
                break;
            default:
                    Toast.makeText(ToolBarActivity.this,"error",Toast.LENGTH_SHORT).show();

        }
        return true;
    }

三.高级

1.toolbar嵌套布局

Toolbar下面可以嵌套布局，直接将自己定义好的布局放到Toolbar下面即可

<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            ......
            </RelativeLayout>
    </android.support.v7.widget.Toolbar>

2.Toolbar 和 DrawerLayout 左滑菜单

更改原来的布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/toolbar_drawlayout"
    tools:context="my.test.ToolBarActivity">

    <!--DrawerLayout包含两个空=控件，第一个主界面，第二个侧滑菜单-->
    <!--toolbar一定要重新包含起来-->
    <!--主界面-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--app:navigationIcon="@drawable/toolbar_back" 左侧图标-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:logo="@drawable/toolbar_logo"
            app:title="大标题"
            app:titleTextColor="#e26b6b"
            app:subtitle="子标题"
            app:subtitleTextColor="#6decd5"
            app:popupTheme="@style/OverflowMenuStyle"
            app:titleTextAppearance="@style/ToolbarTitleSize"
            app:subtitleTextAppearance="@style/SubToolbarTitleSize">
        </android.support.v7.widget.Toolbar>
    </LinearLayout>

    <!--侧滑菜单-->
    <!--android:layout_gravity="start"指定方向-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#CCCCFF"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="选项一"
            android:textSize="18sp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="选项二"
            android:textSize="18sp"/>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

活动中添加;

final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.toolbar_drawlayout);

修改返回按钮事件：

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(ToolBarActivity.this,"ToolBar",Toast.LENGTH_SHORT).show();
                //显示菜单
                mDrawerLayout.openDrawer(GravityCompat.START);
                //关闭滑动菜单
                //mDrawerLayout.closeDrawers();
            }
        });

效果：

android Toolbar的简单使用

猜你喜欢