Toolbar继续深入

作者: 朋朋彭哥 | 来源:发表于2018-01-21 21:37 被阅读0次

之前我们对Toolbar的使用还是比较基础的, 实际使用中, 开发人员创建了各种不同的导航栏样式, 大大增强了个性化的体现. 我们继续了解toolbar还能做出什么花样(个性化)来.

基础用法:

image.png

从继承关系可以看出，继承的是ViewGroup,也就是说Toolbar 是一个ViewGroup 容器. 容器里包含:

image.png

文档说得很清楚，一个Toolbar 从左到右包括了一个navigation button、一个logo、一个title和subtitle、一个或多个自定义的View和一个 action menu 这5部分。也就是这个ViewGroup 容器里面包含了这五部分内容，对应着一个界面看一下：

image.png

一般在使用toolbar的时候, 我们都喜欢设置style的形式来集中化创建它. 例子如下:

<!-- Toolbar相关主题 -->
<style name="MyToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="android:actionOverflowButtonStyle">@style/OverFlowIcon</item>
</style>

<!-- 溢出菜单的icon -->
<style name="OverFlowIcon" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_menu_white_24dp</item>
</style>

<!--设置溢出菜单样式 -->
<style name="OverFlowMenuTheme" parent="Widget.AppCompat.PopupMenu.Overflow">
    <!-- 设置Menu菜单的背景色 -->
    <item name="android:background">@android:color/white</item>
    <!-- 设置Menu菜单的字体颜色 -->
    <item name="android:textColor">@android:color/black</item>
    <item name="android:textSize">16sp</item>
    <!-- 设置Menu窗口不覆盖Toolbar视图 -->
    <item name="overlapAnchor">false</item>
</style>

<!--设置菜单Title的文本外观 -->
<style name="MyToolbarTheme.Title" parent="TextAppearance.AppCompat.Title">
    <item name="android:textSize">24sp</item>
    <item name="android:textColor">@android:color/white</item>
</style>

<!--设置菜单SubTitle的文本外观 -->
<style name="MyToolbarTheme.SubTitle" parent="TextAppearance.AppCompat.Title">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@android:color/white</item>
</style>

加载进布局来看看

 <?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.truly.coordinatorlayoutdemo.MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:navigationIcon="@drawable/ic_home_white_24dp"
        app:popupTheme="@style/OverFlowMenuTheme"
        app:theme="@style/MyToolbarTheme"
        app:title="Title"
        app:titleTextAppearance="@style/MyToolbarTheme.Title" />
</android.support.design.widget.CoordinatorLayout>

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

    initViews();
}

private Toolbar toolbar;
private void initViews() {
    toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

来看下效果:

image.png

标题居中:

标题居中是最常用的一种标题设置方式. 前面我们说过, Toolbar就是一个定制化的ViewGroup, 所以可以在Toolbar里面放置一个TextView控件作为居中的标题来使用, 再将Toolbar的Title隐藏起来即可实现.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_sec"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:background="?attr/colorPrimary">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity = "center"
        android:text="Center Title"
        style="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"/>

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

既然标题是用TextView来创建的, 那么可以给它赋予各类特性. 我们这里只是简单给它赋了一个style, 采用了系统提供的Toolbar Title TextAppearance.
效果如下:

image.png

Toolbar上添加搜索:

如果需要在Toolbar上添加搜索, 可以通过添加一个SearchView组件来实现.

我们可以通过给 app:actionLayout 属性指定一个布局资源, 或者给 app:actionViewClass 属性指定一个组件类来添加一个Action View.

为方便理解, 把布局先贴下. 只有一个Toolbar.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout ...>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_sec"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

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

创建一个menu, 名称为menu_search.xml, 其中search item下的 app:actionViewClass设定为..v7..SearchView.

 <?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="@drawable/ic_search_white_24dp"
        android:title="搜索"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />
</menu>

注意: item中app:actionViewClass属性的设定

我们需要在onCreateOptionsMenu()方法中配置action view. 通过menu.findItem(R.id.action_search).getActionView()方法获取到menuItem所指代的action view对象.

private Toolbar toolbar_sec;
private void init() {
    toolbar_sec = findViewById(R.id.toolbar_sec);
    setSupportActionBar(toolbar_sec);
    ActionBar actionBar = getSupportActionBar();
    if(actionBar !=null){
        actionBar.setDisplayHomeAsUpEnabled(true);
    }
}

    @Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_search, menu);
    SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
        public boolean onQueryTextSubmit(String query) {
            Toast.makeText(mContext, "搜索"+query, Toast.LENGTH_SHORT).show();
            return false;
        }

            @Override
        public boolean onQueryTextChange(String newText) {
            return false;
        }
    });
    return super.onCreateOptionsMenu(menu);
}

    @Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case android.R.id.home:
            onBackPressed();
            return true;
    }
    return super.onOptionsItemSelected(item);
}

来看下效果.

actionView_01.gif

Toolbar默认在右边显示Menu内容, 那如何将其设置在左边或中间显示呢? 这个时候就要用到

ActionMenuView

ActionMenuView是将原本位于Toolbar或者ActionBar中的Menu内容移到自己的名下, 以ViewGroup的姿态将一些列的Menu Item囊括其中, 再将自己搁置于Toolbar容器中. 这样更方便于管理和呈现Menu内容. 所以, 原本孤立的Toolbar控件, 就有了一个Child. 代码如下:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <android.support.v7.widget.ActionMenuView
        android:id="@+id/amv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

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

在Activity中, 先将ActionMenuView找到

private ActionMenuView mHomeAmv;
...
mHomeAmv = findViewById(R.id.amv);

将Menu资源文件加载到actionMenuView中:

    @Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_communications_type,mHomeAmv.getMenu());
    return super.onCreateOptionsMenu(menu);
}

监听ActionMenuView对象的点击事件, 将点击事件仍然转移到 onOptionsItemSelected()方法上.

mHomeAmv.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
        @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
        return onOptionsItemSelected(menuItem);
    }
});

同时把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_car"
        android:icon="@drawable/ic_directions_car_white_24dp"
        android:title="Car"
        app:showAsAction="always"/>
    <item android:id="@+id/action_bus"
        android:icon="@drawable/ic_directions_bus_white_24dp"
        android:title="Bus"
        app:showAsAction="always"/>
    <item android:id="@+id/action_walk"
        android:icon="@drawable/ic_directions_walk_white_24dp"
        android:title="Walk"
        app:showAsAction="always"/>
    <item android:id="@+id/action_bike"
        android:icon="@drawable/ic_directions_bike_white_24dp"
        android:title="Bicycle"
        app:showAsAction="always"/>
</menu>

效果如下:

colorfilter_01.gif

这里还有几个知识点:

Menu Item间距问题, Item默认的宽度是56dp, 可以利用style中的属性修改, 并将样式设置给Activity主题即可.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:actionButtonStyle">@style/MyActionButtonStyle</item>
</style>

<!--ActionMenuView 样式 -->
    <style name="MyActionButtonStyle" parent="Widget.AppCompat.ActionButton">
    <item name="android:minWidth">72dp</item>
    <item name="android:padding">0dp</item>
</style>

Menu Item图标高亮问题, 当然, 你可以使用两套图标, 在点击时修改图标资源. 但借助ColorFilter使用一套图标也能做到, 还能减少APK文件大小, 例如:

    @Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.action_car:
            ...
            break;    
        case R.id.action_bus:
            menuItemColorFilter(item,mHomeAmv.getMenu());
            break;
        case R.id.action_walk:
            ...
            break;
        case R.id.action_bike:
            break;
        }
    return super.onOptionsItemSelected(item);
}

private void menuItemColorFilter(MenuItem item, Menu menu) {
    for (int i = 0; i < menu.size(); i++) {
        menu.getItem(i).getIcon().setColorFilter(ContextCompat.getColor(this, 
            android.R.color.white), PorterDuff.Mode.SRC_IN);
    }
    item.getIcon().setColorFilter(ContextCompat.getColor(this,
        R.color.colorAccent), PorterDuff.Mode.MULTIPLY);

}

参考:

https://www.jianshu.com/p/e2ae6aaff696
http://yifeng.studio/2016/10/12/android-toolbar/

等等......

Toolbar继续深入

基础用法:

标题居中:

Toolbar上添加搜索:

ActionMenuView

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

MD