UI——Material Design設計之Toolbar詳解

Toolbar

它繼承了ActionBar的所有功能，而且靈活性很高。

使用Toolbar步驟：

1、取消自帶的ActionBar

使用Toolbar來代替ActionBar，需要指定一個不帶ActionBar的主題，通常有Theme.AppCompat.NoActionBar和Theme.AppCompat.Light.NoActionBar這兩種主題可選。前者表示

深色主題，它會將界面的主題顏色設成深色，陪襯顏色設成淡色；後者表示淡色主題 ，它會將界面的主題顏色設成淡色，陪襯顏色設成深色。

打開 res/value/styles.xml 文件，設置android:theme屬性，如下：

 <resources>

  <!-- Base application theme.  -->

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

    <!-- Customize your theme here. -->

    <item name="colorPrimary">@color/colorPrimaryDark</item>

    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="colorAccent"> @color/colorAccent</item>

  </style>

</resources>

上面重寫了AppTheme中的三個屬性,colorPrimary、colorPrimaryDark、colorAccent。除此之外，還有很多屬性，如下圖：

其中：colorAccent這個屬性比較難理解，它不只是用來指定一個按鈕的顏色，而是更多表達了一個強調的意思，比如一些控件的選中狀態也會使用colorAccent的顏色。

2、修改Activity_main.xml中的代碼，添加Toolbar控件。如下：

 
<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="?attr/actionBarSize"

            android:background="?attr/colorPrimary"

            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
          
 </FrameLayout>

上面第2行，使用xmlns:app指定了一個新的命名空間。這是由於Material Design是在Android 5.0系統中才出現的，而很多屬性在5.0之前的系統中並不存在，那麼爲了能夠兼容之前的老系統，我們就不能使用android:XXX這樣的寫法，而是應該使用app:XXX這樣的寫法。

接下來定義了一個Toolbar控件，是由V7庫提供，這裏指定高度爲actionBar的高度，背景色設置爲colorPrimary。由於我們剛纔在styles.xml中將程序的主題指定成了淡色主題，因此Toolbar現在也是淡色主題，而Toolbar上面的各種元素就會自動使用深色系，爲了和主體顏色區別。但是這樣看起來效果很差，爲了讓Toolbar單獨使用深色主題，這裏我們使用android:theme屬性，將Toolbar的主題指定成了

ThemeOverlay.AppCompat.Dark.ActionBar。但是這樣又會出現新的問題，如果ToolBar中有菜單按鈕，那麼彈出的菜單也會變成深色主題，於是這裏使用了app:popupTheme這個屬性是在Android 5.0系統中新增的，我們使用app:popupTheme的話就可以兼容Android 5.0以下的系統版本。

3、修改MainActivity 代碼，如下：

public class MainActivity extends AppCompatActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
                //獲取Toolbar實例
               Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
                //調用setSupportActionBar()方法將Toolbar實例傳入，就可以使用Toolbar
                //和ActionBar外觀、功能一致。
              setSupportActionBar(toolbar);
	}
}

現在就可以運行程序了!!!

接下來給Toolbar添加常用的功能：

1、修改標題欄上顯示的文字內容。在AndroidManifest.xml中指定，如下：

<activity
      android:name=".MainActivity"
      android:label="Fruits">
      ......
      </activity>

這裏給activity增加了一個android：label屬性，用於指定在Toolbar中顯示的文字內容，如果沒有指定的話，會默認使用application中指定的label內容，也就是我們的應用名稱。

2、可以再添加一些action按鈕

右擊res目錄——>New——>Directory，創建一個menu文件夾。然後再該目錄下創建toolbar.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/backup"
        android:icon="@drawable/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item 
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item 
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

使用android:title用於指定按鈕的文字，使用app:showAsAction來指定按鈕顯示的位置，之所以再次使用app命名空間，同樣是爲了能夠兼容低版本的系統。showAsAction主要有以下幾種值可選：always表示永遠顯示在Toolbar中，如果屏幕空間不夠則不顯示；ifRoom表示屏幕空間足夠的情況下顯示在Toolbar中，不夠的話就顯示在菜單當中；never則表示永遠顯示在菜單當中。

注意：Toolbar中的action按鈕只會顯示圖標，菜單中的action按鈕只會顯示文字。

接下來，修改MainActivity中的代碼，如下所示：

public class MainActivity extends AppCompatActivity {
	....
	//1、在onCreateOptionMenu()方法中，加載toolbar.xml這個菜單文件
	@Override
	public boolean onCreateOptionMenu(Menu menu){
		getMenuInflater().inflate(R.menu.toolbar.menu);
		return true;
	}
	//2、在onOptionsItemSelected()方法中，處理各個按鈕的點擊事件
	@Override
	public boolean onOptionsItemSelected(MenuItem item){
		switch (item.getItemId()) {
		case R.id.backup:
			Toast.makeText(this, "You clicked Backup", Toast.LENGTH_SHORT).show();
			break;
		case R.id.delete:
			Toast.makeText(this, "You clicked Delete", Toast.LENGTH_SHORT).show();
			break;
		case R.id.settings:
			Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show();
			break;
		default:
			break;
		}
		return true;
	}
}

Toolbar的圖標、標題設置

我們借用下面這張圖，上面的導航按鈕、logo、主標題、副標題以及菜單按鈕等，我們都可以在設置，XML可以設置，代碼裏面一樣可以設置：

設置這些屬性也是比較簡單，我們先看佈局

<LinearLayout 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:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@android:color/holo_green_light"
        app:title="hello">
        <!--自定義控件-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="測試"
            android:textSize="20sp"
            android:textColor="@android:color/white"/>
    </android.support.v7.widget.Toolbar>
</LinearLayout>

然後在activity中設置相關屬性既可以，默認的ToolBar的背景色是colorPrimary,但是在實際使用的過程中背景主題色會改變我們的顏色，黑色的字體和圖標看起來是非常不符合我們的亮色的Toolbar背景色的，我們可以自由定製的，修改字體顏色還有按鈕顏色，修改字體顏色在下面已經貼出來了，而修改按鈕顏色我們可以在主題中指定即可

<item name="colorControlNormal">#ffffff</item>

然後給出修改字體顏色的屬性

<style name="Theme.ToolBar.Base.Title" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@android:color/white</item>
    </style>
    <style name="Theme.ToolBar.Base.Subtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

 
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.toolbar_layout);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        //設置Logog
        toolbar.setLogo(R.mipmap.ic_launcher);
        //設置主標題
        toolbar.setTitle("Title");
        //設置主標題顏色
        toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
        //修改主標題的顏色、外觀
        toolbar.setTitleTextAppearance(this, R.style.Theme_ToolBar_Base_Title);
        //設置副標題
        toolbar.setSubtitle("Subtitle");
        //設置副標題顏色
        toolbar.setSubtitleTextColor(getResources().getColor(android.R.color.white));
        //修改副標題的顏色、外觀
        toolbar.setSubtitleTextAppearance(this,R.style.Theme_ToolBar_Base_Subtitle);
        //設置導航菜單
        toolbar.setNavigationIcon(R.drawable.ic_drawer_home);
        //對NavigationIcon添加點擊
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
        //設置菜單彈出樣式的文本顏色和背景
        toolbar.setPopupTheme(R.style.PopupMenu);
        //設置菜單
        toolbar.inflateMenu(R.menu.menu_main);
        //設置菜單及其點擊監聽
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.search:

                        break;

                    case R.id.notification:

                        break;
                }
                return true;
            }
        });
    }

接着在menu_main裏面添加我們的action menu菜單項

<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="com.lhtb.toolbar.MainActivity">
    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        android:title="@string/menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/notification"
        android:icon="@drawable/ic_notifications"
        android:title="@string/menu_notifications"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_item1"
        android:title="@string/item_01"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_item2"
        android:title="@string/item_02"
        app:showAsAction="never" />
</menu>

關於菜單文件這個顯示位置有幾個屬性我簡單提一下：
1.ifRoom：只要在app bar存在可用空間，就可以顯示，可以通過orderInCategory設置優先級，具有最低的值將被顯示爲操作，其餘顯示在溢出菜單。

2.withText：這個看字面意思就能明白就是和圖標顯示文字，一般和ifRoom一起通過“|”使用，但是你發現設置了豎屏看不到，要橫屏才能看到。

3.never：這個就是一直顯示在溢出菜單裏面，沒什麼好說的

4.always：始終把這個放到項目中app bar。但是谷歌建議避免這麼使用，除非它非常關鍵，使它始終顯示在操作欄。設置多個始終顯示在app bar可能會導致它們在應用欄其他UI重疊。

5.collapseActionView：這個一般也和ifRoom連用，就是把控件摺疊到一個按鈕中，使用searchView應該選擇該屬性。

如果OptionMenu中需顯示到ActionBar的菜單項過多，則可能因寬度不再，無法全部顯示，默認情況下會在最右側顯示由3個小點組成的按鈕，點擊該按鈕將可以彈出未能直接顯示的菜單項，該位置通常稱之爲Overflow Menu即：溢出的菜單。

想更多瞭解Menu的屬性，建議在官方文檔查閱：谷歌官方文檔

設置完成過後你就會發現是下面這個樣子，基本上完全可以符合我們的大部分場景，我們可以自由的去使用它。

由於toolbar只是一個普通控件，我們將ToolBar設置爲ActionBar，這樣一設置後他就能像ActionBar一樣直接顯示menu目錄中的菜單資源，如果不用該方法，那ToolBar就只是一個普通的View，對menu要用inflateMenu去加載佈局。

我們還可以給它加上一個返回按鈕，我們必須先讓它取代ActionBar纔可以：

        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

設置它的監聽事件：

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

我們想修改彈出菜單文件的顏色和背景以及顯示位置怎麼辦呢，我們可以做如下設置：

    toolbar.setPopupTheme(R.style.PopupMenu);

     <style name="PopupMenu" parent="ThemeOverlay.AppCompat.Light" >
        <item name="android:colorBackground">@color/colorAccent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="overlapAnchor">false</item>
    </style>

現在看看是不是改變了，將overlapAnchor屬性設置成false就可以在下方顯示：

當然我們在代碼裏面設置的很多東西在XML裏面也可以設置，看你喜好了，只不過有的東西設置要用toolbar的設置纔有效，在根佈局中加入自定義屬性的命名空間即可，自定義佈局的開發者一定很熟悉了，toolbar這個是可以隨便命名的：

xmlns:toolbar="http://schemas.android.com/apk/res-auto"

UI——Material Design設計之Toolbar詳解

Toolbar

Toolbar的圖標、標題設置

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

java由於越界導致的報錯

UI——Material Design設計之Toolbar詳解

Android知識雜燴總結（一）

UI——Material Design設計之滑動菜單詳解

Android開發前奏（一）

MySql數據庫命令操作詳解

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結