Android中ListView控件实现的滚动界面实例

                                 Android中用ListView控件实现的滚动界面实例

ListView是Android中最常用的控件之一，几乎所有的应用程序都会用到它。List View允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内，同时屏幕上原有的数据则会滚动出屏幕。

我们通过制作一个滚动界面实例来学习ListView控件。由于无法上传视频，只是截一部分图，但是它是可以滚动的，效果图如下：

步骤一：首先准备些图片（我的图片大小不一样，可能这个原因，导致页面有些对不齐，有哪位小可爱可以通过修改布局使字体对齐吗？欢迎评论），创建一个ListViewTest项目，接着在com.example.listviewtest包里定义一个实体类，作为ListView适配器的适配类型。新建类Fruit,代码如下：

package com.example.listviewtest;

//实体类
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，为ListView的子项指定一个我们自定义的布局。代码如下：

<?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"
    >
    <!--显示水果图片-->
    <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:lineSpacingExtra="40dp"
        android:textSize="20dp"
        android:layout_marginLeft="50dp"/>
</LinearLayout>

步骤三：在com.example.listviewtest包里新建类FruitAdapter。因为数据无法直接传递给ListView，我们需要借助适配器来完成，Android中提供了很多适配器的实现类，我用的是ArrayAdapter，建一个自定义的适配器FruitAdapter，其继承自ArrayAdapter,并将泛型指定为Fruit类。

package com.example.listviewtest;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import java.util.List;

public class FruitAdapter extends ArrayAdapter<Fruit>{
    private  int resoureId;
    
    //重写父类的一组构造函数，将上下文，ListView子项布局的id和数据都传递进来
    public FruitAdapter(Context context, int textViewResourceId, List<Fruit> objects){
        super(context,textViewResourceId,objects);
        resoureId=textViewResourceId;

    }
    //重写getView()，在每个子项被滚动到屏幕内的时候会被调用
    public View getView(int position, View convertView, ViewGroup parent){
        //获取当前项的Fruit实例
        Fruit fruit=getItem(position);
        //
        //使用LayoutInflater来为这个子项加载我们传入的布局
        View view = LayoutInflater.from(getContext()).inflate(resoureId,parent,false);
        //获取ImageView,TextView实例
        ImageView fruitImage=(ImageView)view.findViewById(R.id.fruit_image);
        TextView fruitName=(TextView)view.findViewById(R.id.fruit_name);
        //调用setImageResource(),setText()设置显示的图片和文字
        fruitImage.setImageResource(fruit.getImageId());
        fruitName.setText(fruit.getName());
        //返回布局
        return view;


    }
}

步骤四：修改MainActivity代码，其中为ListView注册了一个监听器，当用户点击一个子项时，水果的名字会通过Toast显示出来，下所示：

package com.example.listviewtest;

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;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {
    private List<Fruit> fruitList=new ArrayList<>();
//    private String[] data= {
//            "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
//            "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen"
//    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();//初始化水果数据
        FruitAdapter adapter=new FruitAdapter(
                MainActivity.this,R.layout.fruit_item,fruitList);
        ListView listView=(ListView)findViewById(R.id.list_view);
        listView.setAdapter(adapter);
        //ListView的点击事件
        // 用setOnItemClickListener()为ListView注册了一个监听器，用户点击了ListView中的任何一个子项时，
        //就会调回onItemClick(),通过Toast将水果的名字显示出来
        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();
            }
        });

    }
    //初始化水果数据
    private void initFruits() {
        for (int i=0;i<2;i++){
            Fruit apple=new Fruit("apple",R.drawable.picture6);
            fruitList.add(apple);
            Fruit one=new Fruit("one",R.drawable.picture7);
            fruitList.add(one);
            Fruit two=new Fruit("two",R.drawable.picture8);
            fruitList.add(two);
            Fruit three=new Fruit("three",R.drawable.picture9);
            fruitList.add(three);
            Fruit four=new Fruit("four",R.drawable.picture10);
            fruitList.add(four);
            Fruit five=new Fruit("five",R.drawable.picture12);
            fruitList.add(five);
            Fruit six=new Fruit("six",R.drawable.picture14);
            fruitList.add(six);
            Fruit seven=new Fruit("seven",R.drawable.picture15);
            fruitList.add(seven);
            Fruit eight=new Fruit("eight",R.drawable.picture16);
            fruitList.add(eight);
            Fruit nine=new Fruit("nine",R.drawable.picture25);
            fruitList.add(nine);
            Fruit ten=new Fruit("ten",R.drawable.picture12);
            fruitList.add(ten);

        }
    }
}

我们定制的界面很简单，只要修改fruit_item.xml中的内容，就可以定制出各种复杂的界面了。

由于照片大小不一样，文字不能左对齐，这个问题希望有人在评论区告诉我解决办法哦~