Android RecyclerView实现复杂列表布局
Android
7 分钟 读完 (大约 1012 个字)

Android RecyclerView实现复杂列表布局

​ 这次学习的内容是使用RecyclerView来实现一些较为复杂的布局，比如一个item：

最左边是一个imageview，中间部分为textView，textView下面又是一个textView，最右边为一个imageview。

这里写图片描述
1、首先在activity_main.xml中添加RecyclerView，随后正如之前所说的分别针对左中右新建3个XML布局文件命名为item_type_one、two、three.随后对其进行布局配置。
2、新建一个adapter添加模拟数据。然后针对布局新建三个viewholder。随后新建一个抽象类TypeAbstractViewHolder，将三个viewholder用到的同一个方法封装起来调用,将三个viewHolder继承自抽象类。为了优雅。
activity_main.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"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.tony.recyclerviewdemo.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycleView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

item_type_one.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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="60dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/white"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="20dp" />

    <TextView
        tools:text = "月满轩尼诗"
        android:id="@+id/name"
        android:layout_marginLeft="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

item_type_two.xml:

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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@android:color/white"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="20dp" />

    <LinearLayout
        android:layout_marginLeft="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="月满轩尼诗" />

        <TextView
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            tools:text="月满轩尼诗是一部好电影吗？" />

    </LinearLayout>


</LinearLayout>

item_type_three.xml:

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
<?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="60dp"
    android:background="@android:color/white"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp" />

    <ImageView
        android:id="@+id/contentImage"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:orientation="vertical"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/avatar"
        android:layout_toEndOf="@+id/avatar"
        android:layout_marginStart="20dp">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="月满轩尼诗" />

        <TextView
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            tools:text="月满轩尼诗是一部好电影吗？" />

    </LinearLayout>


</RelativeLayout>

这边提一个小技巧，一般textview如果不设置文本内容的话是无法预览的，这里我们在属性中添加一个：tools:text=”abc”;
这个时候abc就会在UI上面显示出来了，而且abc也不用加入string.xml.

Java文件：
MAinActivity.class

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
package com.example.tony.recyclerviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;

    private DemoAdapter mAdapter;

    int colors[] = {android.R.color.holo_blue_light,
                    android.R.color.holo_orange_light,
                    android.R.color.holo_red_light};

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

        mRecyclerView = (RecyclerView) findViewById(R.id.recycleView);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this,
                LinearLayoutManager.VERTICAL, false));
        mAdapter = new DemoAdapter(this);
        mRecyclerView.setAdapter(mAdapter);

        initData();
    }

    private void initData() {
        List<DataModel> list = new ArrayList<>();

        for (int i = 0; i < 20; i++) {
            int type = (int) (Math.random() * 3 + 1);
            DataModel data = new DataModel();
            data.avatarColor = colors[type - 1];
            data.type = type;
            data.name = "Name: " + i;
            data.content = "Content: " + i;
            data.contentColor = colors[(type + 1) % 3];
            list.add(data);
        }
        mAdapter.addList(list);
        mAdapter.notifyDataSetChanged();
    }
}

DemoAdapter.class

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
package com.example.tony.recyclerviewdemo;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

/*
 * Created by Tony on 2016/12/3.
 */

public class DemoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{


    private LayoutInflater mLayoutInflater;

    private List<DataModel> mList = new ArrayList<>();

    public DemoAdapter(Context context) {
        mLayoutInflater = LayoutInflater.from(context);
    }

    public void addList(List<DataModel> list) {
        mList.addAll(list);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case DataModel.TYPE_ONE:
                return new TypeOneViewHolder(mLayoutInflater.inflate(R.layout.item_type_one, parent, false));
            case DataModel.TYPE_TWO:
                return new TypeTwoViewHolder(mLayoutInflater.inflate(R.layout.item_type_two, parent, false));
            case DataModel.TYPE_THREE:
                return new TypeThreeViewHolder(mLayoutInflater.inflate(R.layout.item_type_three, parent, false));
        }
        return null;
    }



    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((TypeAbstractViewHolder) holder).bindHolder(mList.get(position));
    }

    @Override
    public int getItemViewType(int position) {
        return mList.get(position).type;
    }

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

DataModel.class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.example.tony.recyclerviewdemo;

/**
 * Created by Tony on 2016/12/3.
 */

public class DataModel {

    public static final int TYPE_ONE = 1;

    public static final int TYPE_TWO = 2;

    public static final int TYPE_THREE = 3;

    public int type;

    public int avatarColor;

    public String name;

    public String content;

    public int contentColor;
}

TypeAbstractViewHolder.class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.example.tony.recyclerviewdemo;

import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by Tony on 2016/12/3.
 */

public abstract class TypeAbstractViewHolder extends RecyclerView.ViewHolder{

    public TypeAbstractViewHolder(View itemView) {
        super(itemView);
    }
    public abstract void bindHolder(DataModel model);
}

TypeOneViewHolder.class

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
package com.example.tony.recyclerviewdemo;

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Tony on 2016/12/3.
 */

public class TypeOneViewHolder extends TypeAbstractViewHolder {

    private ImageView avatar;

    private TextView name;

    public TypeOneViewHolder(View itemView) {
        super(itemView);

        avatar = (ImageView) itemView.findViewById(R.id.avatar);
        name = (TextView) itemView.findViewById(R.id.name);
    }
    //ViewHolder数据和外面数据绑定起来
    @Override
    public void bindHolder(DataModel model) {
        avatar.setBackgroundResource(model.avatarColor);
        name.setText(model.name);
    }
}

TypeTwoViewHolder.class

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
package com.example.tony.recyclerviewdemo;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Tony on 2016/12/3.
 */

public class TypeTwoViewHolder extends TypeAbstractViewHolder {

    private ImageView avatar;

    private TextView name;

    private TextView content;

    public TypeTwoViewHolder(View itemView) {
        super(itemView);

        avatar = (ImageView) itemView.findViewById(R.id.avatar);
        name = (TextView) itemView.findViewById(R.id.name);
        content = (TextView) itemView.findViewById(R.id.content);
    }
    //ViewHolder数据和外面数据绑定起来
    @Override
    public void bindHolder(DataModel model) {
        avatar.setBackgroundResource(model.avatarColor);
        name.setText(model.name);
        content.setText(model.content);
    }
}

TypeThreeViewHolder.class

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
package com.example.tony.recyclerviewdemo;

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Tony on 2016/12/3.
 */

public class TypeThreeViewHolder extends TypeAbstractViewHolder {

    private ImageView avatar;

    private TextView name;

    private TextView content;

    private ImageView contentImage;

    public TypeThreeViewHolder(View itemView) {
        super(itemView);

        avatar = (ImageView) itemView.findViewById(R.id.avatar);
        contentImage = (ImageView) itemView.findViewById(R.id.contentImage);
        name = (TextView) itemView.findViewById(R.id.name);
        content = (TextView) itemView.findViewById(R.id.content);
    }
    //ViewHolder数据和外面数据绑定起来
    @Override
    public void bindHolder(DataModel model) {
        avatar.setBackgroundResource(model.avatarColor);
        name.setText(model.name);
        contentImage.setBackgroundResource(model.contentColor);
        content.setText(model.content);
    }
}
# ,

喜欢这篇文章？打赏一下作者吧

Java-图书管理系统
自动化测试发送邮件异常

评论

关注我

链接

分类

标签云

Allure2 CI/CD ECS Email Excel Java Json MySQL Pytest Python Smtplib Ubuntu golang hexo博客 jenkins windows 其他 可持续集成 大数据测试 学习 安卓 数据 测试报告 移动开发 阿里云服务器

最新文章

归档

标签

Allure2 1
CI/CD 1
ECS 1
Email 1
Excel 1
Java 1
Json 1
MySQL 1
Pytest 1
Python 3
Smtplib 1
Ubuntu 1
golang 3
hexo博客 1
jenkins 1
windows 1
其他 3
可持续集成 1
大数据测试 1
学习 2
安卓 1
数据 1
测试报告 1
移动开发 1
阿里云服务器 1

最新文章

归档

标签

Allure2 1
CI/CD 1
ECS 1
Email 1
Excel 1
Java 1
Json 1
MySQL 1
Pytest 1
Python 3
Smtplib 1
Ubuntu 1
golang 3
hexo博客 1
jenkins 1
windows 1
其他 3
可持续集成 1
大数据测试 1
学习 2
安卓 1
数据 1
测试报告 1
移动开发 1
阿里云服务器 1
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×