前言

本文是针对Android的RecyclerView的学习笔记,主要内容有:

  • RecyclerView实现ListView
  • RecyclerView实现StaggeredGridLayout

RecyclerView可轻松实现ListView、GridView、瀑布流布局,可以设置横向,纵向显示,自带的ItemAnimation添加动画效果简单,并且能够快速实现各种动态浏览效果

RecyclerView实现ListView

和ListView实现一样,RecylerView需要经过写布局,定义适配器,加载布局三个步骤,只是ViewHolder需要继承RecyclerView.ViewHolder。

写布局

使用RecyclerView需在项目build.gradle的dependencies闭包中添加以下依赖:

1
compile 'com.android.support:recyclerview-v7:24.2.1'

girl_item.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/girl_image"
android:src="@drawable/icon1"
android:layout_width="72dp"
android:layout_height="72dp"/>

<TextView
android:id="@+id/girl_name"
android:text="chiaki"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"/>

</LinearLayout>

recycler_view.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
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="wrap_content" />

</LinearLayout>

写适配器

GirlsAdapter.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
public class GirlsAdapter extends RecyclerView.Adapter<GirlsAdapter.ViewHolder>{
private List<Girl> girlList;
public GirlsAdapter(List<Girl> girlList) {
this.girlList = girlList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.girl_staggered_item, parent, false);
final ViewHolder viewHolder = new ViewHolder(view);
viewHolder.girlView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = viewHolder.getAdapterPosition();
Girl girl = girlList.get(position);
Toast.makeText(v.getContext(), "you cliced view "+girl.getName(), Toast.LENGTH_SHORT).show();
}
});
viewHolder.girlImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = viewHolder.getAdapterPosition();
Girl girl = girlList.get(position);
Toast.makeText(v.getContext(), "you clicked image "+girl.getName(), Toast.LENGTH_SHORT).show();
}
});
return viewHolder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Girl girl = girlList.get(position);
holder.girlImage.setImageResource(girl.getImageId());
holder.girlName.setText(girl.getName());
}
@Override
public int getItemCount() {
return girlList.size();
}

static class ViewHolder extends RecyclerView.ViewHolder {
View girlView;
ImageView girlImage;
TextView girlName;
public ViewHolder(View itemView) {
super(itemView);
girlView = itemView;
girlImage = (ImageView) itemView.findViewById(R.id.girl_image);
girlName = (TextView) itemView.findViewById(R.id.girl_name);
}
}
}

加载布局

通过布局管理器,设置相应布局以及滚动方向

RecyclerViewActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
public class RecyclerViewActivity extends AppCompatActivity {
public List<Girl> girlsList = new ArrayList<>();

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.recycler_view);

initGirls();
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
// 选用不同布局Manager,实现你想要的布局
LinearLayoutManager layoutManager = new LinearLayoutManager(this); // 设置ListView
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);// 横向滚动
recyclerView.setLayoutManager(layoutManager); //
// recyclerView.setLayoutManager(new GridLayoutManager(this, 2));//这里用线性宫格显示 类似于grid view
// recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL));//这里用线性宫格显示 类似于瀑布流

GirlsAdapter girlsAdapter2 = new GirlsAdapter(girlsList);
recyclerView.setAdapter(girlsAdapter2);
}

public void initGirls() {
for (int i = 0 ; i < 3; i++) {
Girl gir11 = new Girl("chiaki", R.drawable.icon1);
girlsList.add(gir11);
Girl gir12 = new Girl("setsuna", R.drawable.icon2);
girlsList.add(gir12);
Girl gir13 = new Girl("touma", R.drawable.icon3);
girlsList.add(gir13);
Girl gir14 = new Girl("koharu", R.drawable.icon4);
girlsList.add(gir14);
Girl gir15 = new Girl("mari", R.drawable.icon5);
girlsList.add(gir15);
Girl gir16 = new Girl("nayuki", R.drawable.icon6);
girlsList.add(gir16);
Girl gir17 = new Girl("aiko", R.drawable.icon7);
girlsList.add(gir17);
Girl gir18 = new Girl("nagisa", R.drawable.icon8);
girlsList.add(gir18);
}
}
}

RecyclerView实现StaggeredGridLayout

写布局

写布局recycler_view.xmlgirl_staggered_item.xmlrecycler_view.xml和listview写法相同。

girl_staggered_item.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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="wrap_content"
android:orientation="vertical"
android:layout_margin="5dp">

<ImageView
android:id="@+id/girl_image"
android:layout_width="match_parent"
android:layout_height="72dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/icon1"/>

<TextView
android:id="@+id/girl_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="chiaki"/>

</LinearLayout>

写适配器

自定义适配器继承RecyclerView.Adapter<GirlsAdapter.ViewHolder>,重写onCreateViewHolder(),onBindViewHolder()getItemCount()三个方法,自定义ViewHolder需要继承Recyclerview.ViewHolder类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
public class GirlsAdapter extends RecyclerView.Adapter<GirlsAdapter.ViewHolder> {

private List<Girl> girlList;

public GirlsAdapter(List<Girl> girlList) {
this.girlList = girlList;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.girl_staggered_item, parent, false);
final ViewHolder viewHolder = new ViewHolder(view);

viewHolder.girlView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = viewHolder.getAdapterPosition();
Girl girl = girlList.get(position);
Toast.makeText(v.getContext(), "you cliced view "+girl.getName(), Toast.LENGTH_SHORT).show();
}
});
// 监听item子项包含的组件事件
viewHolder.girlImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = viewHolder.getAdapterPosition();
Girl girl = girlList.get(position);
Toast.makeText(v.getContext(), "you clicked image "+girl.getName(), Toast.LENGTH_SHORT).show();
}
});

return viewHolder;
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Girl girl = girlList.get(position);
holder.girlImage.setImageResource(girl.getImageId());
holder.girlName.setText(girl.getName());
}

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

static class ViewHolder extends RecyclerView.ViewHolder {
View girlView;
ImageView girlImage;
TextView girlName;

public ViewHolder(View itemView) {
super(itemView);
girlView = itemView;
girlImage = (ImageView) itemView.findViewById(R.id.girl_image);
girlName = (TextView) itemView.findViewById(R.id.girl_name);
}
}
}

加载布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public class StaggeredGridActivity extends AppCompatActivity {
private List<Girl> girlsList = new ArrayList<>();

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.recycler_view);

initGirls();
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(4, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);

GirlsAdapter girlsadapter = new GirlsAdapter(girlsList);
recyclerView.setAdapter(girlsadapter);

}

public void initGirls() {
for (int i = 0 ; i < 3; i++) {
Girl gir11 = new Girl(getRandomLengthName("chiaki"), R.drawable.icon1);
girlsList.add(gir11);
Girl gir12 = new Girl(getRandomLengthName("setsuna"), R.drawable.icon2);
girlsList.add(gir12);
Girl gir13 = new Girl(getRandomLengthName("touma"), R.drawable.icon3);
girlsList.add(gir13);
Girl gir14 = new Girl(getRandomLengthName("koharu"), R.drawable.icon4);
girlsList.add(gir14);
Girl gir15 = new Girl(getRandomLengthName("mari"), R.drawable.icon5);
girlsList.add(gir15);
Girl gir16 = new Girl(getRandomLengthName("nayuki"), R.drawable.icon6);
girlsList.add(gir16);
Girl gir17 = new Girl(getRandomLengthName("aiko"), R.drawable.icon7);
girlsList.add(gir17);
Girl gir18 = new Girl(getRandomLengthName("nagisa"), R.drawable.icon8);
girlsList.add(gir18);
}
}

public String getRandomLengthName(String name) {
Random random = new Random();
int lenght = random.nextInt(20)+1;
StringBuilder builder = new StringBuilder();
for (int i = 0; i < lenght; i++) {
builder.append(name);
}
return builder.toString();
}
}

参考资料

RecyclerView使用心得之基础篇

声明:本站所有文章均为原创或翻译,遵循署名 - 非商业性使用 - 禁止演绎 4.0 国际许可协议,如需转载请确保您对该协议有足够了解,并附上作者名 (Tsukasa) 及原文地址