CoordinatorLayout使用总结


CoordinatorLayout 实现了多种Material Design中提到的滚动效果

概况

CoordinatorLayout协调布局之间的动画。
  • [x] AppBarLayout必须是CoordinatorLayout的直接子View。不使用actionbar而是使用toolbar,注意更改theme为noactionbar。
  • [x] 定义AppBarLayout与滚动视图之间的联系。在RecyclerView或者任意支持嵌套滚动的view添加app:layout_behavior。一个特殊的字符串资源@string/appbar_scrolling_view_behavior,它和AppBarLayout.ScrollingViewBehavior相匹配,用来通知AppBarLayout这个特殊的view何时发生了滚动事件,这个behavior需要设置在触发事件(滚动)的view之上。

1、自定义的Behavior

CoordinatorLayout中的一个抽象类。

public abstract static class Behavior {
      public Behavior() {
      }

      public Behavior(Context context, AttributeSet attrs) {
      }
}

注意:构造函数一定要重载(xml中根据),泛型一般View即可

在自定义Behavior的时候,我们需要关心的两组四个方法,为什么分为两组呢?看一下下面两种情况:
1、某个view监听另一个view的状态变化,例如大小、位置、显示状态等
2、某个view监听CoordinatorLayout里的滑动状态
对于第一种情况,我们关心的是:
layoutDependsOn和onDependentViewChanged方法,
对于第二种情况,我们关心的是:
onStartNestedScroll和onNestedPreScroll方法。

1、layoutDependsOn决定了关心谁 onDependentViewChanged决定了怎样的做出变化

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof TextView;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        int offset=dependency.getTop()-child.getTop();
        ViewCompat.offsetTopAndBottom(child,offset);
        return true;
    }

效果:让一个textview跟随另一个textview 移动
2、

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes& ViewCompat.SCROLL_AXIS_VERTICAL)!=0;
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
        int leftScrolled=target.getScrollY();
        Log.e(TAG,"滑动距离"+leftScrolled);
        child.setScrollY(leftScrolled);
    }

    @Override
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY, boolean consumed) {
        ((NestedScrollView)child).fling((int) velocityY);
        return true;
    }

onStartNestedScroll 中表示垂直滑动 fling表示手指停下时继续滚动
效果:让一个scrollvew 跟随另一个scrollview 移动

2、悬浮式toolbar



    
        
    
    



效果:

悬浮toolbar.gif

app:layout_scrollFlags属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。可以使用的其他flag有:
enterAlways: 一旦向上滚动这个view就可见。
enterAlwaysCollapsed: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。
exitUntilCollapsed: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。

其中的 > app:layout_behavior="@string/appbar_scrolling_view_behavior"是可以没有的(那为啥还要加上?)

延伸一下 利用自定义的behavior再加一个底部栏:



    

        
        
    
    
    
        
        
    


其中behavior:

public class FooterBehaviorDependAppBar extends CoordinatorLayout.Behavior {
    private String TAG="FooterBehaviorDependAppBar";
    public FooterBehaviorDependAppBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
         return dependency instanceof AppBarLayout;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.abs(dependency.getTop());
        child.setTranslationY(translationY);
        return true;
    }
}

效果:

device-2016-11-24-123059.gif

3、CollapsingToolbarLayout和Toolbar



    
        

            

            
            

            
                
                
            
        
    
    


CollapsingToolbarLayout的设置使得toolbar出现拉伸的效果
CollapsingToolbarLayout:

 
          ...

contentScrim:渐变成的颜色
collapsedTitleGravity:折叠时题目的gravity
expandedTitleGravity:伸展时的gravity

整个题目变化的动画的起止状态都是在这里设置的,和toolbar没有关系,但是toolbar会造成一些影响:

1、

           
               
                   
               
           

此时是没有题目显示的,整个CollapsingToolbarLayout只显示toolbar,因为toolbar的子view match_parent 题目是无法显示的所以是没有title的动画变化的

2、

app:contentInsetStart="0dp"

需要加上,否则CollapsingToolbarLayout中的折叠时的题目总会和左边有间距

3、

app:layout_collapseMode="pin"

默认时toolbar 随着collapse的压缩被挤出去了,如图所示toolbar的位置一直在假toolbar的位置上只不过没有显示而已。
如果加上app:layout_collapseMode="pin" toolbar不会有任何移动一直在最上方。由于toolbar是看不见的界面上没有任何区别,但是当更新collapse中的view时(view的位置恰好和toolbar重叠)此时collaps的title便会消失掉了!!!所以不要加pin或parallax。

title会消失的demo


所以有时为了产品需求,写一个空的toolbar 使得标题可以看到title动画变化 同时在collapse中加入相应的icon。

device-2016-11-29-200026.gif

这里多注意title的参数设置,折叠和展开时的title显示是动画的起始位置

4、加入图像

视差图像时,app:layout_collapseMode="parallax"

 

你可能感兴趣的:(CoordinatorLayout使用总结)