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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏何俊林

两步集成TV移动框架,从未如此简单

导读:TV相关的资料网上相对来说少点,我早期写了七篇TV相关的开发总结,有开源了一些Demo,在我的github上,今天是单灿灿同学独家在本公众平台发布他最新开...

4885
来自专栏Android干货园

Android自定义下拉刷新动画--仿百度外卖下拉刷新

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/51...

1363
来自专栏jianhuicode

学问Chat UI(1)

前言 由于项目需要,最近开始借鉴学习下开源的Android即时通信聊天UI框架,为此结合市面上加上本项目需求列了ChatUI要实现的基本功能与扩展功能。 ? 融...

2499
来自专栏郭霖

Android自定义View的实现方法,带你一步步深入了解View(四)

不知不觉中,带你一步步深入了解View系列的文章已经写到第四篇了,回顾一下,我们一共学习了LayoutInflater的原理分析、视图的绘制流程、视图的状态及重...

3029
来自专栏懒人开发

CoordinatorLayout使用(三):NestedScrollView & 嵌套滑动事件

上一篇,我们大体理解了 Behavior流程 和 事件流 具体代码可以见 https://github.com/2954722256/use_little_d...

1.9K4
来自专栏分享达人秀

ViewPager轻松完成TabHost效果

上一期学习了ViewPager的简单使用,本期一起来学习ViewPager的更多用法。 ? 相信很多同学都使用过今日头条APP吧,一打开主界面就...

3047
来自专栏积累沉淀

Java SWT事件

什么是事件?点击鼠标是一个事件,按下一个按钮也一个事件,关闭一个窗口也是一个事件。 什么是监听器?监听器就是监听事件什么时候发生的,用来控制事件发生的具体动...

2715
来自专栏androidBlog

你真的了解View的坐标吗?

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

822
来自专栏james大数据架构

Android网格视图(GridView)

GridView的一些属性: 1.android:numColumns=”auto_fit”   //GridView的列数设置为自动,也可以设置成2、3、4…...

2478
来自专栏Android小菜鸡

沉浸式状态栏的封装使用

  随着用户要求的不断提高,Android版本的不断升级,沉浸式状态栏似乎已经成为了每个App的必备功能。   首先要实现它我们得先理解他,状态栏不同于标题栏...

2601

扫码关注云+社区

领取腾讯云代金券