Android笔记——定制ListView的界面

来源：互联网发布：利淘网淘宝编辑：程序博客网时间：2024/05/17 23:37

单独的显示一个文本的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,添加如下代码：

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文件：

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

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);
    }
}

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

以上。。

阅读全文

0 0