Iwfu-GitHub--FoldAbleLayout可折叠组件学习(一)

来自Github,地址：

https://github.com/worldline/FoldableLayout

效果图:

使用（以配合RecycleView一起使用为例）：

先上各个布局文件:

主页面创建RecycleView

<android.support.v7.widget.RecyclerViewandroid:id="@+id/rv_ShouyeFragment"android:layout_width="match_parent"android:layout_height="wrap_content"android:clipChildren="false"android:clipToPadding="false"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"></android.support.v7.widget.RecyclerView>

list_item_cover:

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView  xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="100dp"><RelativeLayout  android:layout_width="match_parent"android:layout_height="match_parent"><TextView  android:textStyle="bold"android:textColor="@color/colorPrimary"android:gravity="center"android:id="@+id/tv_cover"android:layout_width="100dp"android:layout_height="match_parent" /><ImageView  android:layout_toRightOf="@+id/tv_cover"android:scaleType="centerCrop"android:id="@+id/iv_cover"android:layout_width="match_parent"android:layout_height="match_parent" /><Button  android:id="@+id/btn_cover"android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:text="Share"android:textColor="@android:color/white"android:backgroundTint="@color/colorAccent"android:layout_width="wrap_content"android:layout_height="wrap_content" /></RelativeLayout></android.support.v7.widget.CardView>

list_item_detail:

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView  xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="200dp"><RelativeLayout  android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/holo_green_dark"><ImageView  android:id="@+id/iv_detail"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"/></RelativeLayout></android.support.v7.widget.CardView>

1-创建FoldableLayout

FoldableLayout mFoldableLayout = new FoldableLayout(context);

2.设置封面、详情

foldableLayout.setupViews(R.layout.list_item_cover, R.layout.list_item_detail, R.dimen.card_cover_height, itemView.getContext());

第一个参数指折叠图布局，第二个是展开图布局，第三个是折叠时的高度,这个高度一定和折叠状态下的高度一致.

3-给RecycleView设置自定义Adapter,并把FoldAbleLayout添加到自定义Adapter中,控制每一个列表项的效果

/* 自定义ShouyeFragmentAdapter */
public class ShouyeFragmentAdapterextendsRecyclerView.Adapter<ShouyeFragmentAdapter.MyViewHolder> {private String[] mDataList; //文字数组private int[] mImageList;   //要显示的图片private Map<Integer, Boolean> mFoldStates = new HashMap<>();  //用于判断状态是否折叠private Context mContext;public ShouyeFragmentAdapter(String[] mDataList, int[] mImageList,Context mContext) {this.mDataList = mDataList;this.mContext = mContext;this.mImageList = mImageList;}@Overridepublic ShouyeFragmentAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {return new MyViewHolder(new FoldableLayout(parent.getContext()));}@Overridepublic void onBindViewHolder(final ShouyeFragmentAdapter.MyViewHolder holder, int position) {//绑定数据holder.iv_cover.setImageResource(mImageList[position]);holder.iv_detail.setImageResource(mImageList[position]);holder.tv_cover.setText(mDataList[position]);// 绑定状态if (mFoldStates.containsKey(position)) {if (mFoldStates.get(position) == Boolean.TRUE) {if (!holder.foldableLayout.isFolded()) {// 如果不是折叠状态,就将其折叠holder.foldableLayout.foldWithoutAnimation();}} else if (mFoldStates.get(position) == Boolean.FALSE) {// 如果是折叠状态就将其展开if (holder.foldableLayout.isFolded()) {holder.foldableLayout.unfoldWithoutAnimation();}}} else {holder.foldableLayout.foldWithoutAnimation();}//设置内部按钮监听holder.btn_cover.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(mContext, "btn_cover Clicked",Toast.LENGTH_SHORT).show();}});//设置点击时带有动画效果的展开和折叠holder.foldableLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (holder.foldableLayout.isFolded()) {holder.foldableLayout.unfoldWithAnimation();} else {holder.foldableLayout.foldWithAnimation();}}});holder.foldableLayout.setFoldListener(new FoldableLayout.FoldListener() {@Overridepublic void onUnFoldStart() {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {holder.foldableLayout.setElevation(5);}}@Overridepublic void onUnFoldEnd() {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {holder.foldableLayout.setElevation(0);}mFoldStates.put(holder.getAdapterPosition(), false);}@Overridepublic void onFoldStart() {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {holder.foldableLayout.setElevation(5);}}@Overridepublic void onFoldEnd() {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {holder.foldableLayout.setElevation(0);}mFoldStates.put(holder.getAdapterPosition(), true);}});}@Overridepublic int getItemCount() {return mDataList.length;}public class MyViewHolder extends RecyclerView.ViewHolder {protected FoldableLayout foldableLayout;protected TextView tv_cover;protected ImageView iv_cover;protected ImageView iv_detail;protected Button btn_cover;public MyViewHolder(FoldableLayout foldableLayoutView) {super(foldableLayoutView);foldableLayout = foldableLayoutView;foldableLayout.setupViews(R.layout.list_item_cover,R.layout.list_item_details, R.dimen.card_cover_height,itemView.getContext());tv_cover = (TextView) foldableLayoutView.findViewById(R.id.tv_cover);btn_cover = (Button) foldableLayoutView.findViewById(R.id.btn_cover);iv_cover = (ImageView) foldableLayoutView.findViewById(R.id.iv_cover);iv_detail = (ImageView) foldableLayoutView.findViewById(R.id.iv_detail);}}
}

4-在界面里使用（给RecycleView添加适配器）

private void initRecycleView() {rv_ShouyeFragment = (RecyclerView) view.findViewById(R.id.rv_ShouyeFragment);rv_ShouyeFragment.setLayoutManager(new LinearLayoutManager(getContext()));//CANTEENNAME,CANTEENIMAGE,是要显示在列表的数据，图片mAdapter = new ShouyeFragmentAdapter(CANTEENNAME,CANTEENIMAGE,getContext());//给子列表项间添加间隙rv_ShouyeFragment.addItemDecoration(new RecyclerView.ItemDecoration() {@Overridepublic void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {super.getItemOffsets(outRect, view, parent, state);outRect.bottom = getResources().getDimensionPixelSize(R.dimen.activity_vertical_margin);}});rv_ShouyeFragment.setAdapter(mAdapter);}

5-发现问题:

快速点击第一项或最后一项在列表项从展开状态到折叠状态时会导致程序崩溃，但Logcat未报错。图片加载缓慢，写的时候没考虑内存泄漏等问题导致程序在这个界面卡顿不流畅，动画无法正常显示等问题。