Android 控件使用教程（二）—— RecyclerView 展示图片

简介

在上一篇博文中，介绍了大家已经很熟悉的布局控件ListView，在这篇文章中，我将使用比较新、功能也更强大的RecyclerView.

RecyclerView

首先，要用这个控件，你需要在gradle文件中添加包的引用（配合官方CardView使用）

    compile 'com.android.support:cardview-v7:23.0.1'
    compile 'com.android.support:recyclerview-v7:23.0.1'

在actvity_recyclerview.xml文件中定义布局：

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_recycleview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:padding="2dp"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbars="vertical"/>

和ListView文章中类似的代码声明：

    @Bind(R.id.rv_recycleview)
    RecyclerView rv_recyclerview;

    ButterKnife.bind(this);

对于RecyclerView需要进行LayoutManager的配置，这个是和ListView一样的线性显示：

    rv_recyclerview.setLayoutManager(new LinearLayoutManager(this));//这里用线性显示 类似于listview

获取数据的方法参考上篇文章ListView，或者直接查看我的开源代码库，在此不再赘述。下面介绍RecyclerView的自定义Adapter.

    public class NormalRecyclerViewAdapter extends RecyclerView.Adapter<NormalRecyclerViewAdapter.NormalImageHolder> {
        private final LayoutInflater mLayoutInflater;
        private final Context mContext;
        private List<String> list;

        public NormalRecyclerViewAdapter(Context context, List<String> urls) {
            this.list = urls;
            this.mContext = context;
            mLayoutInflater = LayoutInflater.from(context);
        }

        @Override
        public NormalImageHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            return new NormalImageHolder(mLayoutInflater.inflate(R.layout.item_image, parent, false));
        }

        @Override
        public void onBindViewHolder(NormalImageHolder holder, int position) {
            Picasso.with(mContext)
                    .load(list.get(position))
                    .into(holder.mPicture);
        }

        @Override
        public int getItemCount() {
            return list.size();
        }

        public static class NormalImageHolder extends RecyclerView.ViewHolder {
            @Bind(R.id.picture)
            ImageView mPicture;

            NormalImageHolder(View view) {
                super(view);
                ButterKnife.bind(this, view);
                view.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Log.d("NormalTextViewHolder", "onClick--> position = " + getPosition());
                    }
                });
            }
        }
    }

这是效果：

RecyclerView很方便的更改样式。这是设置成两个竖列的样式代码：

    rv_recyclerview.setLayoutManager(new GridLayoutManager(this, 2));

图片展示不紧凑是因为宽和高的问题，在item_image.xml配置文件中修改宽和高如下：

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 xmlns:tools="http://schemas.android.com/tools"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_margin="2dp"
                 android:foreground="?selectableItemBackground">

        <ImageView
            android:id="@+id/picture"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:cropToPadding="false"
            android:scaleType="centerCrop"
            tools:ignore="ContentDescription"
            tools:src="@color/primary_light"/>

    </FrameLayout>

这样就可以比较好的效果：

同样可以很简单实现瀑布流：

    mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL));//这里用线性宫格显示 类似于瀑布流

此时的item_image.xml为：

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 xmlns:tools="http://schemas.android.com/tools"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_margin="2dp"
                 android:foreground="?selectableItemBackground">

        <ImageView
            android:id="@+id/picture"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            tools:ignore="ContentDescription"
            tools:src="@color/primary_light"/>

    </FrameLayout>

结果：

简单到很神奇。

下一篇将讲解九宫格图片布局NineGridImageView.