Android5.0之Toolbar詳解

AdrienneTie 7年前發布 | 29K 次閱讀安卓開發 Android開發移動開發

搜索Toolbar相關文章滿天飛，但是大都不是很全面，每次要用到的時候又要重頭過濾一遍。而且隨著版本升級很多較早的文章的方法已經失效，最近剛好好用到Toolbar，就將相關配置整理下，方便以后使用。

環境說明：

Android Studio 2.0
V7包版本：com.android.support:appcompat-v7:23.4.0
compileSdkVersion 23
buildToolsVersion "24.0.0"

Toolbar 引入使用

XML布局中加入：

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

主題改為隱藏ActionBar:

Theme.AppCompat.Light.NoActionBar

Activity代碼中加入：

setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

此時運行效果：

添加背景色

android:background="@color/colorPrimary"

此時運行效果：

基本屬性設置

<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="@mipmap/title_bar_back"http://左側圖標
    app:subtitle="子標題"
    app:subtitleTextColor="#fff" //標題顏色
    app:title="標題"
    app:titleTextColor="#fff"/> //子標題顏色

運行效果：

添加選項菜單

第一步創建菜單文件

<menu 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"
  tools:context=".MainActivity">
<item
    android:id="@+id/action_settings"
    android:icon="@mipmap/ic_launcher"
    android:orderInCategory="100"
    android:title="settings"
    app:showAsAction="never"/>
<item
    android:id="@+id/action_share"
    android:icon="@mipmap/ic_action_share"
    android:orderInCategory="100"
    android:title="settings"
    app:showAsAction="ifRoom"/>
<item
    android:id="@+id/action_search"
    android:icon="@mipmap/ic_action_search"
    android:orderInCategory="100"
    android:title="settings"
    app:showAsAction="ifRoom"/>
</menu>

第二部在代碼中重寫onCreateOptionsMenu方法加載菜單文件

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

此時效果：

個性設置

左側返回箭頭

想要顯示自帶的返回箭頭，需要去掉之前設定的屬性：

app:navigationIcon="@mipmap/title_bar_back"

然后在代碼中添加：

getSupportActionBar().setHomeButtonEnabled(true); //設置返回鍵可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

此時效果：

溢出圖標顏色

在style文件中添加：

<!-- 溢出菜單圖標顏色-->
<item name="colorControlNormal">@android:color/white</item>

此時效果：

自定義右側溢出圖標

在Style文件中添加：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!-- 溢出菜單圖標顏色-->
    <item name="colorControlNormal">@android:color/white</item>
    <!-- 溢出菜單圖標自定義-->
    <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
</style>

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

此時運行效果：

更改彈出菜單背景

在Style文件中添加樣式：

<!-- toolbar彈出菜單樣式背景 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
    <item name="android:colorBackground">#FFCC99</item>
</style>

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

app:popupTheme="@style/ToolbarPopupTheme"

此時運行效果：

更改彈出菜單文字顏色

添加樣式文件：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!-- 溢出菜單圖標顏色-->
    <item name="colorControlNormal">@android:color/white</item>
    <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
    <!-- 溢出菜單文字顏色-->
    <item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item>
</style>
<!--溢出菜單文字顏色-->
<style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
    <item name="android:textColor">#fff</item>
</style>

此時運行效果：

修改標題文字大小

添加配置：

app:titleTextAppearance="@style/ToolbarTitleSize"

添加style：

<!-- toolbar標題文字大小 -->
<style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">28sp</item>
</style>

此時運行效果：

子標題文字大小類似，添加配置然后定義style文件（此處省略）：

app:subtitleTextAppearance="@style/ToolbarTitleSize"

修改彈出菜單位置

修改配置使彈出菜單顯示在Toolbar下方：

首先重新設置屬性：（在界面布局文件Toolbar中）

app:popupTheme="@style/OverflowMenuStyle"

在Style文件中添加：

<style name="OverflowMenuStyle">
    <!-- 是否覆蓋錨點，默認為true，即蓋住Toolbar -->
    <item name="overlapAnchor">false</item>
    <item name="android:dropDownWidth">wrap_content</item>
    <item name="android:paddingRight">5dp</item>
    <!-- 彈出層背景顏色 -->
    <item name="android:colorBackground">#FFCC99</item>
    <!-- 彈出層垂直方向上的偏移，即在豎直方向上距離Toolbar的距離，值為負則會蓋住Toolbar -->
    <item name="android:dropDownVerticalOffset">5dp</item>
    <!-- 彈出層水平方向上的偏移，即距離屏幕左邊的距離，負值會導致右邊出現空隙 -->
    <item name="android:dropDownHorizontalOffset">0dp</item>
    <!-- 設置彈出菜單文字顏色 -->
    <item name="android:textColor">#0099CC</item>
</style>

此時運行效果：

事件處理

返回按鈕事件

添加監聽

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "點擊了返回箭頭", Toast.LENGTH_LONG).show();
        }
    });

菜單項點擊事件

重寫方法

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_settings:
            break;
        case R.id.action_search:
            break;
        case R.id.action_share:
            break;
    }
    return true;
}

自定義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>

Toolbar 和 DrawerLayout 左滑菜單

添加左滑布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_left"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--側滑菜單-->
<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>

在主布局文件中引入：（在Toolbar下方）

<!--DrawerLayout-->
<include layout="@layout/custom_drawerlayout"/>

在代碼中添加關聯：

DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_left);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close);
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);

此時運行效果：

新版本studio，在新建Activity的時候可以選擇對應的模板，會自動創建好DrawerLayout并關聯Toolbar.

來自：http://www.jianshu.com/p/e9130d31ee1f

本文由用戶 AdrienneTie 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1484918068393.html

安卓開發 Android開發移動開發

Android5.0之Toolbar詳解

Toolbar 引入使用

基本屬性設置

個性設置

左側返回箭頭

溢出圖標顏色

自定義右側溢出圖標

更改彈出菜單背景

更改彈出菜單文字顏色

修改標題文字大小

修改彈出菜單位置

事件處理

自定義Toolbar

Toolbar 和 DrawerLayout 左滑菜單

相關經驗

相關資訊

相關文檔

目錄