Android Toolbar

 │  更新│ 閱讀時長 ≈ 5 分鐘│ 本文字數 ≈ 752個字

Android 3.0 開始推出 ActionBar , 由於Google想要改善 Android 紛亂的介面設計 (設計的破碎化).

因此將 ActionBar 改為 Toorbar的設計 (界面上稱為 App Bar), 也取消了ActionBarActivity, 改為使用 AppCompatActivity.

Basic Design

Step 1: 新增style.xml

在 res/values/styles.xml 中新增風格 AppTheme.Toolbar.Base 並將原本的AppTheme所繼承的parent改為AppTheme.Toolbar.Base

由於主要是使用Toolbar, 所以先將ActionBar 隱藏起來, 設定windowActionBar = false

styles.xml
1
2
3
4
5
6
7
8
<resources>
    <style name="AppTheme" parent="AppTheme.Toolbar.Base"/>

    <style name="AppTheme.Toolbar.Base" parent="Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

Step 2: 新增toolbar

在layout中新增toolbar 並將內容設定為在ToolBar下方(目前內容只設定TextView)

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        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"
        tools:context="com.nickthomas55gmail.toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            />
            
    <TextView
            android:layout_below="@+id/toolbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"/>
</RelativeLayout>

Step 3: Toolbar 的宣告

在Activity中加入 Toolbar 的宣告, 再用 setSupportActionBar 設定，取代表原本的
ActionBar

MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

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

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

執行結果

顏色調配

Step 1: 設定風格

在 res/values/styles.xml 中設定風格顏色

clolorPrimary : 設定ActionBar 的背景顏色
colorPrimary : 設定StatusBar 背景顏色
android:windowBackground : 內容背景顏色

styles.xml
1
2
3
4
5
6
7
8
9
10
11
12
<resources>
    <style name="AppTheme" parent="AppTheme.Toolbar.Base"/>

    <style name="AppTheme.Toolbar.Base" parent="Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <item name="colorPrimary">@color/colorPrimary</item>  
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:windowBackground">@color/windowBackground</item>
    </style>
</resources>

Step 2: 設定navigationBar顏色 (only for SDK 21)

由於此設定只能在Android 5.0 (SDK 21) 以上使用，所以我們新增value資料夾values-v21並新增style.xml

內容如下

values-v21/styles.xml
1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Toolbar.Base">
        <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
    </style>
</resources>

Step 3: Toolbar背景顏色

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<RelativeLayout
        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"
        tools:context="com.nickthomas55gmail.toolbar.MainActivity">

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

    <TextView
            android:layout_below="@+id/toolbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"/>

</RelativeLayout>

執行結果

設置功能

設置Logo Icon, Navigation Icon, Title, Sub-Title

MainActivity.java
1
2
3
4
5
6
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.drawable.toolbar_color);
toolbar.setTitle("Title");
toolbar.setSubtitle("sub title");
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.toolbar_logo);

執行結果

設置Menu Component

在 res中新增資料夾ment並在資料夾中新增menu_main.xml

內容如下, 在此以Settings為例.

menu_main.xml
1
2
3
4
5
6
7
8
9
10
<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:title="@string/tool_setting"
          android:orderInCategory="100"
          app:showAsAction="never"/>
</menu>

在Activity中, Override onCreateOptionsMenu

MainActivity.java
1
2
3
4
5
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

Toolbar註冊 OnMenuItemClickListener

MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setLogo(R.drawable.toolbar_color);
    toolbar.setTitle("Title");
    toolbar.setSubtitle("sub title");
    setSupportActionBar(toolbar);
    toolbar.setNavigationIcon(R.drawable.toolbar_logo);
    toolbar.setOnMenuItemClickListener(onMenuItemClick);
}

private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
        //...
        return true;
    }
};

畫面結果請參照執行結果

新增Oher Component

在res/menu/menu_main.xml新增Share, Edit Components

menu_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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_edit"
          android:title="@string/tool_edit"
          android:orderInCategory="80"
          android:icon="@drawable/edit"
          app:showAsAction="ifRoom" />

    <item android:id="@+id/action_share"
          android:title="@string/tool_share"
          android:orderInCategory="90"
          android:icon="@drawable/share"
          app:showAsAction="ifRoom" />

    <item android:id="@+id/action_settings"
          android:title="@string/tool_setting"
          android:orderInCategory="100"
          app:showAsAction="never"/>
</menu>

執行結果

若要設定Edit, Share, Setting的操作, 在OnMenuItemClickListener中撰寫功能.

MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
        String msg = "";
        switch (menuItem.getItemId()) {
            case R.id.action_edit:
                msg += "Click edit";
                break;
            case R.id.action_share:
                msg += "Click share";
                break;
            case R.id.action_settings:
                msg += "Click setting";
                break;
        }

        if(!msg.equals("")) {
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }
        return true;
    }
};

Android Toolbar

https://nickcarter9.github.io/2016/05/27/2016/2016_05_27-android-toolbar/

作者

Nick Lin

發表於

2016-05-27

更新於

2024-06-21

許可協議

 

評論

追蹤

廣告

連結

×