Android studio APP开发 ListView控件的建立和使用

ListView控件

ListView 是Android APP开发中非常重要的部分，用列表展示信息，在APP中非常常见，比如电话本中的联系人信息，微信和QQ中的好友列表信息，都是用ListView做的。

创建ListView的思路

1. 很容易想到，建一个ListView，首先要知道在哪个界面展示ListView视图，这是要创建的第一个layout布局文件。
2. QQ好友和联系人中的信息都是用列表展示的，每条信息就是一个控件，这个控件的布局是需要设计的，所以这里需要另外一个layout布局文件来设计用以展示用户信息的控件。也就是视图
3. QQ好友和联系人 就是一个对象，所以需要建立一个类，这里取名为UserInfo，即用户的信息类，存放用户的名字，年龄，头像等
4. 现在视图和数据都有了，要做的就是将视图和数据关联起来。在Android 开发里每一个ListView都要绑定一个Adapter。Adapter实现了将视图和数据的绑定
5. 一般QQ好友或联系人不止一个，所以需要一个数组来存放信息，但用传统的数组行不通，因为我们一开始并不知道有多少个好友或联系人，经常需要新增好友和联系人。所以这里用ArrayList类 来定义长度可变的数组。

创建ListView的步骤

创建视图界面

先新建一个Activity文件， 取名为ListViewDemoActivity（可自定义）。代码如下：

public class ListViewDemoActivity extends Activity {
    protected void onCreate(@Nullable Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
    	setContentView(R.layout.activity_listview_demo); //相关联的布局文件中有 ListView控件
	}
}

然后建立相应的布局文件，代码如下：

<?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">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="电话本"/>
    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

这样ListView视图文件就建立好了，但是需要在设置跳转事件从其他界面跳转到这个界面，代码这里不再重复。

建立用户信息类 UserInfo

QQ好友或联系人都是一个对象，需要抽象成一个类，作为因为类型。
新建UserInfo类代码如下：

import java.io.Serializable;

public class UserInfo implements Serializable {
    private String mUserName;
    private int mAge;
    private String mAvatarUrl;
    private float mWeight;
    public UserInfo(String mUserName, int mAge) {
        this.mUserName = mUserName;
        this.mAge = mAge;
    }

    public String getmUserName() {
        return mUserName;
    }

    public int getmAge() {
        return mAge;
    }

    public void setmUserName(String mUserName) {
        this.mUserName = mUserName;
    }

    public void setmAge(int mAge) {
        this.mAge = mAge;
    }

    public String getAvatarUrl() {
        return mAvatarUrl;
    }

    public void setAvatarUrl(String avatarUrl) {
        mAvatarUrl = avatarUrl;
    }

    public float getWeight() {
        return mWeight;
    }

    public void setWeight(float weight) {
        mWeight = weight;
    }
}

建立视图和数据绑定的类Adapter

现在需要建立一个类用来将数据和视图进行绑定，
建立一个PhoneBookAdapter 类，代码如下：

import android.content.Context;
import android.text.Layout;
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.ArrayList;
import java.util.List;

    public class PhoneBookAdapter extends BaseAdapter {
    private Context mContext;
    private LayoutInflater mLayoutInfalter;
    // 10 中定义 用ArrayList来存储数据，新增数据
    private List<UserInfo> mUserInfos = new ArrayList<>();

    //构造函数，初始化
    public PhoneBookAdapter(Context context, List<UserInfo> userInfos){
        mContext = context;
        mUserInfos = userInfos;
        mLayoutInfalter =(LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
    @Override
    public int getCount() {
        // 有多少条数据
        return mUserInfos.size();
    }

    @Override
    public Object getItem(int position) {  //position就是这条数据的位置
        //返回某一条数据,
        return mUserInfos.get(position);
    }

    @Override
    public long getItemId(int position) {

        return position;
    }

    //返回某一条数据的视图，因为每一条数据都会有自己的视图
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        //返回一个视图，convertView 就是找到要绑定的视图，LayoutInfalter的主要功能就是解析View
        // 将Layout从xml文件从解析出来，解析成View，一个视图
        convertView=mLayoutInfalter.inflate(R.layout.item_phone_book_friend,null);

        //获取控件，从视图中获取了控件
        TextView nameTextView= (TextView) convertView.findViewById(R.id.name_text_view);
        TextView ageTextView = (TextView) convertView.findViewById(R.id.age_text_view);
        ImageView avatarimageView = (ImageView) convertView.findViewById(R.id.avatar_image_view);
        //和数据之间进行绑定
        nameTextView.setText(mUserInfos.get(position).getmUserName()); //设置文本
        ageTextView.setText(String.valueOf(mUserInfos.get(position).getmAge()));
        avatarimageView.setImageResource(R.drawable.ic_launcher_foreground);

        return convertView;  //返回一个视图
    }
}

代码解释已在注释当中，可以通过这个类得到，用户的信息，数量，并且把用户信息和控件绑定。

定义展示每一个用户信息的控件：

在ListView中，用户的信息用列表来展示，每一条信息都相当于一个控件，并且可以添加点击事件等。所以需要建立一个layout文件来设计控件的布局。个性化是设计也主要在这部分。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/avatar_image_view"
        android:src="@drawable/ic_launcher_background"
        android:layout_width="48dp"
        android:layout_height="48dp"/>

    <TextView
        android:id="@+id/name_text_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_toRightOf="@+id/avatar_image_view"
        android:text="@string/app_name"/>
    <TextView
        android:id="@+id/age_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/name_text_view"
        android:layout_toRightOf="@+id/avatar_image_view"
        android:text="4岁"/>

</RelativeLayout>

在ListView中将ListView和Adapter绑定，并设置点击事件

用户信息类，将数据和控件绑定的PhoneBookDemoAdapter都准备好了，现在要做的就是将ListView和Adapter绑定，并且添加用户数据，也对每一个控件设置点击事件。
代码如下：

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import androidx.annotation.Nullable;

import java.util.ArrayList;
import java.util.List;
// 这个ListViewDemoActivity是由 MainActivity点击进入，也就是ListView展示的界面
public class ListViewDemoActivity extends Activity {
    private ListView mphoneBookListView;
    private List<UserInfo> userInfos; //声明一个List的全局变量 userInfo
    //UserInfo 就是自定义的一个类，用来存储用户的信息，User iformationn
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_listview_demo); //相关联的布局文件中有 ListView控件

         mphoneBookListView = (ListView) findViewById(R.id.list_view); //取得这个ListView控件


         // 10  向userInfos中添加元素，在这里添加用户的信息数据
        userInfos = new ArrayList<>();
        userInfos.add(new UserInfo("刘小明",16));
        userInfos.add(new UserInfo("刘要明",16));
        userInfos.add(new UserInfo("刘叁明",16));
        userInfos.add(new UserInfo("刘时明",16));
        userInfos.add(new UserInfo("刘瑟明",16));

        //设置这个ListVIew的Adapter ， PhoneBookAdapter进行了视图和数据的绑定
        //在引用PhoneBookAdapter类定义对象时初始化，用上面定义的ArrayList初始化定义
        PhoneBookAdapter phoneBookAdapter= new PhoneBookAdapter(ListViewDemoActivity.this, userInfos);
         mphoneBookListView.setAdapter(phoneBookAdapter);

         //设置点击事件
        mphoneBookListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(ListViewDemoActivity.this,userInfos.get(position).getmUserName()+"被我点击了",Toast.LENGTH_LONG).show();

            }
        });
    }
}

运行之后效果如图：

版权所有，转载标明出处