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();

            }
        });
    }
}

运行之后效果如图:
ListView

版权所有,转载标明出处

扫描二维码关注公众号,回复: 8799734 查看本文章
发布了50 篇原创文章 · 获赞 3 · 访问量 5180

猜你喜欢

转载自blog.csdn.net/Ace_bb/article/details/104066710