Toolbar继续深入

之前我们对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/

等等......

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,616评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,020评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,078评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,040评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,154评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,265评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,298评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,072评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,491评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,654评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,272评论 3赞 318
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2赞 351

推荐阅读更多精彩内容