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的提示
这里写图片描述

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