CoordinatorLayout使用（四）：和Toolbar的简单使用

简单复习

这篇也就简单使用，和前面关系不大
就暂时不复习了
这篇可能有点啰嗦，并且只是使用，没有难度
熟悉的同学略过前面，或者整篇略过

Toolbar简介

Toolbar出来至少也有2年多了
主观任务，大体也就是material design中用来替代3.x的actionbar
在v7包中，需要gradle依赖一下
具体可以参考
鸿洋大神的博客

Toolbar简单前提条件

  • 在style中添加，隐藏原来的actionbar
    • 一般会写一个style，用的时候，继承它即可

<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>

- 写一些样式的颜色（具体含义看鸿洋的博客）
![](http://upload-images.jianshu.io/upload_images/2800913-f1e98e5c1285820a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  - 简单的参考  ，一般也会写一个style，用的时候，继承即可
  - ```
<!-- 导航栏 #4876FF    @color/material_2    -->
<item name="colorPrimary">#4876FF</item>
<!-- 任务栏 #3A5FCD    @color/material_3    -->
<item name="colorPrimaryDark">#3A5FCD</item>
<!-- 窗口的背景颜色    @android:color/white    @color/material_1  -->
<item name="android:windowBackground">@android:color/white</item>
<item name="colorAccent">@color/material_1</item>
<!-- 导航栏文字颜色    @android:color/black    @color/material_1  -->
<item name="android:textColorPrimary">@android:color/black</item>

Toolbar简单例子

建立一个项目以后，写一个Toolbar
这里只有一个Toolbar
对应的layout，很简单吧

<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="45dp"
        android:background="?attr/colorPrimary"
        android:minHeight="45dp">

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

在Activity中，设置一下
把Toolbar当成ActionBar
（当然可以设置标题，副标题，Logo，NavigationIcon等）
（也可以在xml中设置，这里略）

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

再关联对应的menu，显示在右上角

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_a0, menu);
    return true;
}

再设置点击事件

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.dodo1) {
        Toast.makeText(getApplicationContext(),"dodo1", Toast.LENGTH_SHORT).show();
        return true;
    }

    if (id == R.id.dodo2) {
        Toast.makeText(getApplicationContext(),"dodo2", Toast.LENGTH_SHORT).show();
        return true;
    }

    return super.onOptionsItemSelected(item);
}

整个Activity的代码为：

package com.aohuan.dodo.coordinator.doa0;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import com.aohuan.dodo.coordinator.R;


/**
 * Created by dodo_lihao on 2016/11/9.
 * qq: 2390183798
 *
 * 简单的ToolBar
 */
public class MainA0Activity extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_a0, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.dodo1) {
            Toast.makeText(getApplicationContext(),"dodo1", Toast.LENGTH_SHORT).show();
            return true;
        }

        if (id == R.id.dodo2) {
            Toast.makeText(getApplicationContext(),"dodo2", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

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/dodo1"
        android:title="dodo1"
        app:showAsAction="withText|ifRoom"/>
    <item android:id="@+id/dodo2"
        android:title="dodo2"
        android:orderInCategory="100"
        app:showAsAction="withText|ifRoom"/>
</menu>

大体意思，就是
显示text（如果有图片，文字和图片都会显示）
并且， 如果放得下就显示在右上角，如果放不下，就放在右上角的...中

这里效果大体为：


Toolbar简单例子2

这里也就给menu添加了图片
layout添加了可以滑动的TextView

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="always"
    android:fitsSystemWindows="true">

    <!--<android.support.design.widget.AppBarLayout-->
        <!--android:id="@+id/abl"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:theme="@style/AppTheme.AppBarOverlay">-->

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:navigationIcon="@drawable/ic_menu_back"
            app:subtitle="Sub Title"
            app:layout_scrollFlags="scroll|snap|enterAlways"/>

    <!--</android.support.design.widget.AppBarLayout>-->


    <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            style="@style/TextAppearance.AppCompat.Display3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_blue_bright"
            android:text="A\nB\nC\nD\nE\nF\nG\nH\nI\nJ\nK\nL\nM\nN\nO\nP\nQ\nR\nS\nT\nU\nV\nW\nX\nY\nZ\nW\nX\nY\nZ" />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

自己就不贴代码了
可以参考，文章末尾的代码地址文件
贴一下图


这里Toolbar会一直显示

Toolbar和NestedScrollView联动

前面不能联动，是因为没有接收的behavior
我们在Toolbar外面添加一个
android.support.design.widget.AppBarLayout

再给Toolbar添加一个
app:layout_scrollFlags="scroll|snap|enterAlways"

还有对应的android.support.v4.widget.NestedScrollView添加一个
app:layout_behavior="@string/appbar_scrolling_view_behavior"

对应的layout

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="always"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:navigationIcon="@drawable/ic_menu_back"
            app:subtitle="Sub Title"
            app:layout_scrollFlags="scroll|snap|enterAlways"/>

    </android.support.design.widget.AppBarLayout>


    <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            style="@style/TextAppearance.AppCompat.Display3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_blue_bright"
            android:text="A\nB\nC\nD\nE\nF\nG\nH\nI\nJ\nK\nL\nM\nN\nO\nP\nQ\nR\nS\nT\nU\nV\nW\nX\nY\nZ\nW\nX\nY\nZ" />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

这个时候，我们看一下效果

这里app:layout_scrollFlags有一些可以选择的
具体每种是干什么的？
下面一起来看一看

layout_scrollFlags了解

上面具体的例子，对应的滑动效果是由
app:layout_scrollFlags 来设置的
我们查阅一下，发现有5中可以选择的（其中snap是后面添加的）

  • scroll:
    • 代码中枚举SCROLL_FLAG_SCROLL
    • 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。
  • snap:
    • 代码中枚举SCROLL_FLAG_SNAP
    • 在滚动结束后，如果view只是部分可见，它将滑动到最近的边界。
  • enterAlways:
    • 代码中枚举SCROLL_FLAG_ENTER_ALWAYS
    • 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
  • enterAlwaysCollapsed:
    • 代码中枚举SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED
    • 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
  • exitUntilCollapsed:
    • 代码中枚举SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
    • 滚动退出屏幕，最后折叠在顶端。

这里，我们在代码中
用boolean值存储状态
再用下面的代码设置效果

private void setToolbarLayoutFlag(){
    AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();

    params.setScrollFlags(  (isScroll?AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL:0)
            | (isSnap?AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP:0)
            | (isEnterAlways?AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS:0)
            | (isEnterAlwaysCollapsed?AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED:0)
            | (isExitUntilCollapsed?AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED:0));
    toolbar.setLayoutParams(params);
}

再给Toolbar添加对应的设置，动态设置，看一下效果
（中间的TextView会显示当前设置的状态，看图的时候，可以观察设置）

  • scroll相关


    • 这里，如果设置scroll，也就是为true的时候，上面的Toolbar就会跟着滑动，并且会隐藏
    • 反之，不设置，也就是false，就不会隐藏，只会固定不动

  • snap相关（scroll条件下）


    • 设置snap必须是scroll为true的情况下，不然，不能动，也不会有效果
    • 设置snap也就是为true的时候，是判断后的弹性，它将滑动到最近的边界
    • 反之，不设置，也就是false，就不会自动滑动

  • enterAlways相关（scroll条件下）


    • 设置enterAlways也就是为true的时候，任意向下的滚动都会让view（Toolbar）变为可见
    • 反之，不设置，也就是false，就需要向下拉到底以后，才会显示view（Toolbar）

  • enterAlwaysCollapsed相关（scroll，enterAlways条件下）


    • 设置enterAlwaysCollapsed必须是scroll为true，enterAlways为true的情况下，不然，不会有效果
    • 设置enterAlwaysCollapsed也就是为true的时候，任意向下的滚动都会让view（Toolbar）变为minHeight的高度可见
    • 反之，不设置，也就是false，enterAlways的效果会全部显示

  • exitUntilCollapsed相关（scroll条件下）


    • 设置exitUntilCollapsed也就是为true的时候，任意向上的滚动都会让view（Toolbar）变为minHeight的高度可见，而不会全部消失
    • 反之，不设置，也就是false，会全部消失

中场小节

CoordinatorLayout中，
如果NestedScrollView要和Toolbar互动的话（CollapsingToolbarLayout等之后在了解，这里不涉及）
需要注意几点

  • 外面先要添加AppBarLayout来接收Behavior
  • 再要注意给NestedScrollView
    • 添加app:layout_behavior="@string/appbar_scrolling_view_behavior"
  • 还要注意Toolbar的 layout_scrollFlags属性

其他理解，上面已经描述
下面简单看一些例子
这里就只是把android studio默认创建的Activity
简单修改，得到一些例子

其他简单修改1（Tabbed Activity）

按照下面步骤可以创建项目



创建完以后，简单运行后，为：



这个时候，我们想做一个pending的TabLayout
滑动的时候，隐藏上面的Toolbar

于是，

  • AppBarLayout中，Toolbar下面，添加一个TabLayout
  • Toolbar添加app:layout_scrollFlags="scroll|enterAlways"
  • 给ViewPager添加
    • app:layout_behavior="@string/appbar_scrolling_view_behavior"
  • 再给Fragment中添加一点TextView
  • 在Activity中，绑定对应的TabLayout和ViewPager
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(vp);
for(int i=0; i<vp.getAdapter().getCount(); i++){
    tabLayout.getTabAt(i).setText(vp.getAdapter().getPageTitle(i));
}

因为是简单修改，就不贴细节了
我们看看效果

大体就这样了
代码见后面的地址

其他简单修改2（Scrolling Activity）

按照下面步骤可以创建项目



创建完以后，简单运行后，为：



这里和前面还不太一样，这里是CollapsingToolbarLayout
所以，我们简单在CollapsingToolbarLayout中，添加一个ImageView（自己从小学就比较崇拜的欧拉）

再运行一下，看看结果

大体就这样了
代码见后面的地址

其他简单修改3（Navigation Drawer Activity）

按照下面步骤可以创建项目



创建完以后，简单运行后，为：

a5.gif

这里也比较简单，

  • Toolbar添加app:layout_scrollFlags="scroll"
  • 主体NestedScrollView添加app:layout_behavior="@string/appbar_scrolling_view_behavior"
a5-2.gif

大体就这样了
代码见后面的地址

简单小节

CoordinatorLayout中，NestedScrollView和Toolbar联动

注意Toolbar外面要套AppBarLayout
注意给Toolbar添加app:layout_scrollFlags
注意给NestedScrollView添加
app:layout_behavior="@string/appbar_scrolling_view_behavior"

其他的内容，后续一起学习具体代码，可以见
https://github.com/2954722256/use_little_demo
对应 coordinator 的 Module

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

推荐阅读更多精彩内容