做网站好的框架,做商城网站哪家好,wordpress流媒体,上海松江 网站建设公司作为Material Design风格的重要组件,CoordinatorLayout协调多种组件的联动#xff0c;实现各种复杂的效果#xff0c;在实际项目中扮演着越来越重要的角色。本篇博客将由浅到深#xff0c;带你一起玩转CoordinatorLayout。 官方文档对CoordinatorLayout是这样描述的#xf… 作为Material Design风格的重要组件,CoordinatorLayout协调多种组件的联动实现各种复杂的效果在实际项目中扮演着越来越重要的角色。本篇博客将由浅到深带你一起玩转CoordinatorLayout。 官方文档对CoordinatorLayout是这样描述的 CoordinatorLayout是一个加强版的FrameLayout本质是一个ViewGroup主要有两个用途 1.用作应用的顶层布局管理器作为界面其他控件的父容器 2.用作相互之间有特定交互行为的控件的父容器 通过为CoordinatorLayout的子View指定不同的Behavior(默认的Behavior或自定义的Behavior)就可以实现它们之间许多复杂的交互行为例如侧滑移动滑动等。Behavior在后面会详谈最后我们再来瞅一眼源码 public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent {} 先来了解一下NestedScrolling—Android嵌套滑动机制用来完成复杂的滑动效果。要完成这样的交互父View需要实现 NestedScrollingParent 接口,而子View需要实现 NestedScrollingChild 接口。CoordinatorLayout其实是NestedScrollingParent的实现类也就意味着它的子View一定会实现NestedScrollingChild接口这样一起协同完成复杂的滑动交互。 介绍工作就到这里接下来通过三个例子一起学习CoordinatorLayout(协调布局)。 一.CoordinatorLayout与AppBarLayout 官方文档中对AppBarLayout是这样描述的AppBarLayout是一个垂直的LinearLayout只有作为CoordinatorLayout的直接子View时才能正常工作可以通过设置layout_scrollFlags属性或setScrollFlags()方法让AppBarLayout的子View具有“滚动行为”。我们先来看一个例子再来分析这段描述。 列表向上滑动布局收缩列表向下滑动布局向下展开到一定高度待列表完全向下滑动到起始位置布局再次向下展开。看看怎么实现的 布局代码 ?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalandroid.support.design.widget.CoordinatorLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid.support.design.widget.AppBarLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentLinearLayoutandroid:layout_widthmatch_parentandroid:layout_height100dpandroid:backgroundcolor/colorPrimaryandroid:minHeight50dpapp:layout_scrollFlagsscroll|enterAlways|enterAlwaysCollapsed/LinearLayoutandroid.support.v7.widget.Toolbarandroid:idid/toolbarandroid:layout_widthmatch_parentandroid:layout_heightwrap_content/android.support.v7.widget.Toolbar/android.support.design.widget.AppBarLayoutandroid.support.v7.widget.RecyclerViewandroid:idid/recyclerandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:layout_behaviorstring/appbar_scrolling_view_behavior/android.support.v7.widget.RecyclerView/android.support.design.widget.CoordinatorLayout/LinearLayoutCoordinatorLayout中AppBarLayout与RecyclerView竖直排列AppBarLayout中LinearLayout与Toolbar竖直排列。AppBarLayout的官方文档告诉我们通过设置layout_scrollFlags属性可以让子View具有滑动行为。结合布局文件可以看到我们给LinearLayout设置了三个属性都代表什么意思呢 scroll设成这个值的效果就是该View和scrolling view形成一个整体示例中我们滑动RecyclerView时LinearLayout也会响应滑动。有一点特别需要我们的注意为了其他的滚动行为生效必须同时指定scroll和其他标记。 exitUntilCollapsed设成这个值的效果就是该View离开屏幕时会被折叠到最小高度。该View已完全折叠后再向下滚动scrolling view直到scrolling view顶部的内容完全显示后该View才会开始向下滚动以显现出来。 enterAlways设成这个值的效果就是当scrolling view向下滚动时该View会一起跟着向下滚动示例图中有所体现。 enterAlwaysCollapsed设成这个值的效果就是当我们开始向下滚动scrolling view时该View会一起跟着滚动直到达到其最小高度。然后当scrolling view滚动至顶部内容完全显示后再向下滚动scrolling view该View会继续滚动到完全显示出来。示例图中有所体现。 篇幅有限这里就不多做演示了大家可以自己试试组合成不同的效果。 通过分析CoordinatorLayout我们知道它的子View一定会实现NestedScrollingChild接口这样一起完成复杂的滑动交互我们看到布局中有一个RecyclerView,先瞅一眼源码 public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild {} BingoRecyclerView其实就是NestedScrollingChild的实现类这也就解释了嵌套滑动的实现。这里如果使用NestedScrollView然后在里面嵌套一个布局也是可以的。最后我们还为RecyclerView设置了这样一个属性 app:layout_behaviorstring/appbar_scrolling_view_behavior 这是因为CoordinatorLayout包含的子视图中带有滚动属性的View必须设置app:layout_behavior属性设置的这个属性到底是什么呢 android.support.design.widget.AppBarLayout$ScrollingViewBehavior原来是AppBarLayout自带一个Behivior直接在源码里注解声明的这个Behivior也只能用于AppBarLayout作用是让他根据CoordinatorLayout上的手势进行一些效果(比如收缩滚动)。关于CoordinatorLayout与Behivior工作原理我们后面再谈。 二.CoordinatorLayout与CollapsingToolbarLayout CollapsingToolbarLayout(折叠布局)继承至FrameLayout通过给它设置layout_scrollFlags它以控制子View响应layout_behavior事件并作出相应的变化(移除屏幕或固定在屏幕顶端)。我们看一个例子 很常见也很好看的一个界面看看布局代码 ?xml version1.0 encodingutf-8?
android.support.design.widget.CoordinatorLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid.support.design.widget.AppBarLayoutandroid:layout_widthmatch_parentandroid:layout_height250dpandroid.support.design.widget.CollapsingToolbarLayoutandroid:idid/collapsing_toolbarandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:contentScrim?attr/colorPrimaryapp:expandedTitleMarginEnd60dpapp:expandedTitleMarginStart50dpapp:layout_scrollFlagsscroll|exitUntilCollapsedImageViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:scaleTypefitXYandroid:srcdrawable/bgapp:layout_collapseModeparallaxapp:layout_collapseParallaxMultiplier0.7 /android.support.v7.widget.Toolbarandroid:idid/toolbarandroid:layout_widthmatch_parentandroid:layout_height?attr/actionBarSizeapp:layout_collapseModepin //android.support.design.widget.CollapsingToolbarLayout/android.support.design.widget.AppBarLayoutandroid.support.v7.widget.RecyclerViewandroid:idid/recyclerandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:layout_behaviorstring/appbar_scrolling_view_behavior //android.support.design.widget.CoordinatorLayout 结合代码我们看看CollapsingToolbarLayout的使用方法 1.AppBarLayout与Toolbar的高度一定要设置具体值这是最后展开与固定的值 2.CollapsingToolbarLayout的属性设置layout_scrollFlags一定是必不可少的属性值上文提过这里不再重复了contentScrim设置CollapsingToolbarLayout折叠后的背景颜色expandedTitleMarginStart 设置没有收缩时title向左填充的距离expandedTitleMarginEnd设置收缩结束时title向左填充的距离 3.ImageView的属性设置layout_collapseMode (折叠模式)一定是必不可少的一共有两种模式。pin设置为这个模式时当CollapsingToolbarLayout完全收缩后Toolbar还可以保留在屏幕上parallax设置为这个模式时在内容滚动时CollapsingToolbarLayout中的View比如ImageView)也可以同时滚动实现视差滚动效果通常和视差因子搭配使用layout_collapseParallaxMultiplier设置视差滚动因子值为0~1值越大视察越大。 4.CollapsingToolbarLayout的折叠、展开状态监听: CollapsingToolbarLayout是通过实现AppBarLayout的OnOffsetChangedListener接口根据AppBarLayout的偏移来实现子View视差移动和显示。通过调用AppBarLayout的addOnOffsetChangedListener方法监听AppBarLayout的位移从而判断CollapsingToolbarLayout的状态。 三.CoordinatorLayout与Behavior 前面提到CoordinatorLayout的子View之间许多复杂的交互行为是通过指定Behavior实现的。那么实现原理是什么我们看个例子 TextView的位置会随着Button的改变而改变并且显示当前的坐标。其实Behavior的原理就是观察者模式的应用被观察者就是事件源dependency观察者就是做出改变的child。具体看看怎么实现的 public class FollowBehavior extends CoordinatorLayout.BehaviorTextView {public FollowBehavior(Context context, AttributeSet attrs) {super(context, attrs);}Overridepublic boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {return dependency instanceof Button;}Overridepublic boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {child.setX(dependency.getX() 200);child.setY(dependency.getY() 200);child.setText(观察者: dependency.getX() , dependency.getY());return true;}
} 1.自定义一个FollowBehavior继承自Behavior泛型就是child的类型也就是观察者View 2.重写构造函数,因为CoordinatorLayout源码中会通过反射调用这个构造函数 3.重写layoutDependsOn()用来确定本次交互行为中的dependent view在上面的代码中当dependency是Button类的实例时返回true就可以让系统知道布局文件中的Button就是本次交互行为中的被观察者。 4.重写onDependentViewChanged当dependent view发生变化时这个方法会被调用参数中的child相当于本次交互行为中的观察者观察者可以在这个方法中对被观察者的变化做出响应从而完成一次交互行为。 代码布局中的应用 ?xml version1.0 encodingutf-8?
android.support.design.widget.CoordinatorLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentTextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentapp:layout_behavior.FollowBehavior /Buttonandroid:idid/btnandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:text被观察者 //android.support.design.widget.CoordinatorLayoutbtn.setOnTouchListener(new View.OnTouchListener() {Overridepublic boolean onTouch(View v, MotionEvent event) {if (event.getAction() MotionEvent.ACTION_MOVE) {v.setX(event.getRawX() - v.getWidth() / 2);v.setY(event.getRawY() - v.getHeight() / 2 - getStatusBarHeight(getApplicationContext()));}return true;}});xml布局文件中只需指定 app:layout_behavior“你的Behavior包含包名的类名” CoordinatorLayout就会反射生成你的Behavior这样自定义的Behavior就能工作了。在Activity代码中添加OnTouchListener获取触摸点坐标这里竖直方向上减去了状态栏的高度。 既然熟悉了Behavior的原理这里我在之前的例子上升级了一下。先看效果图 折叠布局中加了一个圆形头像并且圆形头像的大小位置会随着列表上下滑动而改变。没有美工设计交互是自己瞎想的大家凑合看看。重点是掌握自定义Behavior。 这里的圆形ImageView就是我们的观察者给它指定Behavior从而响应手势事件。谁是被观察者呢这里我选择的是AppBarLayout因为上文提到过可以通过AppBarLayout的addOnOffsetChangedListener方法监听AppBarLayout的位移从而判断CollapsingToolbarLayout的状态。既然能够获取到这个位移那就可以让观察者对被观察者的位移变化做出响应。看看具体实现 public class FollowBehavior extends CoordinatorLayout.BehaviorImageView {private int width, height, top, left;public FollowBehavior(Context context, AttributeSet attrs) {super(context, attrs);}Overridepublic boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) {return dependency instanceof AppBarLayout;}Overridepublic boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) {if (dependency.getY() 0) {width child.getWidth();height child.getHeight();top child.getTop();left child.getLeft();}float percent Math.abs(dependency.getY()) / SixActivity.scrollRange;float yPercent (float) (percent * 0.85);child.setY(top * (1 - yPercent));child.setX(left 300 * percent);CoordinatorLayout.LayoutParams layoutParams (CoordinatorLayout.LayoutParams) child.getLayoutParams();layoutParams.width (int) (width * (1 - percent * 3 / 4));layoutParams.height (int) (height * (1 - percent * 3 / 4));child.setLayoutParams(layoutParams);return true;}
} 具体分析一下onDependentViewChanged这个方法AppBarLayout的折叠范围scrollRange是通过 appBarLayout.getTotalScrollRange()获取到的这里我设置成了静态常量当AppBarLayout完全展开没有折叠时获取到ImageView的基本属性当AppBarLayout状态改变时同时改变ImageView的坐标与大小达到示例效果。使用时很简单直接在CoordinatorLayout的XML布局加上即可。 de.hdodenhof.circleimageview.CircleImageViewandroid:idid/imgandroid:layout_width100dpandroid:layout_height100dpandroid:layout_gravitycenterandroid:layout_marginTop-340dpandroid:srcdrawable/headapp:layout_behavior.FollowBehavior / 关于CoordinatorLayout的用法到这里差不多也就结束了希望能对你有所帮助如有不足与错误的地方随时向我提问我会认真采纳。项目源码已经同步上传到我的github上欢迎star,fork,提issues一起进步 https://github.com/18722527635/AndroidArtStudy
