CoordinatorLayout ＋ AppBarLayout + ToolBar

最新推荐文章于 2024-03-05 13:28:01 发布

weixin_34014555

最新推荐文章于 2024-03-05 13:28:01 发布

阅读量70

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/wangxnn/blog/604145

版权

2019独角兽企业重金招聘Python工程师标准>>>

主要参考了 http://blog.csdn.net/leejizhou/article/details/50533020, 然后做了一个自己的例子

首先是引入sdk

compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'

其实这一部份主要是布局上操作, 代码没有什么内容

需求一 页面有scroll内容时, toolbar 在上滑时隐藏,下滑时显示,详情见注释部分

<?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"
    android:fitsSystemWindows="true"
    tools:context="cn.feezu.coordinatordemo.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">  <!-- 用不用这个Theme影响不大-->
        <!--为了能够让Toolbar响应滚动事件需要在Toolbar外面放AppBarLayout的布局容器-->
        <!-- AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，
        就可以在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView滚动事件发生的时候会被触发-->
        <!-- Toolbar中的app:layout_scrollFlags属性里面必须至少启用scroll，
        这样Toolbar才会滚动出屏幕，否则它将一直固定在顶部。-->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways">
            <TextView
                android:textSize="22sp"
                android:text="title"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <!-- 定义AppBarLayout与滚动视图之间的联系-->
    <!-- 在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。
    Android design support library包含了一个字符串资源@string/appbar_scrolling_view_behavior，
    这个是官方定义好的，我们直接拿来用就OK了，它和AppBarLayout.ScrollingViewBehavior相匹配，
    当这个滚动的View发生滚动事件时候，CoordinatorLayout会搜索自己所包含的其他view，
    看看是否有view与这个behavior相关联，所以NestedScrollView滚动的时候会触发AppBarLayout-->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:text="@string/textString"
                android:textSize="20sp"/>

            <Button
                android:id="@+id/btn"
                android:text="click me"
                android:textSize="16sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

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

总结下:

1. 根布局控件必须是CoordinatorLayout,最好设置属性android:fitsSystemWindows="true"

2. toolbar外层要放置一个AppBarLayout,

3. toolbar要设置一个属性app:layout_scrollFlags="scroll|enterAlways",

这个属性是最为AppBarLayout的子控件存在的属性,设置为scroll才能不固定.

4. 在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加 app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,这样才能和AppBarLayout联动

需求二视差滚动和toolbar切换显示

直接看布局文件以及注释:

<?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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        app:theme="@style/ThemeOverlay.AppCompat.Dark">

        <!--
        CollapsingToolbarLayout的2个重要属性:
             layout_scrollFlags=”scroll|exitUntilCollapsed”：向上滚动时收缩View，
             但可以固定Toolbar，使Toolbar一直在上面
             contentScrim： 当CollapsingToolbarLayout折叠后背景颜色-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- CollapsingToolbarLayout子view，ImageView属性
                layout_collapseMode=”parallax”：使ImageView跟随滚动的时候具有视差效果
                layout_collapseParallaxMultiplier=”0.1”：视差因子，设置视差滚动因子，值为：0~1-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitStart"
                android:src="@drawable/p"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1"/>

            <!--为了使Toolbar具有折叠的效果，Toolbar外面还要放一个CollapsingToolbarLayout布局容器，
            CollapsingToolbarLayout里面放了一个ImageView和一个Toolbar，
            并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。-->

            <!-- CollapsingToolbarLayout子view，Toolbar属性
                layout_collapseMode=”pin”：当CollapsingToolbarLayout完全收缩后，
                Toolbar还可以保留在屏幕上。-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_gravity="bottom"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

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

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

        <TextView
            android:textSize="20sp"
            android:text="@string/textString"
            android:layout_margin="9dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


    </android.support.v4.widget.NestedScrollView>

    <!-- 锚点在AppBarLayout上,视差图片隐藏时也隐藏 -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16sp"
        android:src="@android:drawable/btn_star"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

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

总结下:

1. 根布局控件必须是CoordinatorLayout,最好设置属性android:fitsSystemWindows="true"

2. AppBarLayout包含CollapsingToolbarLayout布局,CollapsingToolbarLayout需要指定属性

app:layout_scrollFlags="scroll|exitUntilCollapsed" // 向上滚动时收缩View

app:contentScrim="?attr/colorPrimary" //这个指定折叠后的背景色

3. CollapsingToolbarLayout 下包含视差图片的ImageView以及ToolBar 2个子控件

4 .最为CollapsingToolbarLayout的视察图片的控件ImageView需要2个属性:

app:layout_collapseMode="parallax"

app:layout_collapseParallaxMultiplier="0.1"

5.最为和视察图片交互,ToolBar需要指定属性

app:layout_collapseMode="pin"

6. 主要的带scroll属性的控件,比如NestedScrollView或者ScrollView, 需要指定属性: