自定义Behavior,实现滑动卡片
Tags
Star
效果图
上传GIF图到简书搞了半天,后来发现是文件太大的原因,于是在这个网站压缩了一下:压缩GIF
至于是怎么录制这个[[gif]]的,很简单:用Vysor同步手机屏幕到电脑上,然后用licecap录制即可。
https://yupic.oss-cn-shanghai.aliyuncs.com/202208261052924.webp
1-自定义视图
注意点:
- 自定义组合视图+自定义属性,没啥说的
- 布局中使用了merge标签,(仅可)代替FrameLayout,减少布局层次,注意:这里不用merge会有诡异事件发生!
- Adapter使用了我自己的一个库,引用和使用参见:Adapter的封装之路,注意:这里使用ListView会有诡异事件发生!
- 监听onSizeChanged方法,获取headerHeight
- 通过注解绑定该控件对应的Behavior
package com.che.slidingcard.slidingcard;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.Rect;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;
import com.che.slidingcard.R;
import com.che.superadapter.SingleAdapter;
import com.che.superadapter.SuperViewHolder;
import java.util.ArrayList;
import java.util.List;
/**
* 作者:余天然 on 16/9/13 下午11:15
*/
@CoordinatorLayout.DefaultBehavior(SlidingCardBehavior.class)
public class SlidingCardView extends FrameLayout {
private int headerHeight;
public SlidingCardView(Context context) {
this(context, null);
}
public SlidingCardView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SlidingCardView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(final Context context, AttributeSet attrs, int defStyleAttr) {
LayoutInflater.from(context).inflate(R.layout.view_slidingcard, this);
TextView textView = (TextView) findViewById(R.id.tv);
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SlidingCardView, defStyleAttr, 0);
int color = array.getColor(R.styleable.SlidingCardView_card_color, Color.GREEN);
String text = array.getString(R.styleable.SlidingCardView_card_text);
array.recycle();
textView.setText(text);
textView.setBackgroundColor(color);
SingleAdapter<String> adapter = new SingleAdapter<String>(context, R.layout.list_item) {
@Override
protected void bindData(SuperViewHolder holder, String item) {
TextView textView = holde
2-自定义Behavior
注意点:
- 首先重写onMeasureChild(),重新测量子控件的宽高,MeasureSpec的用法不熟悉的自己补去:三杆火枪干掉自定义View
- 然后重写onLayoutChild(),重新布局子控件的位置,这里主要是通过offsetTopAndBottom()来设置偏移值来改变位置的
- onStartNestedScroll()判断方向来决定是否要配合子view做出响应。
- onNestedPreScroll()与onNestedScroll()执行嵌套滑动之前和之后的处理
package com.che.slidingcard.slidingcard;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.view.ViewCompat;
import android.view.View;
/**
* 作者:余天然 on 16/9/13 下午11:16
*/
public class SlidingCardBehavior extends CoordinatorLayout.Behavior<SlidingCardView> {
private int defaultOffset;//默认偏移值
@Override
public boolean onMeasureChild(CoordinatorLayout parent, SlidingCardView child, int parentWidthMeasureSpec, int widthUsed, int parentHeightMeasureSpec, int heightUsed) {
int offset = getChildMeasureOffset(parent, child);
int height = View.MeasureSpec.getSize(parentHeightMeasureSpec) - offset;
int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY);
child.measure(parentWidthMeasureSpec, heightMeasureSpec);
return true;
}
@Override
public boolean onLayoutChild(CoordinatorLayout parent, SlidingCardView child, int layoutDirection) {
parent.onLayoutChild(child, layoutDirection);
SlidingCardView previous = getPreviousChild(parent, child);
if (previous != null) {
int offset = previous.getTop() + previous.getHeaderHeight();
child.offsetTopAndBottom(offset);
}
defaultOffset = child.getTop();
return true;
}
/**
* 有嵌套滑动到来了,问下父View是否接受嵌套滑动
*
* @param coordinatorLayout
* @param child 嵌套滑动对应的父类的子类(因为嵌套滑动对于的父View不一定是一级就能找到的,可能挑了两级父View的父View,child的辈分>=target)
* @param directTargetChild
* @param target 具体嵌套滑动的那个子类
* @param nestedScrollAxes 支持嵌套滚动轴。水平方向,垂直方向,或者不指定
* @return 是否接受该嵌套滑动
*/
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, SlidingCardView child, View directTargetChild, View target, int nestedScrollAxes) {
//判断监听的方向
boolean isVertical = (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
return isVertical && child == directTargetChild;
}
/**
* 在嵌套滑动的子View未滑动之前告诉过来的准备滑动的情况
*
* @param parent
* @param child
* @param target 具体嵌套滑动的那个子类
* @param dx 水平方向嵌套滑动的子View想要变化的距离
* @param dy 垂直方向嵌套滑动的子Vie
3-依赖的资源
R.layout.activity_main:
<?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"
android:layout_width="match_parent"
android:background="#00F5FF"
android:layout_height="match_parent">
<com.che.slidingcard.slidingcard.SlidingCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:card_color="#cc3399"
app:card_text="卡片1"/>
<com.che.slidingcard.slidingcard.SlidingCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:card_color="#99ffcc"
app:card_text="卡片2"/>
<com.che.slidingcard.slidingcard.SlidingCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:card_color="#33ccff"
app:card_text="卡片3"/>
<com.che.slidingcard.slidingcard.SlidingCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:card_color="#F4A460"
app:card_text="卡片4"/>
</android.support.design.widget.CoordinatorLayout>
R.layout.view_slidingcard:
<?xml version="1.0" encoding="utf-8"?>
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/card_header_height"
android:background="#C0C0C0"/>
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="@dimen/card_header_height"
android:background="#000000"
android:gravity="center_vertical"
android:text="头部"/>
</merge>
R.styleable.SlidingCardView:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SlidingCardView">
<attr name="card_color" format="color"/>
<attr name="card_text" format="string"/>
</declare-styleable>
</resources>
R.layout.list_item:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
app:cardCornerRadius="4dp"
app:cardElevation="2dp"
android:foreground="?android:attr/selectableItemBackground">
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</android.support.v7.widget.CardView>