話不多說,先來看個效果:
一般網(wǎng)上很多人,RecycleView Item展開的效果的思路就是通過item的add和remove來實現(xiàn),但是圖中的效果會出現(xiàn)哪些問題呢?
- 每個item是有圓角的
- 每個item是有間距的
如果也是通過add和remove來實現(xiàn),怎么保證下拉的那部分內(nèi)容的間距是?沒有的,又怎么保證圓角一直會往下移動。都是比較麻煩的,也不是說一定沒有辦法。總之處理起來比較惡心。不過并不是這種方案不好,畢竟沒有萬能的方案,只有適合的方案。
add和remove來實現(xiàn)的方案可以參考下面幾篇文章
Android -- RecyclerView(超簡單)實現(xiàn)可展開列表
?好,說源碼之前,我們先說下我們的思路。
- 外圍控件就是簡單的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對應(yīng)的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();//根據(jù)時間因子的變化系數(shù)進(jìn)行設(shè)置高度
ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
layoutParams.height = value;
float alpha = ((float)value) / mHiddenViewMeasuredHeight;
view.setAlpha(alpha);
view.setLayoutParams(layoutParams);//設(shè)置高度
}
});
return va;
}
核心邏輯就這么多,具體源碼我以上傳Github上。歡迎大家star哈。