Android UI入门(第二篇:ListView控件的使用)
ListView是什么
ListView是一个列表控件,一般我们显示一个列表类型的数据的时候使用,比如我们想展示用户列表,类似坐标事用户头像,右边是用户名称的列表。运行效果 效果大概是下面这样。
用户列表界面
来我们看看要如何实现这个页面吧。
第一步,先创建我们要使用的数据
首先我们看到了这个页面显示的是用户列表。但是具体显示什么内容呢?其实ListView是不知道的,那么我们就应该告诉ListView,我们想显示的数据是什么。正如我们从图中看到的一样,包含了多个用户的信息,那么我们就需要创建一个用户的集合来保存这些信息。至于如何保存这些信息呢?是List?Map?或者数组?因为保存数据用哪个其实都是可以的,但是有一点需要注意就是这个列表是有序的,就是通过索引可以获取到这个元素。那么这里Map就非常不适合。但是不代表Map不能使用,只是就算使用了也非常麻烦,所以跟不能使用没啥区别。但是List或者数组都可以,而且使用起来几乎没什么区别。在正常的项目开发中一般会使用List。这是因为相对于数组List有很多有点,比如List是可变长的,而数组不是。所以这里建议大家使用List。下面使用List创建一个用户列表。代码如下
//创建一个用户的list
List<UserBean> userList = new ArrayList<UserBean>();
for (int i = 0; i < 5; i++) {
UserBean user = new UserBean();
user.setName("name:" + i );
userList.add(user);
}
那么如何使用ListView呢
其实跟我们使用TextView差不多。只是ListView需要一个适配器。
这里我们新建一个自定义适配器。看看代码如何写,然后后面会继续讲如何自定义适配器
ListView lv_user_list = (ListView) findViewById(R.id.lv_user_list);
lv_user_list.setAdapter(adapter);
大家可以看到ListView 获取过程跟TextView是一样的。
取得ListView 对象之后需要位ListView 设置一个适配器。
这里adapter就是我设置的适配器,下面讲一下适配器是如何创建的
第二步,使用适配器Adapter
Adapter我们一般叫适配器,又是一个抽象的概念。这里先不纠结什么是适配器。先看看我们如何使用吧。使用适配器有两种方式第一种是直接new一个系统实现的适配器。但是这样做有个问题就是系统实现的效果,跟我想要的一般情况下是不一样的。所以大多时候我们都是自己去实现一个适配,也就是下面说的自定义适配器。
自定义适配器
自定义适配器也非常简单。
根据名字我们大概能知道作用了,适配器就是适配数据上面的userList和ListView的工具。
也就是说数据和View是通过适配器建立起来的联系。
那么适配器就需要传人一个list使用,这里传人一个Context,是因为android很多地方都会用到,现在先不用管这个Context是什么东西,以后学到的时候自然会慢慢说。
自定义Adapter的实现就是 创建一个类继承BaseAdapter。这个类是系统实现的,我们只需要继承就好。如何传人数据呢,可以使用构造方法。或者别的方式,这里暂时使用构造方法去做。
public class UserListAdapter extends BaseAdapter {
List<UserBean> userList;
Context mContext;
public UserListAdapter(Context context, List<UserBean> userList) {
this.mContext = context;
this.userList = userList;
}
}
这个类大概这么写就好了。
但是这么写会报错 要实现这个类的虚拟方法。这里先直接给出实现吧
public class UserListAdapter extends BaseAdapter {
List<UserBean> userList;
Context mContext;
public UserListAdapter(Context context, List<UserBean> userList) {
this.mContext = context;
this.userList = userList;
}
@Override
public int getCount() {
return userList.size();
}
@Override
public Object getItem(int position) {
return userList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_user, null);
}
String userName = userList.get(position).getName();
TextView tv_name = (TextView) convertView.findViewById(R.id.tv_name);
tv_name.setText(userName);
return convertView;
}
}
这里引用了一个布局文件就是我们显示的每一行的布局
这个代码先写个测试的吧
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="horizontal"
android:padding="10dp"
tools:context="com.iscoding.demo.list.MainActivity">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:gravity="center"
android:src="@mipmap/ic_launcher_round" />
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:text="text" />
</LinearLayout>
然后这个Adapter就实现了
这里还有几个点写的不够详细,时间不够了。
有时间我补上。
这样一个列表就能运行起来了。其实还是比较简单的