v7中RecyclerView和CardView實作list、grid和瀑布流

主要使用RecycleView.setLayoutManager設定布局管理

實作list顯示

vertical：是否是豎條顯示，ture表示豎條顯示

reverse：是否是反向顯示，ture表示反向顯示

private void loadListData(boolean vertical, boolean reverse) {
        // 1.布局管理器
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(vertical ? LinearLayoutManager.VERTICAL : LinearLayoutManager.HORIZONTAL);
        layoutManager.setReverseLayout(reverse);
        mRecycleView.setLayoutManager(layoutManager);
        // 2.設定擴充卡
        mRecycleView.setAdapter(new RecyclerViewAdapter(this, dataBeans, ));
    }
           

item_list.xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardView="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        cardView:cardCornerRadius="30dp"
        cardView:cardElevation="0dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/item_list_iv_list"
                android:layout_width="75dp"
                android:layout_height="75dp"
                android:src="@mipmap/ic_launcher" />


            <TextView
                android:id="@+id/ietm_list_tv_list"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@+id/item_list_iv_list"
                android:text="圖檔描述"
                android:textSize="20dp"
                android:textStyle="bold" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>
           

實作grid

private void loadGridData(boolean vertical, boolean reverse) {
        // 1.布局管理器
        GridLayoutManager layoutManager = new GridLayoutManager(this, );
        layoutManager.setOrientation(vertical ? LinearLayoutManager.VERTICAL : LinearLayoutManager.HORIZONTAL);
        layoutManager.setReverseLayout(reverse);
        mRecycleView.setLayoutManager(layoutManager);
        // 2.設定擴充卡
        mRecycleView.setAdapter(new RecyclerViewAdapter(this, dataBeans, ));
    }
           

item_grid.xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardView="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/item_list_iv_list"
                android:layout_width="75dp"
                android:layout_height="75dp"
                android:layout_gravity="center_horizontal"
                android:src="@mipmap/ic_launcher" />


            <TextView
                android:id="@+id/ietm_list_tv_list"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="圖檔描述"
                android:textSize="20dp"
                android:textStyle="bold" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>
           

實作瀑布流

private void loadStaggeredData(boolean vertical, boolean reverse) {
        // 1.布局管理器
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(, vertical ? LinearLayoutManager.VERTICAL : LinearLayoutManager.HORIZONTAL);
        layoutManager.setReverseLayout(reverse);
        mRecycleView.setLayoutManager(layoutManager);
        // 2.設定擴充卡
        mRecycleView.setAdapter(new RecyclerViewAdapter(this, dataBeans, ));
    }
           

item_staggered.xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardView="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/item_list_iv_list"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/ietm_list_tv_list"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="圖檔描述"
                android:textSize="20dp"
                android:textStyle="bold" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>
           

公用adapter

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolder> {

    private Context mContext;
    private List<DataBean> mDatas;

    private int mResouceId = -;

    public RecyclerViewAdapter(Context contaxt, List<DataBean> datas, int mode) {
        this.mContext = contaxt;
        this.mDatas = datas;

        switch (mode) {
            case :
                mResouceId = R.layout.item_grid;
                return;
            case :
                mResouceId = R.layout.item_staggered;
                return;
            case :
            default:
                mResouceId = R.layout.item_list;
        }
    }

    @Override
    public RecyclerViewAdapter.RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // 當viewHolder建立時的回調
        View view = View.inflate(mContext, mResouceId, null);
        return new RecyclerViewAdapter.RecyclerViewHolder(view);
    }

    @Override
    public void onBindViewHolder(RecyclerViewAdapter.RecyclerViewHolder holder, int position) {
        // 當viewHoder和資料綁定時的回調
        DataBean dataBean = mDatas.get(position);
        holder.setData(dataBean);
    }

    @Override
    public int getItemCount() {
        return mDatas != null ? mDatas.size() : ;
    }

    public class RecyclerViewHolder extends RecyclerView.ViewHolder {

        private ImageView ivIcon;
        private TextView tvName;

        public RecyclerViewHolder(View itemView) {
            super(itemView);

            ivIcon = (ImageView) itemView.findViewById(R.id.item_list_iv_list);
            tvName = (TextView) itemView.findViewById(R.id.ietm_list_tv_list);
        }

        public void setData(DataBean data) {
            ivIcon.setImageResource(data.icon);
            tvName.setText(data.name);
        }
    }
}
           

RecycleViewDemo2.rar 執行個體下載下傳