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里面的滑动状态实现联动,达到隐藏的目的,需要注意的是:
- CoordinatorLayout作为布局的父布局容器。
- 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
- 给滑动的组件设置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
- CoordinatorLayout+AppBarLayout实现联动
- CoorDinatorLayout+AppBarLayout+TabLayout实现界面
- CoordinatorLayout + AppBarLayout 实现标题栏置顶
- CoordinatorLayout + AppBarLayout 实现标题栏置顶
- CoordinatorLayout + AppBarLayout实现滑动隐藏ToolBar
- AppBarLayout与CoordinatorLayout实现toobar各种效果
- CoordinatorLayout AppbarLayout CollapsingToolbarLayout 实现顶部栏
- Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
- Material Design 之 CoordinatorLayout + AppBarLayout 实现上滑隐藏ToolBar
- Android Design风格实现可折叠页面CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
- Android Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏
- Android CoordinatorLayout+AppBarLayout实现toolbar背景渐变透明
- CoordinatorLayout、AppBarLayout实现上滑隐藏图片,下滑显示图片
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现app的折叠效果
- Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
- CollapsingToolbarLayout配合CoordinatorLayout、AppBarLayout,RecyclerView实现伸缩布局
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现渐变透明的状态栏
- Android CoordinatorLayout + AppBarLayout
- 面试问题为什么spring boot 产生于spring4
- 【HTML5学习笔记】30:CSS3边框图片效果
- 【启发】leetcode
- Git & Gitlab 使用指南
- 子div撑不开父div
- CoordinatorLayout+AppBarLayout实现联动
- JDBC_MySQL纯手工连接池的创建
- [译] OpenStack Pike 版本中的 53 个新功能盘点
- [Leetcode] 22, 37, 79
- 我是怎么招聘程序员的
- css nth-child(n)和nth-of-type(n)区别
- 关于home键后,App重走冷启动页的处理
- linux中启动tomcat权限不足permission denied
- 面试问题redis有哪些集群方案