最常用和最难用的控件——ListView

ListView的简单介绍

ListView绝对可以称得上是Android中最常用的控件之一，几乎所有的应用程序都会用到它。由 于手机屏幕空间都比较有限，能够一次性在屏幕上显示的内容并不多，当我们的程序中有大量 的数据需要展示的时候，就可以借助ListView来实现。ListView允许用户通过手指上下滑动的方 式将屏幕外的数据滚动到屏幕内，同时屏幕上原有的数据则会滚动出屏幕。

定制的ListView的界面

1 创建新的项目

首先创建一个新的项目，命名为ListVIewTest。

2 修改activity_main.xml的代码

添加ListView控件，并且给ListView一个id

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ListView android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView">

    </ListView>


</LinearLayout>

3 新建一个news类

新建一个news类，命名为news，添加如下代码。

package com.example.listviewtest;

public class news {
    private int image;
    private String title;
    private String origin;
    private String date;
    public news(String title,int image,String origin,String date){
        this.title = title;
        this.image = image;
        this.date = date;
        this.origin = origin;
    }
    public int getImage(){
        return image;
    }
    public  String getOrigin(){
        return origin;
    }
    public String getTitle(){
        return title;
    }
    public String getDate(){
        return date;
    }
}

4 为ListView的子项指定一个自定义的news_item.xml文件

新建一个xml文件，并且命名为news_item，然后添加如下代码。该界面就是ListView的具体样子，样式之类的看个人喜欢，注意每个控件的id都需要添上。

<?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"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="390dp"
        android:layout_height="140dp">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:layout_marginTop="20dp">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/img"
                android:paddingTop="20dp">

            </ImageView>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginLeft="30dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/title"
                android:textColor="#000000"
                android:textSize="20dp"
                android:layout_marginTop="40dp"
                >

            </TextView>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/origin"
                android:layout_marginTop="35dp"
                android:textColor="#999999"
                android:textSize="16sp">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="100dp"
                android:id="@+id/date"
                android:textColor="#e6e6e6">

            </TextView>
        </LinearLayout>
    </LinearLayout>


</LinearLayout>

5 创建一个自定义的适配器 newsAdapter，这个适配器继承自 ArrayAdapter。重写构造方法和 getView 方法。

package com.example.listviewtest;

import android.content.Context;
import android.widget.ArrayAdapter;

import java.util.List;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;


public class newsAdapter extends ArrayAdapter{
    private final int resourceId;

    public newsAdapter(Context context, int textViewResourceId, List<news> objects) {
        super(context, textViewResourceId, objects);
        resourceId = textViewResourceId;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        news news = (news) getItem(position); // 获取当前项的news实例
        View view = LayoutInflater.from(getContext()).inflate(resourceId, null);//实例化一个对象。使用Inflater对象来将布局文件解析成一个View
        ImageView Image = (ImageView) view.findViewById(R.id.img);//获取该布局内的图片视图
        TextView title = (TextView) view.findViewById(R.id.title);//获取该布局内的文本视图
        TextView origin = (TextView) view.findViewById(R.id.origin);//获取该布局内的文本视图
        TextView date = (TextView) view.findViewById(R.id.date);//获取该布局内的文本视图
        Image.setImageResource(news.getImage());//为图片视图设置图片资源
        title.setText(news.getTitle());//为文本视图设置文本内容
        origin.setText(news.getOrigin());
        date.setText(news.getDate());
        return view;
    }
}

6 修改MainActivity.java代码

initNews()放是用于初始化news数据的（具体内容看个人需要）。

package com.example.listviewtest;

import android.app.Activity;

import android.widget.ArrayAdapter;
import android.widget.ListView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.solver.ArrayLinkedVariables;
import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private List<news> newsList = new ArrayList<news>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initNews(); // 初始化数据
        newsAdapter adapter = new newsAdapter(MainActivity.this, R.layout.news_item, newsList);
        ListView listView = (ListView) findViewById(R.id.listView);
        listView.setAdapter(adapter);
    }
    private void initNews() {
        news list1 = new news("标题一", R.drawable.dong,"来源：新华网","2020-10-11");
        newsList.add(list1);
        news list2 = new news("标题二", R.drawable.butterfly,"来源：人民日报","2020-10-09");
        newsList.add(list2);
    }

}

7 运行效果

• 本文作者： étoile

• 本文链接： http://sunnyllxx.github.io/2020/10/12/ListView/

• 版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

赏

谢谢你请我吃糖果

微信