Android高级控件之ListView

最新推荐文章于 2022-04-08 23:18:41 发布

小红妹

最新推荐文章于 2022-04-08 23:18:41 发布

阅读量787

点赞数

分类专栏： Android Android UI设计文章标签： android listview 安卓初学者控件

本文链接：https://blog.csdn.net/L_201607/article/details/60953612

版权

Android 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Android UI设计

6 篇文章 0 订阅

订阅专栏

Android高级控件有ListView（列表视图）、GridView（格子视图）、SeekBar（拖动条）、Gallery（画廊）；其实Gallery用的很少。那么这次我们来学习ListView的使用吧！在 Android中，ListView是用来显示列表的控件。

要让ListView为你所用，你需要三件法宝，一：监听事件反馈的方法，二：两种加载运行ListView的方法，三：三种适配器（Adapter）的使用。好了，我们一件件法宝来学吧！

法宝一：既然是列表控件，那么和用户互动是必不可少的，互动就会有事件的触发；如果用户通过单击列表的任意条目有事件反馈，那么我们就需要注册一个OnItemClickListener来接听事件。

法宝二：加载ListView有两种方法，第一种继承Activity，自己实现ListView标记（ID）；第二种事继承ListActivity，系统实现ListView标记（ID）。

法宝三：通过上面讲的两种方式来使用ListView控件时，都要通过适配器（Adapter）来设置显示列表的内容，可以使简单的数组ArrayAdapter，可以是复杂的游标SimpleCursorAdapter，也可以采用继承BaseAdapter来自定义绑定数据进行显示,BaseAdapter它本身是一个抽象类，实现了ListAdapter和 SpinnerAdapter，并且是ArrayAdapter和SimpleAdapter的父类，我们通过它可以更加随心的定制各种视图。

法宝三很重要，那么接下来详细讲解法宝三里的各个适配器（Adapter）的使用且有相应的代码例子。先从简单的开始，顺序为：数组ArrayAdapter，集合SimpleAdapter，游标SimpleCursorAdapter，自定义BaseAdapter。

<--------------------------------------------------------------------------------------------------------ArrayAdapter----------------------------------------------------------------------------------------------------------->

ArrayAdapter最为简单，话说它只能展示一行行的字或图片。默认情况下只能显示文本，如果想显示其他的View控件，比如ImageView需要重写getView方法，通常是将一个数组或者集合放在中ArrayAdapter。Adapter三个参数，第一个参数表示引用当前上下文,第二个参数表示列表条目显示的布局，这里我们调用了系统的布局，第三个参数表示要绑定显示的数据。代码例子如下：

activity_list.xml

<?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="vertical">

    <ListView
        android:id="@+id/id_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Activity类

package com.xhm.dell.mylistview; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.Toast; /* 这里我们用到法宝二的第一种方法加载ListView，简称靠自己  */ public class ListActivity extends Activity { //定义一个ListView成员变量来接受ListView对象  private ListView initListView;  //定义数组并初始化  private String[] idList={"一月","二月","三月","四月","五月","六月",  "七月","八月","九月","十月","十一月","十二月"};  @Override  protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);  setContentView(R.layout.activity_list);  //通过ID获得实例  initListView=(ListView) findViewById(R.id.id_list);  initData();  } //初始化Adapter并将其绑定到ListView控件上  private void initData(){ //实例化一个数组，  //Adapter三个参数，第一个参数表示引用当前上下文,第二个参数表示列表条目显示的布局  //这里我们调用了系统的布局，第三个参数表示要绑定显示的数据。  ArrayAdapter<String> arrays=new ArrayAdapter<String>(this,  android.R.layout.simple_list_item_1,idList);  //调用ListView控件的方法绑定  initListView.setAdapter(arrays);  //通过局部类来实例化单击条目的监听器  initListView.setOnItemClickListener(onItemClickListener);  } AdapterView.OnItemClickListener onItemClickListener=new AdapterView.OnItemClickListener() { @Override  //parent 绑定的Adapter，view 条目的显示，position 对应的位置，id 条目的id。  public void onItemClick(AdapterView<?> parent, View view, int position, long id) { //通过Toast来响应列表条目的单击事件  Toast.makeText(ListActivity.this,"点击的位置是"+position,  Toast.LENGTH_SHORT).show();  } }; }

效果图

<-------------------------------------------------------------------------------------------SimpleAdapter--------------------------------------------------------------------------------------->

SimpleAdapter有最好的扩充性，可以定义出各种效果。使用的数据一般都是HashMap构成的List，List的每一节对应ListView的每一行。HashMap的每个键值数据映射到布局文件中对应ID的组件上。因为系统没有对应的布局文件可用，可以自定义一个布局vlist.xml。使用SimpleAdapter可以自定义ListView的列表项，需要5个参数：

第一个参数：context对象；

第二个参数：List<? ExtendsMap<String,?>>集合对象

第三个参数：指定一个界面布局的ID

第四个参数：是一个String[]类型的参数

第五个参数：是一个int[]类型的参数

activity_list

<?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="vertical">

    <ListView
        android:id="@+id/id_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

layout_list.xml

<?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="vertical">

    <RelativeLayout
        android:id="@+id/id_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="200dp"
            android:id="@+id/id_imageView"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="New Text"
            android:id="@+id/id_textView"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/id_imageView"
            android:layout_toEndOf="@+id/id_imageView" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="New Text"
            android:id="@+id/id_textView2"
            android:layout_below="@+id/id_textView"
            android:layout_toRightOf="@+id/id_imageView"
            android:layout_toEndOf="@+id/id_imageView" />

    </RelativeLayout>
</LinearLayout>

package com.xhm.dell.mylistview;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;

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

public class InitActivity extends Activity {

    //数据源头像图片、昵称、签名
    private int initImage[]={R.drawable.kan,R.drawable.qq1,R.drawable.shui,
            R.drawable.bi1,R.drawable.bi2,R.drawable.bi3,R.drawable.bi4};
    private String initname[]={"一月","二月","三月","四月","五月","六月","七月"};
    private String qianming[]={"我可爱不","么么哒","萌萌哒","棒棒哒",
            "呵呵哒","热菜","小姐姐"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list);
        //获得实例
        ImageView initImageView=(ImageView) findViewById(R.id.id_imageView);
        TextView initTextView=(TextView) findViewById(R.id.id_textView);
        TextView initTextView2=(TextView) findViewById(R.id.id_textView2);
        ListView listView=(ListView) findViewById(R.id.id_list);
        //对象集合（这里不懂的童鞋请回去看JAVA集合哈）
        List<Map<String,Object>> initList=new ArrayList<Map<String,Object>>();
        Map<String,Object> initMap;
        for (int i = 0; i < initname.length; i++) {
            initMap=new HashMap<String,Object>();
            initMap.put("initImage",initImage[i]);
            initMap.put("initname",initname[i]);
            initMap.put("qianming",qianming[i]);
            initList.add(initMap);
        }
        SimpleAdapter initAdapter=new SimpleAdapter(this,initList,
                R.layout.layout_list,//这个布局要注意，别搞错了
                new String[]{"initImage","initname","qianming"},
                new int[]{R.id.id_imageView,R.id.id_textView,R.id.id_textView2});
        //把Adapter绑定到ListView控件上(这步很重要，别漏)
        listView.setAdapter(initAdapter);
    }
    
}

这里讲下，鄙人发现一个问题，SimpleAdapter 和ListView继承ListActivity的加载方式（法宝二第二种）不和，两者存在排斥关系。鄙人尝试过了，this.setListAdapter(initAdapter);// 这个报错，大家可以尝试一下，还请多多指教！

<---------------------------------------------------------------------------------------SimpleCursorAdapter----------------------------------------------------------------------------------->

SimpleCursorAdapter可以认为是SimpleAdapter对数据库的简单结合，可以方面的把数据库的内容以列表的形式展示出来。SimpleCursorAdapter构造函数前面的3个参数和ArrayAdapter一样，最后两个参数：一个包含数据库的列的String型数组，一个包含布局文件中对应组件ID的int型数组，其作用是自动的将型数组所表示的每一列数据映射到布局文件对应ID的组件上。这个暂时不说，知识有限，还请原谅！

<-------------------------------------------------------------------------------------------BaseAdapter--------------------------------------------------------------------------------------->

BaseAdapter话说这位姑娘好漂亮（开发用了各种Adapter之后感觉用的最舒服、最灵活的还是BaseAdapter），同时化妆比谁都复杂（尽管使用起来比其他适配器都麻烦），可是能有什么办法呢，她同时还能勾引好几个小鲜肉呢（她却能实现很多高级列表布局，比如ListView、ViewPager、GridView、Gallery、Spinner等等），咋都不说了，赶紧想办法娶她回家（有了她各种舒服）。但别忘了先了解人家背景呀（她是直接继承自接口类Adapter的）！人家也是有脾气的人（使用BaseAdapter必须写一个类继承它，同时BaseAdapter是一个抽象类，继承它必须实现它的方法），想要人家和你私奔是有条件的（使用BaseAdapter时需要重写很多方法，其中最重要的当属getView，因为这会涉及到ListView优化等问题），我们喜欢她漂亮又灵活之外，其实她最大亮点是容易理解大家的爱（ListView表现不仅仅在于展示数据，有时候还需要在里面加入按钮等控件，实现单独的操作，也不仅仅是这一行要来处理用户的操作，而是里面的控件要获得用户的焦点）。

布局一：activity_list.xml

<?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="vertical">

    <ListView
        android:id="@+id/id_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

layout_list.xml

<?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="vertical">

    <RelativeLayout
        android:id="@+id/id_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="200dp"
            android:id="@+id/id_imageView"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="New Text"
            android:id="@+id/id_textView"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/id_imageView"
            android:layout_toEndOf="@+id/id_imageView" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="New Text"
            android:id="@+id/id_textView2"
            android:layout_below="@+id/id_textView"
            android:layout_toRightOf="@+id/id_imageView"
            android:layout_toEndOf="@+id/id_imageView" />

    </RelativeLayout>
</LinearLayout>

Activity类：

package com.xhm.dell.mylistview;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

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

public class BaseActivity extends Activity {
    //声明变量
    private ListView lv;
    private List<Map<String, Object>> data;
    //数据源头像图片、昵称、签名
    private int initImage[]={R.drawable.kan,R.drawable.qq1,R.drawable.shui,
            R.drawable.bi1,R.drawable.bi2,R.drawable.bi3,R.drawable.bi4};
    private String initname[]={"一月","二月","三月","四月","五月","六月","七月"};
    private String qianming[]={"我可爱不","么么哒","萌萌哒","棒棒哒",
            "呵呵哒","热菜","小姐姐"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list);
        //获得控件
        lv=(ListView) findViewById(R.id.id_list);
        //获取将要绑定的数据设置到data中
        data = getData();
        //获得实例化的适配器
        MyAdapter adapter = new MyAdapter(this);
        //把Adapter绑定到ListView控件上(这步很重要，别漏)
        lv.setAdapter(adapter);
        //通过局部类来实例化单击条目的监听器
        lv.setOnItemClickListener(oCL);

    }
    /**添加一个得到数据的方法，方便使用*/
    private List<Map<String, Object>> getData() {
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        Map<String, Object> map;
        /**为动态数组添加数据*/
        for(int i=0;i<initname.length;i++) {
            map = new HashMap<String, Object>();
            map.put("img", initImage[i]);
            map.put("title",initname[i]);
            map.put("info", qianming[i]);
            list.add(map);
        }
        return list;//返回集合
    }
    //ViewHolder静态类
    static class ViewHolder {
        public ImageView img;
        public TextView title;
        public TextView info;
    }
    /** 新建一个类继承BaseAdapter，实现视图与数据的绑定*/
    public class MyAdapter extends BaseAdapter{
        //得到一个LayoutInfalter对象用来导入布局
        private LayoutInflater mInflater = null;
        /**构造函数*/
        private MyAdapter(Context context) {
            //根据context上下文加载布局，这里的是Demo17Activity本身，即this
            this.mInflater = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            //How many items are in the data set represented by this Adapter.
            //在此适配器中所代表的数据集中的条目数
            return data.size();
        }

        @Override
        public Object getItem(int position) {
            // Get the data item associated with the specified position in the data set.
            //获取数据集中与指定索引对应的数据项
            return position;
        }

        @Override
        public long getItemId(int position) {
            //Get the row id associated with the specified position in the list.
            //获取在列表中与指定索引对应的行id
            return position;
        }

        //Get a View that displays the data at the specified position in the data set.
        //获取一个在数据集中指定索引的视图来显示数据
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder = null;
            //如果缓存convertView为空，则需要创建View
            if(convertView == null) {
                holder = new ViewHolder();
                //根据自定义的Item布局加载布局
                convertView = mInflater.inflate(R.layout.layout_list, null);
                /**得到各个控件的对象*/
                holder.img = (ImageView)convertView.findViewById(R.id.id_imageView);
                holder.title = (TextView)convertView.findViewById(R.id.id_textView);
                holder.info = (TextView)convertView.findViewById(R.id.id_textView2);
                //将设置好的布局保存到缓存中，并将其设置在Tag里，以便后面方便取出Tag
                convertView.setTag(holder);
            }else {
                //取出ViewHolder对象
                holder = (ViewHolder)convertView.getTag();
            }
            /**设置TextView显示的内容，即我们存放在动态数组中的数据*/
            holder.img.setBackgroundResource((Integer)data.get(position).get("img"));
            holder.title.setText((String)data.get(position).get("title"));
            holder.info.setText((String)data.get(position).get("info"));
            //返回convertView
            return convertView;
        }


    }
    /**可以在此添加点击事件*/
    AdapterView.OnItemClickListener oCL=new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Toast.makeText(BaseActivity.this,position+"月",Toast.LENGTH_SHORT).show();
        }
    };
}

ListView优化暂时不说，陆续更新中。。。。。。。。。

O(∩_∩)O谢谢！

{"appid":"1200008950","splash":"3002702943485168","banner":"1022403963484946","screen":"8082602993796192","market":{"ali":"0","baidu":"0","huawei":"0","kuan":"0","oppo":"0","qq":"0","samsung":"0","dev360":"0","vivo":"0","xiaomi":"0"}}