CoordinatorLayout+AppBarLayout实现联动

来源:互联网 发布:电脑网络驱动下载 编辑:程序博客网 时间:2024/05/14 12:39

CoordinatorLayout简介


CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
1.As a top-level application decor or chrome layout
2.As a container for a specific interaction with one or more child views

也就是作用就是作为顶层布局,调度协调子布局。
下面主要讲Col和AppbarLayout组合使用的方法:


一、AppBarLayout嵌套TabLayout+viewpager


这种组合是经常使用的,一般就是使toolbar能跟随viewpager里面的滑动状态实现联动,达到隐藏的目的,需要注意的是:

  1. CoordinatorLayout作为布局的父布局容器。
  2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
  3. 给滑动的组件设置app:layout_behavior属性

布局代码:


<?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="com.example.zhouyang.news_product.News_all">    <android.support.design.widget.AppBarLayout        android:id="@+id/appbar_layout"        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <TextView          app:layout_scrollFlags="scroll|enterAlways"            android:text="hello"            android:gravity="center"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize" />        <android.support.design.widget.TabLayout            app:tabMode="scrollable"            android:id="@+id/tablayout"            android:layout_width="match_parent"            android:layout_height="wrap_content">        </android.support.design.widget.TabLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v4.view.ViewPager       app:layout_behavior=       "@string/appbar_scrolling_view_behavior"        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="wrap_content">    </android.support.v4.view.ViewPager></android.support.design.widget.CoordinatorLayout>

app:layout_scrollFlags:在AppBarLayout中想要滑动的view里面设置这个属性
关于这个属性有以下可选择(可以组合使用):
1. scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,TabLayout 没有设置这个值,将会停留在屏幕顶部。
2.enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。
3.enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
4.exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。


CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。例如,示例中Viewpager设置了此属性:app:layout_behavior=”@string/appbar_scrolling_view_behavior


总结:
为了使得View有滑动效果,必须做到如下三点:
1. CoordinatorLayout作为布局的父布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性


二、AppBarLayout嵌套CollapsingToolbarLayout


CollapsingToolbarLayout可实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。


代码:

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="256dp">        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            app:contentScrim="@color/colorAccent"            >            <ImageView                app:layout_collapseParallaxMultiplier="0.5"                android:scaleType="centerCrop"                app:layout_collapseMode="parallax"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@mipmap/ic_launcher"/>            <android.support.v7.widget.Toolbar                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:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical"            android:paddingTop="24dp">        <TextView            android:text="helloooo"            android:layout_width="match_parent"            android:layout_height="200dp" />            <TextView                android:text="helloooo"                android:layout_width="match_parent"                android:layout_height="200dp" />            <TextView                android:text="helloooo"                android:layout_width="match_parent"                android:layout_height="200dp" />            <TextView                android:text="helloooo"                android:layout_width="match_parent"                android:layout_height="200dp" />            <TextView                android:text="helloooo"                android:layout_width="match_parent"                android:layout_height="200dp" />        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

d

阅读全文
0 0
原创粉丝点击