Android笔记——定制ListView的界面

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





（代码参考第一行代码）

新建类Fruit.java文件:

12345678910111213141516171819202122

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,添加如下代码：

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

<?xmlversion="1.0"encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/fruit_image"/> <TextView android:id="@+id/fruit_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginLeft="10dp"/> </LinearLayout>

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

12345678910111213141516171819202122232425262728293031323334353637

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,这样整个界面就完成了。

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

packagecom.example.chendsir.listviewtest; importandroid.support.v7.app.AppCompatActivity; importandroid.os.Bundle; importandroid.widget.ArrayAdapter; importandroid.widget.ListView; importjava.util.ArrayList; importjava.util.List; publicclassMainActivityextendsAppCompatActivity{ privateList<Fruit>fruitList=newArrayList<Fruit>(); @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); getSupportActionBar().hide(); setContentView(R.layout.activity_main); initFruits(); FruitAdapteradapter=newFruitAdapter(MainActivity.this,R.layout.fruit_item,fruitList); ListViewlistView=(ListView)findViewById(R.id.list_view); listView.setAdapter(adapter); } privatevoidinitFruits(){ Fruitapple=newFruit("Apple",R.drawable.apple_pic); fruitList.add(apple); Fruitbanana=newFruit("Banana",R.drawable.banana_pic); fruitList.add(banana); Fruitorange=newFruit("Orange",R.drawable.orange_pic); fruitList.add(orange); Fruitwatermelon=newFruit("Watermelon",R.drawable.watermelon_pic); fruitList.add(watermelon); Fruitpear=newFruit("Pear",R.drawable.pear_pic); fruitList.add(pear); Fruitgrape=newFruit("Grape",R.drawable.grape_pic); fruitList.add(grape); Fruitpineapple=newFruit("Pineapple",R.drawable.pineapple_pic); fruitList.add(pineapple); Fruitstrawberry=newFruit("Strawberry",R.drawable.strawberry_pic); fruitList.add(strawberry); Fruitcherry=newFruit("Cherry",R.drawable.cherry_pic); fruitList.add(cherry); Fruitmango=newFruit("Mango",R.drawable.mango_pic); fruitList.add(mango); } }

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

以上。。