列表控件使用示例

251 阅读2分钟

1、基本列表:

效果如下:

1.1 布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <Button
        android:id="@+id/btn_test"
        android:text="测试按钮"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ListView
        android:id="@+id/tv_test1"
        android:layout_below="@id/btn_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

1.2 设置代码:

public class MainActivity extends Activity implements View.OnClickListener {
    public Button mBtnTest = null;
    private ListView mLvTest1 = null;
    private String[] mLvData = {"暹罗猫", "布偶猫", "折耳猫", "短毛猫", "波斯猫", "蓝猫", "森林猫", "孟买猫","缅因猫","埃及猫","伯曼猫","缅甸猫","新加坡猫","美国短尾猫","巴厘猫"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initUI();
    }

    /**
     * 初始化页面UI
     * */
    private void initUI() {
        mBtnTest = (Button)findViewById(R.id.btn_test);
        mBtnTest.setOnClickListener(this);

        mLvTest1 = (ListView)findViewById(R.id.tv_test1);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                MainActivity.this, android.R.layout.simple_list_item_1, mLvData);
        mLvTest1.setAdapter(adapter);
    }

    @Override
    public void onClick(View view) {
        switch(view.getId()){
            case R.id.btn_test:
                ShowToast("测试按钮被点击了");
                break;
        }
    }

    /**
     * 展示Toast提示
     * */
    private void ShowToast(String msg) {
        Toast.makeText(this,msg,Toast.LENGTH_LONG).show();
    }
}

note: android.R.layout.simple_list_item_1作为 ListView 子项布局的 id,这是一个 Android内置的布局文件,里面只有一个 TextView,用于显示一段文本。

2、自定义listview

线上效果图:

2.1 数据模型类定义

package com.kkstudio.media;

public class UserInfo {
    private String mName;
    private int mHeadiconId;
    private int mAge;

    public UserInfo(String name, int iconId) {
        setHeadiconId(iconId);
        setName(name);
    }


    public String getName() {
        return mName;
    }

    public void setName(String name) {
        this.mName = name;
    }

    public int getAge() {
        return mAge;
    }

    public void setAge(int age) {
        this.mAge = age;
    }

    public int getHeadiconId() {
        return mHeadiconId;
    }

    public void setHeadiconId(int headiconId) {
        this.mHeadiconId = headiconId;
    }
}

2.2 列表单个Item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="106dp">

    <ImageView
        android:id="@+id/iv_headicon_id"
        android:layout_marginTop="3dp"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="5dp"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="110dp">
        <TextView
            android:id="@+id/textview_username"
            android:text="hello,world"
            android:gravity="center_vertical"
            android:layout_marginLeft="15dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </RelativeLayout>


</LinearLayout>

2.3 列表自定义适配器

package com.kkstudio.media;

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.TextView;

import androidx.annotation.NonNull;

import java.util.List;

public class UserInfoAdapter extends ArrayAdapter<UserInfo> {
    private int mResourceId;
    public UserInfoAdapter(@NonNull Context context, int resource, @NonNull List<UserInfo> objects) {
        super(context, resource, objects);
        mResourceId = resource;
    }

//    @NonNull
//    @Override
//    public View getView(int position, View convertView, ViewGroup parent) {
//        UserInfo userinfo = getItem(position);//获取当前项的实例
//        View view = LayoutInflater.from(getContext()).inflate(mResourceId, parent, false);
//        ((ImageView) view.findViewById(R.id.iv_headicon_id)).setImageResource(userinfo.getHeadiconId());
//        ((TextView) view.findViewById(R.id.textview_username)).setText(userinfo.getName());
//        return view;
//    }

    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        UserInfo userinfo = getItem(position);//获取当前项的实例
        View view;
        ViewHolder viewHolder;

        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(mResourceId, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.image = (ImageView) view.findViewById(R.id.iv_headicon_id);
            viewHolder.name = (TextView) view.findViewById(R.id.textview_username);
            view.setTag(viewHolder);//保存
        } else {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();//取出
        }

        viewHolder.image.setImageResource(userinfo.getHeadiconId());
        viewHolder.name.setText(userinfo.getName());
        return view;
    }

    private class ViewHolder {
        ImageView image;
        TextView name;
    }
}

2.4 页面布局文件【添加listview控件】

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <Button
        android:id="@+id/btn_test"
        android:text="测试按钮"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ListView
        android:id="@+id/tv_test1"
        android:layout_below="@id/btn_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

2.5 测试页面及列表元素点击事件

package com.kkstudio.media;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;

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

public class MainActivity extends Activity implements View.OnClickListener {
    public Button mBtnTest = null;
    private ListView mLvTest1 = null;
    private List<UserInfo> mUserinfoArr = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initUI();
    }

    /**
     * 初始化页面UI
     * */
    private void initUI() {
        mBtnTest = (Button)findViewById(R.id.btn_test);
        mBtnTest.setOnClickListener(this);

        mUserinfoArr.add(new UserInfo("萨瓦迪卡", R.drawable.head_001));
        mUserinfoArr.add(new UserInfo("奥利", R.drawable.head010));
        mUserinfoArr.add(new UserInfo("思密达", R.drawable.head_002));
        mUserinfoArr.add(new UserInfo("布偶猫", R.drawable.head011));
        mUserinfoArr.add(new UserInfo("小桃夭", R.drawable.head_003));
        mUserinfoArr.add(new UserInfo("波斯王子", R.drawable.head012));
        mUserinfoArr.add(new UserInfo("小公举", R.drawable.head_004));
        mUserinfoArr.add(new UserInfo("瑞哥泰拉", R.drawable.head013));
        mUserinfoArr.add(new UserInfo("挪威森林", R.drawable.head_005));
        mUserinfoArr.add(new UserInfo("波斯猫", R.drawable.head014));
        mUserinfoArr.add(new UserInfo("俄罗斯蓝猫", R.drawable.head_006));
        mUserinfoArr.add(new UserInfo("京巴", R.drawable.head015));
        mUserinfoArr.add(new UserInfo("叮当猫", R.drawable.head016));
        mUserinfoArr.add(new UserInfo("异国短毛猫", R.drawable.head_008));
        mUserinfoArr.add(new UserInfo("挪威森林猫", R.drawable.head_009));

        mLvTest1 = (ListView)findViewById(R.id.tv_test1);

        UserInfoAdapter adapter = new UserInfoAdapter(MainActivity.this, R.layout.userinfo_item, mUserinfoArr);
        mLvTest1.setAdapter(adapter);
        mLvTest1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                UserInfo info = (UserInfo)( mLvTest1.getItemAtPosition(i));
                ShowToast("You clicked me ,"+info.getName());
            }
        });
    }

    @Override
    public void onClick(View view) {
        switch(view.getId()){
            case R.id.btn_test:
                ShowToast("测试按钮被点击了");
                break;
        }
    }

    /**
     * 展示Toast提示
     * */
    private void ShowToast(String msg) {
        Toast.makeText(this,msg,Toast.LENGTH_LONG).show();
    }
}