安卓开发

Android UI入门(第二篇:ListView控件的使用)

2018-01-03  本文已影响0人  IsCoding

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就实现了
这里还有几个点写的不够详细,时间不够了。
有时间我补上。
这样一个列表就能运行起来了。其实还是比较简单的

上一篇下一篇

猜你喜欢

热点阅读