第67篇 Android Studio实现聊天记录界面-ListView多形式界面_android studio仿聊天界面

1.需求

这是QQ的聊天界面
这呢其实用ListView多形式界面就可以实现，可以看出：
一个是图片在左边，文字在右边，
而另一个是图片在右边，文字在左边，
而且文字和图片是紧挨着的
如此我们只需改变图片和文本的位置即可。
先看看文件目录：

2.文件目录

实现ListView那基本就需要数据类和适配器类，再加一个活动类就可以了，复杂的工程就得往里面加很多东西。
然后添加两张图片，即两个头像
再者是三个布局：
主布局只有一个ListView
左信息界面是一个图形一个文本
右信息界面也是一个图形一个文本
ok，下面逐一说明：
其实适配器昨天已经说过了，下面只说改变的地方。

3.主界面布局

还是昨天的代码，一点没变，你可以按照自己的需要修改。

4.左边信息界面布局

就做了点点修改。

5.右边信息界面布局

把左边布局的控件位置变换，然后让文本内容靠右显示。

6.数据类Data

剩下的是get和set函数，一键生成即可

7.MyAdapter类

其他的都是昨天的代码，一点没变，这里我们先判断当前行的类型，看是左边还是右边，是右边就给右边界面的布局，是左边就给左边的布局。

8.主活动类

在数据初始化的时候每隔一个显示不同类型。

9.效果

还可以吧，如果你先显示图片啊，视频啊什么的，都可以自己修改布局和实现代码，都ok拉。

10.代码

10.1.主界面

<?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="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listView_information"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13

10.2.左边布局

<?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:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/image_left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/right_image"/>
    <TextView
        android:id="@+id/txt_left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_weight="7"
        android:text="@string/txt_information"/>

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

10.3.右边布局

<?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="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/txt_right"
        android:layout_width="0dp"
        android:gravity="right"
        android:layout_height="wrap_content"
        android:layout_weight="7"
        android:textSize="20sp"
        android:text="@string/txt_information"
        tools:ignore="RtlHardcoded" />
    <ImageView
        android:id="@+id/image_right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/right_image"
        android:contentDescription="@string/todo" />

</LinearLayout>
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

10.4.Data类

package com.example.listviewadapter;

public class Data {
    private int imageId;
    private String text;
    private int type;

    public Data() {
    }

    public Data(int imageId, String text, int type) {
        this.imageId = imageId;
        this.text = text;
        this.type = type;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }
}

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

10.5.MyAdapter类

package com.example.listviewadapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.LinkedList;

public class MyAdapter extends BaseAdapter {

    private Context mContext;
    private LinkedList<Data> myData;

    public MyAdapter() {}

    public MyAdapter(LinkedList<Data> myData, Context mContext) {
        this.myData = myData;
        this.mContext = mContext;
    }

    @Override
    public int getCount() {
        return myData.size();
    }

    @Override
    public Object getItem(int position) {
        return myData.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        TextView textView;
        if(myData.get(position).getType() == 0){
            convertView = LayoutInflater.from(mContext).
                    inflate(R.layout.left_information_layout,parent,false);
            imageView = convertView.findViewById(R.id.image_left);
            textView = convertView.findViewById(R.id.txt_left);
        }
        else {
            convertView = LayoutInflater.from(mContext).
                    inflate(R.layout.right_information_layout,parent,false);
            imageView = convertView.findViewById(R.id.image_right);
            textView = convertView.findViewById(R.id.txt_right);
        }
        imageView.setImageResource(myData.get(position).getImageId());
        textView.setText(myData.get(position).getText());

        return convertView;
    }

}
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
60
61
62

10.6.活动类

package com.example.listviewadapter;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ListView;

import java.util.LinkedList;

public class MainActivity extends AppCompatActivity {

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

        LinkedList<Data> myData = new LinkedList<>();
        for(int i = 0;i < 50;i++){
            if(i % 2 == 0){
                myData.add(new Data(R.drawable.left_image,"在吗",0));
            }
            else{
                myData.add(new Data(R.drawable.right_image,"在",1));
            }
        }

        ListView listView = findViewById(R.id.listView_information);
        listView.setAdapter(new MyAdapter(myData,this));
    }
}
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

完结