前言

本文是针对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.xml和girl_staggered_item.xml，recycler_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) 及原文地址