Toolbar-標(biāo)題欄

前言

本篇文章，盡可能地總結(jié) Toolbar 的知識(shí)點(diǎn)和用法，

正文

一、概述

  • Toolbar 是 Android 5.0 之后被谷歌放出來的，是為了替代之前的 ActionBar ，

  • Toolbar 不僅繼承了 ActionBar 的所有功能，而且靈活性很高，可以配合其他控件來實(shí)現(xiàn)一些 Meterial Design 效果。

二、使用

1. 新建一個(gè)項(xiàng)目，看 styles.xml
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

  • 系統(tǒng)默認(rèn)使用主題 ： Theme.AppCompat.Light.DarkActionBar

  • 我們之前所有的項(xiàng)目中 自帶的 ActionBar 就是因?yàn)橹付诉@個(gè)主題才出現(xiàn)的。

2. 修改主題
1.首先要指定一個(gè)不帶 ActionBar 的主題：

  • Theme.AppCompat.Light.NoActionBar 背景為淺色的主題

  • Theme.AppCompat.NoActionBar 背景為深色的主題

  • 本人喜歡淺色主題，如下所示：

    <style name="AppTheme2" 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>
    </style>
2. 主題中各個(gè)屬性的含義：
  • colorPrimary 標(biāo)題欄的顏色
  • colorPrimaryDark 狀態(tài)欄的顏色
  • colorAccent 指定一個(gè)按鈕的顏色，某些控件的選中狀態(tài)也會(huì)選擇這個(gè)顏色
3. 代碼中簡單使用
1. 在主 Activity 的布局文件中修改如下：
<?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"
   >

   <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@color/colorPrimaryDark"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       >
   </android.support.v7.widget.Toolbar>


</FrameLayout>
2. Acticity 中的代碼如下：
package io.github.adsuper.meterialtext;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }
}
  • 這里必須使用 findViewById ，我試過 ButterKnife ，效果顯示不出來
image
3. 實(shí)現(xiàn)效果與 ActionBar 一樣，但是這是 toolbar
4. 添加標(biāo)題、子標(biāo)題、右側(cè) menu 、左側(cè)導(dǎo)航欄圖標(biāo)、logo
1. 添加標(biāo)題、子標(biāo)題、、左側(cè)導(dǎo)航欄圖標(biāo)、logo
  • 在 Activity 中進(jìn)行設(shè)置，如下所示：
public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("title");//設(shè)置標(biāo)題
        toolbar.setSubtitle("suntitle");//設(shè)置子標(biāo)題

        toolbar.setLogo(R.mipmap.ic_launcher);//設(shè)置logo
        setSupportActionBar(toolbar);
        //設(shè)置導(dǎo)航欄圖標(biāo)要在 setSupportActionBar 之后
        toolbar.setNavigationIcon(R.drawable.back6);

    }
image
2. 設(shè)置右側(cè) menu 菜單
  • 第一步：右鍵點(diǎn)擊 res 文件夾，創(chuàng)建 Menu resource file ，命名為 toolbar.xml，內(nèi)容如下所示：
<?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/set1"
        android:icon="@drawable/setting"
        android:title="11111"
        app:showAsAction="always"></item>
    <item
        android:id="@+id/set2"
        android:icon="@drawable/setting"
        android:title="22222"
        app:showAsAction="ifRoom"></item>
    <item
        android:id="@+id/set3"
        android:icon="@drawable/setting"
        android:title="33333"
        app:showAsAction="never"></item>


</menu>

其中，always 表示總是顯示在標(biāo)題欄，ifRoom 表示控件足夠的話顯示在標(biāo)題欄 ，never 表示不顯示在標(biāo)題欄

  • 第二步：重寫 Activity 中的 onCreateOptionsMenu 方法，填充布局：
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.toolbar,menu);
        return  true;
    }
  • 第三步：重寫 Activity 中的 onOptionsItemSelected 方法，響應(yīng) menu 菜單的點(diǎn)擊事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {
            case R.id.set1:
                Toast.makeText(getApplicationContext(),"set1",Toast.LENGTH_SHORT).show();
                break;
            case R.id.set2:
                Toast.makeText(getApplicationContext(),"set2",Toast.LENGTH_SHORT).show();
                break;
            case R.id.set3:
                Toast.makeText(getApplicationContext(),"set3",Toast.LENGTH_SHORT).show();
                break;
            case android.R.id.home:
                Toast.makeText(getApplicationContext(),"左側(cè)導(dǎo)航欄圖標(biāo)",Toast.LENGTH_SHORT).show();
                break;
        }


        return true;
    }

其中：android.R.id.home 是左側(cè)導(dǎo)航欄圖標(biāo)的 id

  • 第四步：運(yùn)行結(jié)果如下：
image

由于第三個(gè)圖標(biāo)設(shè)置的是 never 所以沒有顯示出來 ，點(diǎn)擊最右側(cè)的如表之后，顯示如下：

image

其中，顯示 33333 是因?yàn)?item 中的這條屬性：android:title="33333"

三、擴(kuò)展

1. 最后側(cè)的按鈕點(diǎn)擊之后顯示出來的 item ，將其放在 toolbar 下方

在 styles.xml 中添加以下代碼：

   <!--無標(biāo)題欄***淺色背景主題-->
    <style name="AppTheme2" 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>
        <!--修改 popup menu 的位置，使其位于 Toolbar 的下方-->
        <item name="actionOverflowMenuStyle">@style/MenuStyle</item>

    </style>
    
    <style name="MenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--把該屬性改為fals-->
    </style>

其中，AppTheme2 是我們自己用的主題，添加的代碼看注釋即可

運(yùn)行效果如下所示：

image
2. 標(biāo)題居中樣式：
  • 由于 Toolbar 繼承于 ViewGroup ，所以可以在其內(nèi)部放入一個(gè) TextView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <!--自定義控件-->
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:gravity="center"
            android:textStyle="bold"
            android:text="自定義標(biāo)題"
            android:textSize="30dp" />


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


</RelativeLayout>
  • 在 Activity 中設(shè)置 toolbar.setTitle("");
public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setTitle("");

        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.drawable.back6);

    }
  • 效果如下：
image
3. 左側(cè)顯示 menu 菜單

左側(cè)顯示 menu 主要是使用 android.support.v7.widget.ActionMenuView

  • 第一步：布局文件設(shè)置如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">
    <!--android:paddingTop="25dp" 是狀態(tài)欄的高度，-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:minHeight="?attr/actionBarSize"
        android:paddingTop="25dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <!--加入 ActionMenuView-->
        <android.support.v7.widget.ActionMenuView
            android:id="@+id/action_menu_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <!--自定義控件-->
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:gravity="center"
            android:textStyle="bold"
            android:text="自定義標(biāo)題"
            android:textSize="20dp" />


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


</RelativeLayout>
  • 第二步：在 menu 菜單中 創(chuàng)建一個(gè)文件用于填充左側(cè) menu ，命名為：toolbar_left_menu.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/left_text_btn"
        android:title=""
        app:actionLayout="@layout/menu_left_text"
        app:showAsAction="always"/>

</menu>

其中，app:actionLayout 屬性表示新建一個(gè) style 布局，填充這個(gè) item ，主要作用是設(shè)置這個(gè) item 的個(gè)性， @layout/menu_left_text 如下所示：

<?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="match_parent">

    <TextView
        android:id="@+id/textview"
        android:text="關(guān)閉"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:textColor="@color/colorAccent"

        />

</RelativeLayout>
  • 第三步，Activity 中的操作：
public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        
        ActionMenuView actionMenuView = (ActionMenuView) toolbar.findViewById(R.id.action_menu_view);
        //填充 menu 布局
        getMenuInflater().inflate(R.menu.toolbar_left_menu, actionMenuView.getMenu());
        //設(shè)置 item 的點(diǎn)擊事件(沒有填充布局的 item )
        actionMenuView.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
//                Toast.makeText(getApplicationContext(),"關(guān)閉",Toast.LENGTH_SHORT).show();
                return true;
            }
        });
        // 找到 id 找到對(duì)應(yīng)的 item
        MenuItem menuItem = actionMenuView.getMenu().findItem(R.id.left_text_btn);
        //設(shè)置 對(duì)應(yīng) item 填充布局的點(diǎn)擊事件
        menuItem.getActionView().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"關(guān)閉",Toast.LENGTH_SHORT).show();
            }
        });

        toolbar.setTitle("");

        setSupportActionBar(toolbar);

    }

  • 運(yùn)行效果如下所示：


    image

點(diǎn)擊關(guān)閉按鈕會(huì)響應(yīng)對(duì)應(yīng)的 toast

4. Toolbar 之狀態(tài)欄適配方案

詳情參考：帥比張

  • Android 5.0 之前的版本，狀態(tài)欄是黑色的，之后的狀態(tài)欄是半透明的
1. 在使用的主題文件下添加如下代碼：(要求 API 大于等于 19)
<!--設(shè)置狀態(tài)欄為透明的-->
<item name="android:windowTranslucentStatus">true</item>

或者在 activity 中添加如下代碼

//設(shè)置透明狀態(tài)欄
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

但是在代碼里聲明更有效！

2. 在 Toolbar 中添加這么一條屬性
//因?yàn)闋顟B(tài)欄的高度是 25dp
android:paddingTop="25dp"

  • 在 API 19 上顯示為：


    image

  • 在 API 21 上顯示為：


    image
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在開發(fā)中經(jīng)常需要使用到標(biāo)題欄，很多時(shí)候我們會(huì)自自定義一個(gè)標(biāo)題欄，因?yàn)樽远x標(biāo)題欄基本上就只需要使用個(gè)Relativ...
    剩下的只有自己閱讀 2,062評(píng)論 0贊 2
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,954評(píng)論 25贊 709
  • ￥開啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程，因...
    小菜c閱讀 7,322評(píng)論 0贊 17
  • 水霧朦朧 風(fēng)爽靈動(dòng) 河水朗朗 雨燕低行 一支絨花輕捻來 一顆青松立心懷 一陣清風(fēng)擦身過 一池清泉蕩漾開 如此美景盡...
    舍得_之間閱讀 405評(píng)論 6贊 8
  • 今天三姨家的弟弟過來玩，晚上上好課已經(jīng)七點(diǎn)多了，緊忙的去吃晚飯。不知道是家里做的飯菜沒味道還是外面的飯比較香，媳婦...
    秋景001閱讀 226評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容