RecyclerView
RecyclerView 是MetrialDesign 的重要一个组件,未来是一定会替代ListView的,RecyclerView结构松散,非常适合自定义。稍后会补上一篇RecyclerView基础的文章。
先看效果:
这里的每张图片都有着不同的尺寸,但RecyclerView可以将它们完美的结合在一起,表现形式是不是很美观:-)
每个item的布局文件
就是一个ImageView和TextView(显示文字)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- adjustViewBounds 是否保持原图宽高比 -->
<!-- scaleType="centerCrop" 中心缩放 -->
<ImageView
android:id="@+id/id_iv_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:contentDescription="@string/image" />
<TextView
android:id="@+id/id_tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</LinearLayout>
主Activity布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.yangtianrui.recyclerview2.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/id_rv_all_img"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Bean对象
描述每个Item
package com.example.yangtianrui.recyclerview2;
/**
* Created by yangtianrui on 16-5-26.
* <p/>
* Bean 对象
*/
public class Product {
private int image;
private String title;
public Product(int image, String title) {
this.image = image;
this.title = title;
}
public Product() {
}
public int getImage() {
return image;
}
public void setImage(int image) {
this.image = image;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}
Adapter类
这个Adapter用于设置RecyclerView的数据
package com.example.yangtianrui.recyclerview2;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
private List<Product> mDatas = new ArrayList<>();
private LayoutInflater mInfalter;
private Context mContext;
public MyAdapter(Context context, List<Product> datas) {
this.mContext = context;
this.mDatas = datas;
this.mInfalter = LayoutInflater.from(context);
}
/**
* 创建ViewHolder
*/
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View root = mInfalter.inflate(R.layout.item_simple, parent, false);
MyViewHolder holder = new MyViewHolder(root);
holder.mIvImg = (ImageView) root.findViewById(R.id.id_iv_img);
holder.mTvTitle = (TextView) root.findViewById(R.id.id_tv_title);
return holder;
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
Product p = mDatas.get(position);
ImageView img = holder.mIvImg;
TextView text = holder.mTvTitle;
img.setImageResource(p.getImage());
text.setText(p.getTitle());
}
@Override
public int getItemCount() {
return mDatas.size();
}
/**
* 必须继承自RecyclerView的ViewHolder
*/
static class MyViewHolder extends RecyclerView.ViewHolder {
private ImageView mIvImg;
private TextView mTvTitle;
public MyViewHolder(View itemView) {
super(itemView);
}
}
}
设置分割线
这里重写的是getItemOffsets(),即给每个Product对象设置一定的偏移量实现间距
package com.example.yangtianrui.recyclerview2;
import android.graphics.Rect;
import android.support.v7.widget.RecyclerView;
import android.view.View;
/**
* Created by yangtianrui on 16-5-26.
* <p/>
* 用于分割每个组件
* <p/>
* 需重写的方法:
* onDraw方法:其绘制将会在每个Item被绘制之前进行;
* onDrawOver:在绘制完Item后进行绘制;
* getItemOffsets 可以通过outRect.set()为每个Item设置一定的偏移量;
*/
public class SpacesItemDecroation extends RecyclerView.ItemDecoration {
// 分割距离
private int space;
public SpacesItemDecroation() {
}
public SpacesItemDecroation(int space) {
this.space = space;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.left = space;
outRect.right = space;
outRect.bottom = space;
if (parent.getChildAdapterPosition(view) == 0) {
outRect.top = space;
}
}
}
Activity代码
package com.example.yangtianrui.recyclerview2;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import java.util.Arrays;
public class MainActivity extends AppCompatActivity {
private RecyclerView mRvAllImg;
private int[] mImages = new int[]{
R.drawable.a, R.drawable.b, R.drawable.c,
R.drawable.e, R.drawable.f, R.drawable.g,
R.drawable.h, R.drawable.i, R.drawable.d,
};
private char[] mTitles = new char[mImages.length];
private Product[] mDatas = new Product[mImages.length];
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
initView();
}
private void initView() {
mRvAllImg = (RecyclerView) findViewById(R.id.id_rv_all_img);
mRvAllImg.setAdapter(new MyAdapter(this, Arrays.asList(mDatas)));
// 每行两个,竖直排列
mRvAllImg.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
mRvAllImg.addItemDecoration(new SpacesItemDecroation(5));
}
private void initData() {
for (int i = 0; i < mTitles.length; i++) {
mTitles[i] = (char) ('a' + i);
mDatas[i] = new Product(mImages[i], mTitles[i] + "");
}
}
}