Android 使用Toolbar製作標題欄-design

Toolbar是Android5.0的時候推出的,爲了向下兼容,我們使用的時候應該引入support.v7的包,並使用裏面的android.support.v7.widget.Toolbar

效果圖
這裏寫圖片描述
佈局文件

<?xml version="1.0" encoding="utf-8"?>
<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/tb_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimaryDark"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:navigationIcon="@android:drawable/ic_dialog_email"
        app:logo="@android:drawable/ic_dialog_alert"
        app:subtitle="subtitle"
        app:title="Title">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tv"/>

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

</LinearLayout>

這裏的xmlns:app=”http://schemas.android.com/apk/res-auto”相信做過自定義控件的同學應該都熟悉了,加入自定義屬性的命名空間
如果在設置Toolbar時使用的是android:title、android:subtitle等用“android:xxx”開頭來設置屬性,會發現不起作用,因爲我們使用的是v7包裏的Toolbar,而不是android系統的控件,所以需要加上自定義的命名空間。

一般我們只使用navigationIcon和title進行搭配,logo和title搭配並不美觀,logo和title搭配它們之間的間距太小了

這些屬性也可以通過setNavigationIcon、setLogo、setTitle等方法在代碼中進行設置

Toolbar的菜單佈局文件menu_toolbar

<?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/menu_one"
        android:icon="@android:drawable/ic_media_rew"
        android:title="One"
        app:showAsAction="never"/>
    <item
        android:id="@+id/menu_two"
        android:icon="@android:drawable/ic_media_play"
        android:title="Two"
        app:showAsAction="never"/>
    <item
        android:id="@+id/menu_three"
        android:icon="@android:drawable/ic_media_ff"
        android:title="Three"
        app:showAsAction="never"/>
</menu>

這裏因爲要使用到showAsAction屬性,所以也要引入自定義命名空間

主要代碼

/**
 * Toolbar使用
 * Created by zhuwentao on 2016-08-17.
 */
public class ToolbarActivity extends AppCompatActivity {

    /** 標題欄 */
    private Toolbar mToolbarTb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 去除系統默認標題欄
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_toolbar);
        initUI();
        initListener();
    }

    /**
     * 初始化佈局
     */
    private void initUI() {
        mToolbarTb = (Toolbar) findViewById(R.id.tb_toolbar);
        // 設置右邊的菜單
        mToolbarTb.inflateMenu(R.menu.menu_toolbar);
    }

    /**
     * 初始化監聽
     */
    private void initListener() {

        // 菜單點擊事件監聽
        mToolbarTb.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_one:
                        Toast.makeText(ToolbarActivity.this, "點擊One", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_two:
                        Toast.makeText(ToolbarActivity.this, "點擊Two", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_three:
                        Toast.makeText(ToolbarActivity.this, "點擊Three", Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });

        // 設置導航圖片監聽
        mToolbarTb.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ToolbarActivity.this, "點擊Navigation", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

(1)讓右邊的菜單顯示出來
這裏寫圖片描述
想實現這樣的效果只需要設置菜單佈局的showAsAction屬性爲always,

<?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/menu_one"
        android:icon="@android:drawable/ic_media_rew"
        android:title="One"
        app:showAsAction="always"/>
    <item
        android:id="@+id/menu_two"
        android:icon="@android:drawable/ic_media_play"
        android:title="Two"
        app:showAsAction="always"/>
    <item
        android:id="@+id/menu_three"
        android:icon="@android:drawable/ic_media_ff"
        android:title="Three"
        app:showAsAction="never"/>
</menu>

不過官方建議我們最好是設置爲isRoom,來看看官方的介紹

If your menu item supplies both a title and an icon—with the title and icon attributes—then the action item shows only the icon by default. If you want to display the text title, add “withText” to the showAsAction attribute. For example:

< item yourapp:showAsAction=”ifRoom|withText” … />
Note: The “withText” value is a hint to the action bar that the text title should appear. The action bar will show the title when possible, but might not if an icon is available and the action bar is constrained for space.

You should always define the title for each item even if you don’t declare that the title appear with the action item, for the following reasons:
If there’s not enough room in the action bar for the action item, the menu item appears in the overflow where only the title appears.

Screen readers for sight-impaired users read the menu item’s title.

If the action item appears with only the icon, a user can long-press the item to reveal a tool-tip that displays the action title.

The icon is optional, but recommended. For icon design recommendations, see the Iconography design guide. You can also download a set of standard action bar icons (such as for Search or Discard) from the Downloads page.

You can also use “always” to declare that an item always appear as an action button. However, you should not force an item to appear in the action bar this way. Doing so can create layout problems on devices with a narrow screen. It’s best to instead use “ifRoom” to request that an item appear in the action bar, but allow the system to move it into the overflow when there’s not enough room. However, it might be necessary to use this value if the item includes an action view that cannot be collapsed and must always be visible to provide access to a critical feature.

never:當前菜單項不顯示在Toolbar中
alaways:當前菜單項會一直顯示在Toolbar中
ifRoom:當Toolbar中有足夠的空間時,纔會顯示在Toolbar上
withText:讓菜單項的icon和Text一起顯示

使用ifRoom屬性的好處在於,當Toolbar上已經沒有多餘空間顯示菜單項時,會自動幫我們把菜單項隱藏在最右邊的按鈕裏,這樣就避免了佈局混亂

實際使用中,單獨設置withText並沒有發現什麼不同,需要設置爲showAsAction=”ifRoom|withText”,實際上withText只相當於一個hint,當我們給item設置了icon時,默認只會顯示icon,在空間足夠條件允許的情況下或許會兩個都顯示

當我們設置了icon和title的時候,默認只會顯示icon,但最好還是兩個都加上,畢竟我們長按時還是可以顯示title的提示
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章