美文网首页
安卓ToolBar的使用方法

安卓ToolBar的使用方法

作者: 梦沉薇露 | 来源:发表于2016-04-07 23:35 被阅读0次

    一、ToolBar简介

    Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件,以此来取代之前的Actionbar 。我们需要在工程中引入appcompat-v7的兼容包以便向下兼容, 使用android.support.v7.widget.Toolbar进行开发。在设计 Toolbar 的时候,Google也留给了开发者很多可定制修改的余地,这些可定制修改的属性在API文档中都有详细介绍,如:

    • 设置导航栏图标
    • 设置App的logo
    • 支持设置标题和子标题
    • 支持添加一个或多个的自定义控件
    • 支持Action Menu

    二、ToolBar使用方法

    首先,在布局文件 activity_main.xml 中添加进我们需要的 Toolbar 控件

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        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:background="@color/color_0176da">
    
            <!--自定义控件-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Clock" />
        </android.support.v7.widget.Toolbar>
    </LinearLayout>
    

    接下来我们在res/menu下添加新建一个base_toolbar_menu.xml并添加 action menu 菜单项

    <?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/action_search"
            android:icon="@mipmap/ic_search"
            android:title="@string/menu_search"
            app:showAsAction="ifRoom" />
    
        <item
            android:id="@id/action_notification"
            android:icon="@mipmap/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>
    

    最后到 MainActivity 中调用代码拿到这 Toolbar 控件,并在代码中做各种setXXX操作。

    /**
     * Toolbar的基本使用
     */
    public class MainActivity extends BaseActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    
            toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
            toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
            toolbar.setTitle("Title");//设置主标题
            toolbar.setSubtitle("Subtitle");//设置子标题
    
            toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    int menuItemId = item.getItemId();
                    if (menuItemId == R.id.action_search) {
                        Toast.makeText(ToolBarActivity.this , R.string.menu_search , Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_notification) {
                        Toast.makeText(ToolBarActivity.this , R.string.menu_notifications , Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_item1) {
                        Toast.makeText(ToolBarActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_item2) {
                        Toast.makeText(ToolBarActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show();
    
                    }
                    return true;
                }
            });
    
        }
    
    }
    

    完成以上基本可以了,还要注意一些小细节:

    1. 如果我们的MainActivity是继承 AppCompatActivity 则可以直接在BaseActivity中调用supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默认的导航栏,如果MainActivity是继承Activity就应该用requestWindowFeature(Window.FEATURE_NO_TITLE)

    2. 如果你想修改标题和子标题的字体大小、颜色等,可以调用 setTitleTextColorsetTitleTextAppearancesetSubtitleTextColorsetSubtitleTextAppearance 这些API;

    3. 自定义的View位于 title 、 subtitle 和 actionmenu 之间,这意味着,如果 title 和 subtitle 都在,且 actionmenu选项 太多的时候,留给自定义View的空间就越小;

    如果你不想在代码中设置标题、子标题之类的属性,而是在xml中实现的话你就必须加上下面这段代码:

    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    toolbar:logo="@mipmap/ic_launcher"
    toolbar:subtitle="456"
    toolbar:title="123"
    

    完整布局代码如下

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:toolbar="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:background="@color/color_0176da"
            toolbar:navigationIcon="@mipmap/ic_drawer_home"
            toolbar:logo="@mipmap/ic_launcher"
            toolbar:subtitle="456"
            toolbar:title="123">
    
            <!--自定义控件-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Clock" />
        </android.support.v7.widget.Toolbar>
    </LinearLayout>
    

    效果如下:


    如果你还想改变子菜单中字体的颜色和大小你就必须在styles.xml中自定义一个Theme:

    <style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textSize">20sp</item>
        <item name="android:textColorPrimary" >@color/color_red</item>
    </style>
    

    在布局文件的Toolbar中设置popupTheme:

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/color_0176da"
            toolbar:popupTheme="@style/Theme.ToolBar.Base">
    
            <!--自定义控件-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Clock" />
        </android.support.v7.widget.Toolbar>
    

    最后效果如图:


    http://www.codeceo.com/article/android-toolbar-develop.html

    相关文章

      网友评论

          本文标题:安卓ToolBar的使用方法

          本文链接:https://www.haomeiwen.com/subject/fqhvlttx.html