GitHub--FoldAbleLayout可折叠组件学习

来自Github,地址：

https://github.com/worldline/FoldableLayout

效果图:

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

先上各个布局文件:

主页面创建RecycleView

<android.support.v7.widget.RecyclerView
        android: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 ShouyeFragmentAdapter
        extends
            RecyclerView.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;
    }

    @Override
    public ShouyeFragmentAdapter.MyViewHolder onCreateViewHolder(
            ViewGroup parent, int viewType) {
        return new MyViewHolder(new FoldableLayout(parent.getContext()));
    }

    @Override
    public 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() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "btn_cover Clicked",
                        Toast.LENGTH_SHORT).show();
            }
        });

//设置点击时带有动画效果的展开和折叠
        holder.foldableLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (holder.foldableLayout.isFolded()) {
                    holder.foldableLayout.unfoldWithAnimation();
                } else {
                    holder.foldableLayout.foldWithAnimation();
                }
            }
        });

        holder.foldableLayout
                .setFoldListener(new FoldableLayout.FoldListener() {
                    @Override
                    public void onUnFoldStart() {
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                            holder.foldableLayout.setElevation(5);
                        }
                    }

                    @Override
                    public void onUnFoldEnd() {
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                            holder.foldableLayout.setElevation(0);
                        }
                        mFoldStates.put(holder.getAdapterPosition(), false);
                    }

                    @Override
                    public void onFoldStart() {
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                            holder.foldableLayout.setElevation(5);
                        }
                    }

                    @Override
                    public void onFoldEnd() {
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                            holder.foldableLayout.setElevation(0);
                        }
                        mFoldStates.put(holder.getAdapterPosition(), true);
                    }
                });

    }

    @Override
    public 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() {
            @Override
            public 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未报错。



图片加载缓慢，写的时候没考虑内存泄漏等问题导致程序在这个界面卡顿不流畅，动画无法正常显示等问题。