自学“CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout”心得体会,及详细介绍
来源:互联网 发布:阿里云备案照片大小 编辑:程序博客网 时间:2024/06/15 16:08
惯例:先上图后说话,谢谢各位伙伴的支持! 有你们是我的福分!
效果:
欢迎一起讨论和学习,QQ:732258496 微信:15520726587
温馨提示:CoordinatorLayout作为根布局,为了配合老控件使用 只需要在老布局外面包裹一层新的继承自framelayout的的布局就行了。比如NestedScrollView。这样就可以完美实现嵌套滑动,实现各种效果了。
一、CoordinatorLayout介绍:
基本两个功能:
1、作为顶层布局
2、调度协调子布局
功能详细描述:
1.CoordinatorLayout要和AppBarLayout等配合使用。
2.CoordinatorLayout继承自viewgrop,AppBarLayout继承自linerlayout,有orientation等属性。CollapsingToolbarLayout和NestedScrollView继承自framlayout,布局都从左上去开始,多个子布局会重叠。
3.CoordinatorLayout的直接子布局加了这个属性app:layout_behavior="@string/appbar_scrolling_view_behavior"新控件才会嵌套滑动。
4.加了app:layout_scrollFlags="scroll|exitUntilCollapsed"表示会随着一起滑,不加表示会固定在头部。属性里面有多中模式。
5.除了新控件,和recycleview外其它的都不能嵌套滑动,有2中情况,第一种如上图代码布局,把listview放入新控件里面。可以把NestedScrollView这种新控件直接当成framelayout,第二种情况,外面一层是viewpager里面是recyclerview,也能实现嵌套滑动。因为作为CoordinatorLayout的子布局,不管是直接子布局还是子子布局都必须得有一个是能嵌套滑动的,因为新控件实现了NestedScrollingParent,NestedScrollingChild, ScrollingView等关于嵌套滑动的接口,所以新控件能实现嵌套滑动。
6.CollapsingToolbarLayout有个属性app:contentScrim="?attr/colorPrimary",这里的属性就是设置toolbar的背景的。可以选择#fff等,直接在toolbar里面设置背景并不能实现动画过度效果。
7.toolbar使用如下,需要先设置主题我noactionbar,下面包括设置标题,设置箭头,设置箭头的点击事件等。
Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar);setSupportActionBar(toolbar);CollapsingToolbarLayout appBarLayout= (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);appBarLayout.setTitle("标题");ActionBar actionBar = getSupportActionBar();if (actionBar != null) { actionBar.setDisplayHomeAsUpEnabled(true); toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { CoordinatorLayoutText002.this.finish(); } });}8.复制一点关于属性的说明
app:contentScrim="#30469b"//设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
app:expandedTitleMarginStart="48dp"//设置扩张时候(还没有收缩时)title向左填充的距离。
app:layout_scrollFlags="scroll|exitUntilCollapsed"//向上滚动时收缩View,但可以固定Toolbar一直在上面。
app:layout_collapseMode="parallax"//设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
app:layout_collapseParallaxMultiplier="0.7"//设置视差滚动因子,值为:0~1。
app:layout_collapseMode="pin"//pin设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
我们在CollapsingToolbarLayout中设置了一个ImageView和一个Toolbar。并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。
scroll - 想滚动就必须设置这个。
enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。
exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
二.使用步骤
(温馨提示:如果视图没有及时显示出来,可重新编译,clean,rebuild)
1.添加引用
compile 'com.android.support:appcompat-v7:23.4.0'compile 'com.android.support:design:23.4.0'
2.配置文件<activity android:name=".activity.personCenter.PersonCenterOwnInfoActivity" android:theme="@style/Theme.AppCompat.Light.NoActionBar" android:screenOrientation="portrait" />3.xml文件
<?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" android:theme="@style/TransparentTheme" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="200dp" android:fitsSystemWindows="true" android:theme="@style/TransparentTheme"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="wrap_content" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="24dp" app:expandedTitleMarginStart="24dp" app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Large" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/news_detail_photo_iv" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/stat_hall_back" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:transitionName="transition_animation_news_photos" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" tools:targetApi="lollipop" /> <View android:id="@+id/mask_view" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/mask_news_detail_photo" android:fitsSystemWindows="true" tools:visibility="visible" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:navigationIcon="@drawable/back" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include layout="@layout/activity_employee_info_item" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:gravity="center" android:orientation="vertical"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/civ_update_profile_avatar" android:layout_width="@dimen/size_level12" android:layout_height="@dimen/size_level12" android:background="@android:color/transparent" android:clickable="true" android:onClick="goToCamera" tools:src="@drawable/default_head_round" /> <TextView android:id="@+id/tv_qianming" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" android:clickable="true" android:drawableLeft="@drawable/daily_bar_edit" android:gravity="bottom" android:hint="编辑个性签名" android:maxLength="20" android:padding="5dp" android:textSize="16sp" /> </LinearLayout></android.support.design.widget.CoordinatorLayout>
- 自学“CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout”心得体会,及详细介绍
- CollapsingToolbarLayout / AppBarLayout / CoordinatorLayout / FloatingActionB
- 初涉CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout
- CoordinatorLayout&AppBarLayout&CollapsingToolbarLayout组合
- AppBarLayout、CoordinatorLayout、CollapsingToolbarLayout、NestedScrollView
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar
- CoordinatorLayout、AppBarLayout、 Toolbar、CollapsingToolbarLayout、NestedScrollView 综合使用,详细解析
- 【MaterialDesign】TabLayout,CollapsingToolbarLayout,AppBarLayout,CoordinatorLayout
- Android MD: CoordinatorLayout AppBarLayout CollapsingToolbarLayout
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout全解析
- CoordinatorLayout,CollapsingToolbarLayout,AppBarLayout简单使用
- CoordinatorLayout、AppBarLayout与CollapsingToolbarLayout运用
- CoordinatorLayout的AppBarLayout和CollapsingToolbarLayout
- AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用
- CoordinatorLayout、AppBarLayout、TableLayout、CollapsingToolbarLayout、NestedScrollView的使用
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar用法小结
- Material Design学习:CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
- 发现新大陆啦 CoordinatorLayout AppBarLayout CollapsingToolBarLayout
- 算法导论第十四章思考题14-1详解-求最大重叠点
- sap*被锁定及basis事务码
- 记录下px、pt、ppi、dpi、dp、sp之间的关系
- 文件上传模板
- ubuntu14.04 创建 android-studio 快捷启动方式
- 自学“CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout”心得体会,及详细介绍
- 配置docker远程连接
- jquery获取select选中索引
- 大数据系列修炼-Scala课程101
- 让页面滑动流畅得飞起的新特性:Passive Event Listeners
- 大数据系列修炼-Scala课程102
- 大数据系列修炼-Scala课程103
- nodejs入门
- 关于使用友盟第三方平台集成第三方分享