Android笔记——定制ListView的界面

单独的显示一个文本的ListView很是不好看，我们平时生活中看的腾讯新闻列表，都是左边一列都是图片，右边显示新闻的标题，标题下方是新闻的简介，美观大方。因此我们先要准备好一组图片，然后定义一个实体类，作为ListView适配器的适配类型。这里我左边是水果图片，右边是水果的文字，首先来看下完成之后的效果动态图：

（代码参考第一行代码）

新建类Fruit.java文件:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

package com . example . chendsir . listviewtest ;   /** * Created by chendsir on 17-9-16. */   public class Fruit {      private String name ;      private int imageId ;        public Fruit ( String name , int imageId ) {          this . name = name ;          this . imageId = imageId ;      }        public String getName ( ) {          return    name ;      }      public int getImageId ( ) {          return    imageId ;      } }

这个类有两个字段，一个是水果的名字，另一个是水果图片的资源id号，然后为ListView子项指定一个我们自定义的布局。

layout目录新建fruit_item.xml,添加如下代码：

当然用的是线性布局，一个ImageView用于显示图片，一个TextView用于显示文字。和我们建的类对应上来了。由于图片资源和文字资源是无法直接传给一个ListView的，因此我们需要一个适配器，这里自定义我们自己的一个适配器，它继承自ArrayAdapter,把它的泛型指定为Fruit.新建类FruitAdapter.java文件：

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

package com . example . chendsir . listviewtest ;   import android . content . Context ; import android . support . annotation . LayoutRes ; import android . support . annotation . NonNull ; import android . view . LayoutInflater ; import android . view . View ; import android . view . ViewGroup ; import android . widget . ArrayAdapter ; import android . widget . ImageView ; import android . widget . TextView ;   import java . util . List ;   /** * Created by chendsir on 17-9-16. */   public class FruitAdapter extends ArrayAdapter < Fruit > {        private int resourceId ;        public FruitAdapter ( @ NonNull Context context , @ LayoutRes int textViewResourceId , List < Fruit > objects ) {          super ( context , textViewResourceId , objects ) ;          resourceId = textViewResourceId ;      }        public View getView ( int position , View convertView , ViewGroup parent ) {          Fruit fruit = getItem ( position ) ;          View view = LayoutInflater . from ( getContext ( ) ) . inflate ( resourceId , null ) ;          ImageView fruitImage = view . findViewById ( R . id . fruit_image ) ;          TextView fruitName = view . findViewById ( R . id . fruit_name ) ;          fruitImage . setImageResource ( fruit . getImageId ( ) ) ;          fruitName . setText ( fruit . getName ( ) ) ;          return    view ;      } }

它重写了父类ArrayAdapter的构造函数，将上下文context,ListView布局文件（刚才写的fruit_item的xml文件）。getView中新建一个Fruit类,getItem用于获取当前Fruit的实例，这个是它自带的方法，我们不需要管。然后给这个实例传入我们自己的布局，getContext（）明显获取的是当前上下文MainActiviy.this,inflate()将我们的fruit_item传进去，最后分别获取图片的Id和文字的ID，再给它们传入资源文件，将这个布局返回，适配器就完成了。

最后直接将数据传入我们的适配器，将适配器传给ListView,这样整个界面就完成了。

点击运行就可以看到效果图了。（代码参考第一行代码）

以上。。