Android笔记-UI-ListView

发表于 分类于 阅读次数： Disqus： 本文字数： 7.8k 阅读时长 ≈ 7 分钟
  • 资料来源如下
  • 第一行代码(第二版)
  • ListView
  • Android ListView工作原理完全解析，带你从源码的角度彻底理解
  • ListView是所有原生控件中使用频率最高和最复杂的，涉及知识点也较多，专门抽出一篇来记录，涉及一些过程分析，希望自己能写完

ListView的简单使用

  • 先来看一下一个简单的实例
    代码如下

    • 在activity_main.xml中添加_ListView
      1
      2
      3
      4
      5
      <ListView
          android:id="@+id/list_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      </ListView>
    • 修改MainActivity的代码
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
        //要显示的数组，屏幕长了点，为了显示滑动效果多增加了几项。
         private String[] data = {"apple","banana","orange","watermelon","pear","grape","pineapple","strawberry","cherry","mango","A","B","C","D","E","F"};

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);

      //为适配器绑定数据
      	ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_single_choice,data);
      //得到ListView对象的引用
      ListView listView = (ListView) findViewById(R.id.list_view);
      //适配器内容传递
      listView.setAdapter(adapter);
            });
        }

  • 效果如图
    Screenshot_20160812-170816.png

  • 步骤其实比较简单

    • 准备要显示的数据 ——String[] data数组
    • 构建适配器 ——ArrayAdapteradapter
    • 将适配器添加到ListView ——listView.setAdapter(adapter);

  • 详解

    • ListView首先是用来展现大量数据的，
      数据源的来源可以是网络下载，程序内置、数据库提取等，本例中则是简单的定义了一个String类型 data数组。
      数据源的类型/种类繁多，使得ListView无法直接适配数据源，直接适配数据源将导致代码的臃肿和效率的低下。ListView与数据源之间需要一个过度
    • 适配器：Adapter，Adapter在ListView和数据源之间起到了一个桥梁的作用。正是Adapter的使用ListView的使用变得要比其它控件复杂得多。

Adapter适配器

  • Adapter适配器在ListView和数据源之间起到了一个桥梁的作用Adapter的接口都是统一的，因此ListView不用担心任何适配方面的问题。

    Adapter又是一个接口(interface)，它可以去实现各种各样的子类，每个子类都能通过自己的逻辑来去完成特定的功能，以及与特定数据源的适配操作，比如说ArrayAdapter可以用于数组和List类型的数据源适配，SimpleCursorAdapter可以用于游标类型的数据源适配

    这样就解决了数据源适配的难题，并且还拥有相当不错的扩展性

  • 简易的示图(来自 郭霖的博客)
    SouthEast.png

  • 常用Adapter

    ArrayAdapter——用来绑定一个数组，支持泛型操作

    SimpleAdapter——用来绑定在xml中定义的控件对应的数据

    SimpleCursorAdapter——用来绑定游标得到的数据

    BaseAdapter——通用的基础适配器

  • 实例中使用的是ArrayAdapter，ArrayAdapter具有多个构造函数重载，这里使用的是字符串类型，

  • ArrayAdapter的构造函数

    • 当前上下文
    • ListView子项的id，本例中使用的是android.R.layout.simple_list_item 这是Android内置的一个布局文件
    • 需要适配的数据
      之后适配器就构建完成，最后传递进LIstView中即可

自定义适配器

  • 从第一行代码第二版的源码LiseViewTest目录下拷贝drawble_hdpi _到你的工程下

  • 新建Fruit类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    public class Fruit {

      private String name;
      private int imageId;
      //构造函数   水果名称/水果对应图片资源ID
      public Fruit(String name, int imageId) {
          this.name = name;
          this.imageId = imageId;
      }

      public String getName() {
          return name;
      }

      public int getImageId() {
          return imageId;
      }
    }

  • 在layout目录下新建fruit_item.xml _

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <ImageView
          android:id="@+id/fruit_image"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

      <TextView
          android:id="@+id/fruit_name"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center_vertical"
          android:layout_marginLeft="10dp" />

    </LinearLayout>

    一个ImageView和TextView ，水平居中显示

  • 自定义适配器继承自ArrayAdapter 泛型指定为fruit类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     //继承自ArrayAdapter
     public class FruitAdapter extends ArrayAdapter<Fruit> {
       private int resourceId;
    //构造函数  /上下文  ListView子项布局id    数据
       public FruitAdapter(Context context, int textViewResourceId,
                           List<Fruit> objects) {
           super(context, textViewResourceId, objects);
           resourceId = textViewResourceId;
       }

       @Override
       //当前子元素的的位置，
       public View getView(int position, View convertView, ViewGroup parent){
           Fruit fruit = getItem(position); // 获取当前项的Fruit实例
           View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
           ImageView fruitImage = (ImageView)view.findViewById(R.id.fruit_image);
           TextView fruitName = (TextView)view.findViewById(R.id.fruit_name);
           fruitImage.setImageResource(fruit.getImageId());
           fruitName.setText(fruit.getName());
           return view;
       }
     }
    • getView()方法接受的三个参数，第一个参数position代表当前子元素的的位置，我们可以通过具体的位置来获取与其相关的数据。第二个参数convertView
    • LayoutInflater.inflate()方法来去加载布局。接收3个参数，第三个参数为false表示只在父布局声明的layout属性有效，但不会为这个view添加父布局，最后设定为接下来会对这个view进行一些属性和值的设定，最后将view返回。

  • 修改MainActivity的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    public class MainActivity extends AppCompatActivity {

      //新建Fruit类的数组
      private List<Fruit> fruitList = new ArrayList<Fruit>();

      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);

    // 初始化水果数据
          initFruits();
          //设置FruitAdapter适配器
          FruitAdapter adapter = new FruitAdapter(MainActivity.this, R.layout.fruit_item, fruitList);
          //得到ListView的引用
          ListView listView = (ListView) findViewById(R.id.list_view);
          listView.setAdapter(adapter);
      }

      // 初始化水果数据
      private void initFruits() {
          //填充两遍，占满屏幕
          for (int i = 0; i < 2; i++) {
              Fruit apple = new Fruit("Apple", R.drawable.apple_pic);
              fruitList.add(apple);
              Fruit banana = new Fruit("Banana", R.drawable.banana_pic);
              fruitList.add(banana);
              Fruit orange = new Fruit("Orange", R.drawable.orange_pic);
              fruitList.add(orange);
              Fruit watermelon = new Fruit("Watermelon", R.drawable.watermelon_pic);
              fruitList.add(watermelon);
              Fruit pear = new Fruit("Pear", R.drawable.pear_pic);
              fruitList.add(pear);
              Fruit grape = new Fruit("Grape", R.drawable.grape_pic);
              fruitList.add(grape);
              Fruit pineapple = new Fruit("Pineapple", R.drawable.pineapple_pic);
              fruitList.add(pineapple);
              Fruit strawberry = new Fruit("Strawberry", R.drawable.strawberry_pic);
              fruitList.add(strawberry);
              Fruit cherry = new Fruit("Cherry", R.drawable.cherry_pic);
              fruitList.add(cherry);
              Fruit mango = new Fruit("Mango", R.drawable.mango_pic);
              fruitList.add(mango);
          }
      }
    }

  • 只需要修改fruit_item.xml，即可定制界面_

提升ListView的效率

convertView参数

  • 针对 Fruit fruit = getItem(position); // 获取当前项的Fruit实例
    每次滑动ListView时，getView()方法都会将布局都会重新加载一边
  • convertView参数：将之前加载完成的布局进行缓存。
  • 借助convertView参数，在每次加载View之前查询convertView是否为空，为空则重新加载，不为空则从convertView中取
  • 代码部分如下
    1
    2
    3
    4
    5
    6
    7
    8
    View view;
    Fruit fruit = getItem(position); // 获取当前项的Fruit实例

     if (convertView == null) {
          view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
     }else {
          view = convertView;
     }
  • ListView不会再重复加载布局了

ViewHolder

  • ViewHolder不是Android的开发API，而是一种设计方法

  • 针对
    ImageView fruitImage = (ImageView)view.findViewById(R.id.fruit_image); TextView fruitName = (TextView)view.findViewById(R.id.fruit_name);
    每次布局实例化后，findViewById都会重新执行获取控件实例

  • 新增内部类 ViewHolder，利用Tag附加到对应View中，即每次加载布局时，对应的 获取控件实例的操作也一并执行，并储存在View中。这样 获取控件实例的操作直接缓存在View中，不会再重复执行

  • 代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
     @Override
       public View getView(int position, View convertView, ViewGroup parent) {
           Fruit fruit = getItem(position); // 获取当前项的Fruit实例
           View view;
           ViewHolder viewHolder;
           if (convertView == null) {
               //加载布局
               view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
               viewHolder = new ViewHolder();
               viewHolder.fruitImage = (ImageView) view.findViewById (R.id.fruit_image);
               viewHolder.fruitName = (TextView) view.findViewById (R.id.fruit_name);
               view.setTag(viewHolder); // 将ViewHolder存储在View中
           } else {
               view = convertView;
               viewHolder = (ViewHolder) view.getTag(); // 重新获取ViewHolder
           }
           viewHolder.fruitImage.setImageResource(fruit.getImageId());
           viewHolder.fruitName.setText(fruit.getName());
           return view;
       }
    //ViewHolder 内部类
       class ViewHolder {

           ImageView fruitImage;

           TextView fruitName;

       }

ListView中的点击事件

  • 比较简单,再MainActivty的onCreate方法中添加
  • 代码如下
    1
    2
    3
    4
    5
    6
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
              @Override
              public void onItemClick(AdapterView<?> parent, View view,
                                      int position, long id) {
                  Fruit fruit = fruitList.get(position);
                  Toast.makeText(MainActivity.this, fruit.getName(), Toast.LENGTH_SHORT).show();
  • setOnItemClickListener为ListView注册了一个监听器，点击发生时回掉 onItemClick()方法，该方法通过position参数判断具体子项。该处是执行Toast