在上一篇博文中,介绍了大家已经很熟悉的布局控件ListView,在这篇文章中,我将使用比较新、功能也更强大的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 list;
public NormalRecyclerViewAdapter(Context context, List 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.