使用之前的准备工作 首先打开build.gradle 文件,在dependencies的节点之内 添加如下内容:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:recyclerview-v7:24.2.1'
testCompile 'junit:junit:4.12'
}
接下来需要 准备一个适配器,新建一个FruitAdapter类,让这个适配器继承RecyclerView.Adapter ,并将泛型指定为 FruitAdapter.ViewHolder.其中 ViewHolder 是我们在FruitAdapter 中定义一个内部类.
FruitAdapter 代码如下:
public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
private List<Fruit> mFruitList;
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView mImage;
TextView mText;
View fruitView;
public ViewHolder(View itemView) {
super(itemView);
mImage = (ImageView) itemView.findViewById(R.id.image);
mText = (TextView) itemView.findViewById(R.id.text);
fruitView = itemView;
}
}
public FruitAdapter(List<Fruit> fruitList) {
mFruitList = fruitList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_fruit, null);
final ViewHolder holder = new ViewHolder(view);
holder.fruitView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Fruit fruit = mFruitList.get(position);
Toast.makeText(v.getContext(), "你点击了 " + fruit.getName(), Toast.LENGTH_SHORT).show();
}
});
holder.mImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Fruit fruit = mFruitList.get(position);
Toast.makeText(v.getContext(), "点击 " + fruit.getName(), Toast.LENGTH_SHORT).show();
}
});
return holder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Fruit fruit = mFruitList.get(position);
holder.mImage.setImageResource(fruit.getImageId());
holder.mText.setText(fruit.getName());
}
@Override
public int getItemCount() {
return mFruitList.size();
}
}
这里我们首先定义一个内部类ViewHolder,ViewHolder要继承 RecyclerView.ViewHolder, 然后ViewHolder的构造函数中传入一个 View 参数,这个参数通常就是RecyclerView 子项的最外层布局.我们就可以通过findViewById()方法 获取布局中的 imageView和TextView的实例. 接下来往下看,FruitAdapter 中也有一个构造方法,这个方法用于把数据源传进来,并赋值给一个全局变量mFruitList, 我们后续的操作都将在这个数据源的基础上进行. 继续往下看,由于FruitAdapter 继承自RecyclerView.Adapter的 ,那么必须重写 onCreateViewHolder(), onBindViewHolder(), 和 getItemCount() 这3个方法.
onCreateViewHolder() 用于创建 viewholder 实例,我们这个方法将 子项 布局加载进来,然后创建一个 viewholder 实例,并把加载进来的布局传入到构造方法中,最后将 viewholder的实例 返回.
onBindViewHolder(),是用于对 RecyclerView 子项的数据进行赋值的,会在每个子项滚动到屏幕内的时候执行,这里我们通过 position 参数得到当前项的Fruit实例,然后再将数据设置到 ViewHolder的ImageView和ImageView当中即可.
getItemCount() 直接返回数据源的长度.
MainActivity 代码如下:
public class MainActivity extends AppCompatActivity {
RecyclerView mRecyclerView;
private List<Fruit> mFruitList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
initFruit();
// 1. 横向列表
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); //加上这句 就可以设置水平方向
mRecyclerView.setLayoutManager(layoutManager);
//2. 瀑布流
// StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
// mRecyclerView.setLayoutManager(staggeredGridLayoutManager);
FruitAdapter fruitAdapter = new FruitAdapter(mFruitList);
mRecyclerView.setAdapter(fruitAdapter);
}
private void initFruit() {
for (int i = 0; i < 20; i++) {
Fruit apple = new Fruit(getRandomName("苹果"), R.mipmap.apple_pic);
mFruitList.add(apple);
Fruit banana = new Fruit(getRandomName("Banana"), R.mipmap.banana_pic);
mFruitList.add(banana);
Fruit orange = new Fruit(getRandomName("Orange"), R.mipmap.orange_pic);
mFruitList.add(orange);
Fruit watermelon = new Fruit(getRandomName("Watermelon"), R.mipmap.watermelon_pic);
mFruitList.add(watermelon);
Fruit pear = new Fruit(getRandomName("Pear"), R.mipmap.pear_pic);
mFruitList.add(pear);
Fruit grape = new Fruit(getRandomName("Strawberry"), R.mipmap.grape_pic);
mFruitList.add(grape);
Fruit pineapple = new Fruit(getRandomName("Strawberry"), R.mipmap.pineapple_pic);
mFruitList.add(pineapple);
Fruit strawberry = new Fruit(getRandomName("Strawberry"), R.mipmap.strawberry_pic);
mFruitList.add(strawberry);
Fruit cherry = new Fruit(getRandomName("Cherry"), R.mipmap.cherry_pic);
mFruitList.add(cherry);
Fruit mango = new Fruit(getRandomName("Mango"), R.mipmap.mango_pic);
mFruitList.add(mango);
}
}
private String getRandomName(String name) {
Random random = new Random();
int length = random.nextInt(5) + 1;
StringBuilder builder = new StringBuilder();
for (int i = 0; i < length; i++) {
builder.append(name);
}
return builder.toString();
}
}
这里使用了一个initFruit() 方法,用于初始化所有的数据,,然后创建一个 LinearLayoutManager对象,并将它设置到 RecyclerView当中. LayoutManager 用于指定RecyclerView 的布局方式, 这里使用的是LinearLayoutManager是线性布局的意思.可以实现和 ListView类似的效果.
实现横向的滚动和瀑布流布局
实现横向的布局 调用LinearLayoutManager的setOrientation() 方法来设置布局的排列方式,默认是纵向排列的.我们传入的LinearLayoutManager.HORIZONTAL 表示让布局横向排列.
另外除了LinearLayoutManager 之外, RecyclerView 还给我们提供了GridLayoutManager(网格布局) 和 StaggedGridLayoutManager(瀑布流布局).
我们创建一个 StaggedGridLayoutManager 的实例. 该构造函数接收2个参数,第一个参数用于指定布局的列数, 传入数字X 就代表是X列. 第二个参数用于指定布局的排列方向,传入StaggeredGridLayoutManager.VERTICAL 表示让布局纵向排列,最后再把创建好的实例设置到 RecyclerView 当中,就可以啦
Fruit的实例对象
public class Fruit {
private String name;
private int imageId;
public Fruit(String name, int imageId) {
this.name = name;
this.imageId = imageId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getImageId() {
return imageId;
}
public void setImageId(int imageId) {
this.imageId = imageId;
}
}
activity_main.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
item_fruit.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@mipmap/apple_pic"/>
<TextView
android:id="@+id/text"
android:background="#3322aa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="水果"
android:layout_marginTop="8dp"
android:textSize="20sp"/>
</LinearLayout>
item_fruit_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="@+id/image"
android:layout_marginLeft="100dp"
android:background="@mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/text"
android:text="水果"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"/>
</LinearLayout>
像listview一样的效果