Android：＜19＞ListView的运用

在我们日常收发短信的时候常常会看到一个效果，就是我们在QQ、微信的聊天过程成，记录会一直发下去然后我们往下滑或者往上滑会一直有数据刷出来，这个呢其实就可以用到我们的listview，在讲这个高级组件之前，我们先复习一下上一期的内容，上一期我们讲了gridview，这是我们安卓的应用界面常用的一个布局，使用的是simpleadpter适配器将我们的list<Map<String,object>>数据加载到界面上，我们将一些数据存储到这个列表里面，可以使用循环遍历，然后使用：
 

 simpleAdapter = new SimpleAdapter(this,items,R.layout.mygrid_items,from,to);

创建好我们的适配器设置到gridview组件上面就可以了；这里的参数要特别注意，第一个是上下文，第二是我们的数据（list<Map<String,object>>），第三个是布局文件，因为我们应用程序的图片和下面的文字其实是一个布局，第四个是map中的键集合，最后一个就是布局文件中的组件id；

毕竟键和组件id不可能只有一个，肯定是多个，所以我们就直接拿数组存储就可以了；

这一期呢，我们其实也是差不多的套路，只是我们就不使用专门的适配器了，我们自定义适配器，为了方便大家理解，就直接上项目吧：

是这样的，我们呢就写一个简简单单的聊天界面，大家可以先分析一下哈，怎么实现的呢？

不用想是咱们今天要讲的listview，但是呢还有一些其他学过的知识，比如自定义适配器啊、还有就是自定义布局、还有常用的list<Map<String,object>>，其实这个数据结构其实不应该是在安卓里学习的，而是Java基础，为什么我要将它和安卓里的知识一起提到呢，因为在制作界面的时候我们需要用到大量的数据，而常用的集合和数列又非常的常见，用到的次数是非常的多，所以大家还是要了解一下；那么，话不多说，咱们开整：

1、首先了解一些我们listview的一些属性：

    <ListView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/et_wechat_input"
        android:id="@+id/lv_wechat_message"
        android:background="#c0c0c0"
        android:divider="@android:color/white"
        android:dividerHeight="2dp"
        app:layout_constraintTop_toBottomOf="@id/tv_wechat_title"/>

除去一些认识的，这里新出现的有divider其实就是下面的分割线的颜色，dividerheight就是分割线的高了，这是我代码里面用到的两个属性，当然，他还有entries属性，这里可以放一个数组，当然效果大家可想而知，不就是垂直显示一些列的字符串数据呗，就像之前我们用到的spinner一样的，还有一个什么快速滚动：

android:fastScrollEnabled="true"

大家感兴趣可以加上去，我这里就不演示了，我们简简单单的制作一个这样的布局出来就可以了：

 当然是自定义的界面，大家可以按照自己的喜好来，不过一定要注意id要有特点，不要和别的重掉了，这里我们就使用约束布局吧，大家没有忘记使用吧？

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyWeiChatActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="周董"
        android:textSize="30sp"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:id="@+id/tv_wechat_title"
        />

    <ListView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/et_wechat_input"
        android:id="@+id/lv_wechat_message"
        android:background="#c0c0c0"
        android:divider="@android:color/white"
        android:fastScrollEnabled="true"
        android:dividerHeight="2dp"
        app:layout_constraintTop_toBottomOf="@id/tv_wechat_title"/>

    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/et_wechat_input"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv_wechat_send"
        app:layout_constraintTop_toBottomOf="@id/lv_wechat_message"
        app:layout_constraintLeft_toLeftOf="parent"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="发送"
        android:textSize="40sp"
        android:gravity="center"
        android:background="#00ff00"
        android:id="@+id/tv_wechat_send"
        android:layout_marginLeft="10dp"
        app:layout_constraintTop_toBottomOf="@id/lv_wechat_message"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/et_wechat_input"/>




</androidx.constraintlayout.widget.ConstraintLayout>

2、再次就是我们的自定义布局文件了，其实这个布局文件也按照喜好来就可以还记得怎么建吧，就是到layout文件夹下面创建就可以，可以看到这里使用了一个背景图在Textview中，其实就是我们看到的气泡，有两种气泡，一个在左边一个在右边，这个背景图是安卓里面的特有图片，叫做9号图片，有什么不同呢，就是我们可以根据需要来设置缩放的范围：

 至于这个气泡大家就到阿里巴巴矢量图片库开下载就可以，要注意的是我们下载过来放进去之后

 大家点击右击加进来的图标点击下面的create 9-patch file就可以了，安卓自己就会常见好一个相对应的9号图片，点击这个9号图片我们就可以通过点击和拖拽图片边缘来选择需要缩放的范围，当然具体的操作大家试一试就会了，还是很简单的，我这里也不演示了；

也有一个要注意的地方就是我是放在了mipmap下面，因为可以适应一下Textview，因为我下载的图片有这么长，要是刚在drawable里面就会霸占很多空间，我发一条短信哪怕只有一个字都会有这么长，所以推荐大家要不就下载一个窄一点的气泡，要不就像我一样放在mipmap下面就行了；

<?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:orientation="horizontal"
    android:gravity="left">
    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/img_left_icon"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:scaleType="fitXY"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:textSize="20sp"
        android:gravity="center"
        android:textColor="#fff"
        android:text="hello"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@mipmap/left"
        android:id="@+id/tv_left_message"
        android:layout_marginLeft="10dp"/>


</LinearLayout>

这是左边的布局文件，使用的是简单的线性布局，美观的话大家可以后面自己改改；

 效果大概就是这样的，另外一个就不做讲解了，一个是左边的，一个是右边的，气泡其实也是，包括我们的头像啊啥的，当然操作都差不多我这里就做一个讲解，另外一个：

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:textSize="20sp"
        android:text="hello"
        android:gravity="center"
        android:textColor="#fff"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@mipmap/right"
        android:id="@+id/tv_right_message"
        android:layout_marginRight="10dp"/>


    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/img_right_icon"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:scaleType="fitXY"/>



</LinearLayout>

3、创建好了布局文件之后我们再来想一想实现的逻辑，我们有一个是自己发的信息，一个是别人发的信息，所以我们可以新建一个信息类来表示，

package com.example.mygridviewactivity;

public class MyMessage {
    //1.1 定义一个消息类，需要区分是自己的还是别人的

    String content;
    int msgtype;

    public MyMessage(String content, int msgtype) {
        this.content = content;
        this.msgtype = msgtype;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public int getMsgtype() {
        return msgtype;
    }

    public void setMsgtype(int msgtype) {
        this.msgtype = msgtype;
    }
}

 这个类里面就只有两个属性，一个是信息一个是类型，在我们适配器进行界面数据显示的时候，我们就需要判断信息类型然后再获取相应的布局文件对象，这个信息类是分辨信息和实现区分哪一个布局的关键；

4、然后就是我们的自定义适配器，这个适配器还记得怎么做吗？我们要继承一个父类baseadpater,重写里面的各个方法，这里我就讲解最后一个最重要的，前面四个不懂就去翻翻前面的吧：

package com.example.mygridviewactivity;

import android.content.Context;
import android.media.Image;
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 org.w3c.dom.Text;

import java.util.List;
import java.util.Map;

//1.2 定义一个自定义适配器用来加载布局
public class WeChatView extends BaseAdapter {
    //1.3 需要上下文和列表
    Context context;
    List<Map<String,Object>> mapList;
    @Override
    public int getCount() {
        return mapList.size();
    }

    @Override
    public Object getItem(int i) {
        return mapList.get(i);
    }

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

    public WeChatView(Context context, List<Map<String, Object>> mapList) {
        this.context = context;
        this.mapList = mapList;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        //1.4 我们根据信息类型来设置组件的内容
        //拿到第i个数据,创建好布局文件的组件
        MyMessage message = (MyMessage) mapList.get(i).get("message");
        ImageView imageView;
        TextView textView;
        if(message.getMsgtype() >= 1){
            //1.5 说明是别人发的
            view = LayoutInflater.from(context).inflate(R.layout.message_left,null);
            imageView = view.findViewById(R.id.img_left_icon);
            textView = view.findViewById(R.id.tv_left_message);
        }else{
            //说明是我发的
            view = LayoutInflater.from(context).inflate(R.layout.message_right,null);
            imageView = view.findViewById(R.id.img_right_icon);
            textView = view.findViewById(R.id.tv_right_message);
        }
        textView.setText(message.getContent());
        imageView.setImageResource(Integer.parseInt(mapList.get(i).get("icon").toString()));

        return view;
    }
}

当然，我们需要定义一个上下文和一个数列，里面放的是map，然后getview方法里面获取到一个map，是第i个位置的，根据这个map我们就可以判断里面的数据类型和拿到里面的信息，这里我用了一个if判断，最后设置了自定义布局文件中的组件的图片和消息，最后返回view，总的就一个简单的思路，定义变量，什么数组啊、组件啊，然后通过判断啥的区分一下情况，最后设置以下内容就可以；

5、不得不说，对于一个需要放置数据的组件来说，需要设置到的数组是真的多：

package com.example.mygridviewactivity;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;

public class MyWeiChatActivity extends AppCompatActivity {

    //2.1 新建好各个组件和数组
    ListView lv_wechat_message;
    TextView tv_wechat_send;
    EditText et_wechat_input;
    WeChatView weChatView;
    int[] icons ;
    List<Map<String,Object>> mapList;
    Random random;
    MyMessage message;
    Map<String,Object> map;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_wei_chat);
        //调用函数
        init_datas();

        //2.3 给按钮添加单击响应函数
        tv_wechat_send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //获取到信息和一个随机数
                map = new HashMap<String,Object>();
                message = new MyMessage(et_wechat_input.getText().toString(),random.nextInt()*2);
                if(message.getMsgtype() >= 1){
                    map.put("icon",icons[0]);
                }else{
                    map.put("icon",icons[1]);
                }

                map.put("message",message);
                mapList.add(map);
                weChatView = new WeChatView(MyWeiChatActivity.this, mapList);

                lv_wechat_message.setAdapter(weChatView);
            }
        });
    }

    //2.2 编写数据初始化函数
    private void init_datas(){

        //实例化好各个组件和对象
        lv_wechat_message = findViewById(R.id.lv_wechat_message);
        tv_wechat_send = findViewById(R.id.tv_wechat_send);
        et_wechat_input = findViewById(R.id.et_wechat_input);
        random = new Random();

        mapList = new ArrayList<Map<String,Object>>();
        icons = new int[]{R.drawable.zhou,R.drawable.tou10};

    }
}

还是老套路，这里的逻辑就是初始化各个组件和变量然后给按钮设置一个监听函数，在函数里面我们获取到输入的数据，设置好我们的头像，放到map里面去，再放在list里面去，在我们的自定义适配器里面需要用到list，然后实例化一个适配器，最后将适配器放入我们的listview就可以了；

好了，最后就是一些调整类的操作，大家都头像啥的按照自己喜好来既可以了，对了，这里我实现的是随机产生信息类型的情况，所以我就使用了一个随机数：

message = new MyMessage(et_wechat_input.getText().toString(),random.nextInt()*2);

同样也是Java基础，就是随机产生0~2之间的一个数；

那么这一期就到这，学会了就快去试试吧！