话不多说,先来看个效果:
一般网上很多人,RecycleView Item展开的效果的思路就是通过item的add和remove来实现,但是图中的效果会出现哪些问题呢?
- 每个item是有圆角的
- 每个item是有间距的
如果也是通过add和remove来实现,怎么保证下拉的那部分内容的间距是�没有的,又怎么保证圆角一直会往下移动。都是比较麻烦的,也不是说一定没有办法。总之处理起来比较恶心。不过并不是这种方案不好,毕竟没有万能的方案,只有适合的方案。
add和remove来实现的方案可以参考下面几篇文章
Android -- RecyclerView(超简单)实现可展开列表
�好,说源码之前,我们先说下我们的思路。
- 外围控件就是简单的RecycleView
- recycleView里的item的父view是cardview,为了方便的支持圆角
- 点击下拉说白了就是简单的一个visiable以及gone的动画效果。
源码来了:
由于用到了recycleview和cardview,首先你必须在gradle里集成以下:
dependencies {
//**** your other compile *****
compile 'com.android.support:recyclerview-v7:25.3.1'
compile 'com.android.support:cardview-v7:25.0.0'
}
接着在activty里集成recycleview的布局
actvity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
tools:context="com.touch.xu.expandedrecycleviewdemo.MainActivity"
android:orientation="vertical">
<TextView
android:padding="10dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="可展开的recycleView"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/id_recycleview"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
然后是recycleview 每个item的布局,如下:
item_normal.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:orientation="vertical"
android:background="@android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:textColor="@android:color/black"
android:padding="30dp"
android:id="@+id/id_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<RelativeLayout
android:background="@android:color/darker_gray"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:padding="10dp"
android:clickable="true"
android:id="@+id/id_top"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_centerVertical="true"
android:id="@+id/id_tip"
android:text="你需要开始检测了..."
android:paddingLeft="10dp"
android:gravity="left"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ImageView
android:layout_centerVertical="true"
android:id="@+id/id_attention"
android:layout_alignParentRight="true"
android:src="@mipmap/attention"
android:layout_width="20dp"
android:layout_height="20dp"/>
</RelativeLayout>
<TextView
android:id="@+id/id_expand_view"
android:visibility="gone"
android:paddingLeft="20dp"
android:gravity="left|center_vertical"
android:layout_below="@id/id_top"
android:text="这是展开的view\n这是展开的view\n这是展开的view"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_40"/>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
在改item对应的viewholder里编写展开和隐藏的的逻辑,我这边截取了一些片段:
if (mExpandableView.getVisibility() == View.VISIBLE) {
animClose(mExpandableView);
} else {
animOpen(mExpandableView);
}
private void animOpen(final View view){
view.setVisibility(View.VISIBLE);
view.setAlpha(0);
if (mOpenValueAnimator == null) {
mOpenValueAnimator = createDropAnim(view,0, mHiddenViewMeasuredHeight);
}
mOpenValueAnimator.start();
}
private void animClose(final View view){
int origHeight = view.getHeight();
view.setAlpha(1);
if (mCloseValueAnimator == null) {
mCloseValueAnimator = createDropAnim(view, origHeight, 0);
mCloseValueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.GONE);
}
});
}
mCloseValueAnimator.start();
}
private ValueAnimator createDropAnim(final View view,int start,int end) {
final ValueAnimator va = ValueAnimator.ofInt(start, end);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int value = (int) animation.getAnimatedValue();//根据时间因子的变化系数进行设置高度
ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
layoutParams.height = value;
float alpha = ((float)value) / mHiddenViewMeasuredHeight;
view.setAlpha(alpha);
view.setLayoutParams(layoutParams);//设置高度
}
});
return va;
}
核心逻辑就这么多,具体源码我以上传Github上。欢迎大家star哈。