Android UI Material Design交互设计(二)--Toolbar的基本使用与样式修改

Android UI Material Design交互设计(一)–BottomNavigationView底部菜单
Android UI Material Design交互设计(二)–Toolbar的基本使用与样式修改
Android UI Material Design交互设计（三）–SnackBar 详解
Android UI Material Design交互设计（四）–AppBarLayout 与Toolbar结合
Android UI Material Design交互设计(五)–CollapsingToolbarLayout 折叠布局
Android UI Material Design交互设计(六)–CoordinatorLayout之精髓Behavior 自定义Behavior

Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件。作为替代ActionBar新的头部标题控件，他有什么优势呢: 更灵活的自定义属性

效果一：

实现一： 布局

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        app:navigationIcon="@drawable/icon_back"
        app:popupTheme="@style/OverflowMenuStyle"
        app:subtitleTextAppearance="@style/Theme.Toolbar.SubTitle"
        app:titleTextAppearance="@style/Theme.Toolbar.Title"/>

解释：设置属性宽高背景不提

1. app:navigationIcon="@drawable/icon_back" ：设置返回按钮键
2. app:popupTheme="@style/OverflowMenuStyle"： 设置弹出子菜单样式
3. app:subtitleTextAppearance="@style/Theme.Toolbar.SubTitle" ：设置副标题样式
4. app:titleTextAppearance="@style/Theme.Toolbar.Title"/>： 设置标题样式

其中OverflowMenuStyle代码如下：

<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="android:textSize">14sp</item>
        <!--&lt;!&ndash;设置menu菜单的背景色&ndash;&gt;-->
        <item name="android:itemBackground">@color/white</item>
        <!--&lt;!&ndash;设置Menu菜单的字体颜色&ndash;&gt;-->
        <item name="android:textColorPrimary">@android:color/black</item>
        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
    </style>

注：使用Toolbar时候必须在配置文件中设置样式为： Theme.AppCompat.Light.NoActionBar

Activity中如何使用：

@Override
    protected void onCreate( Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.net_music_list);
		toolbar = findViewById(R.id.toolbar);
        toolbar.setOverflowIcon(ContextCompat.getDrawable(this,R.drawable.more));
        toolbar.setTitle("歌单");
        setSupportActionBar(toolbar);
        ......

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_music,menu);

        if (menu != null){
            if (menu.getClass() == MenuBuilder.class){
                try{
                    Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible",Boolean.TYPE);
                    method.setAccessible(true);
                    method.invoke(menu,true);
                }catch (Exception e){
                    e.printStackTrace();
                }
            }
        }

        return true;
    }

可以看到onCreateOptionsMenu中有一段反射的代码是为了让，子菜单的图标显示出来

ToolBar返回按钮使用方法：

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

ToolBar其他菜单按钮设置监听的方法

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_icon:
                Toast.makeText(this, "search", Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_search:

                break;
            case R.id.action_notifications:

                break;
            case R.id.action_settings:

                break;
        }
        return super.onOptionsItemSelected(item);
    }

以上是ToolBar最普遍的使用方法。下一篇我们去使用ToolBar来实现更高难度的东西。