Android ListView -- 带图标和文字的Item

àì夳堔傛蜴生んèń 2022-10-22 09:07 15阅读 0赞

### 一、前言 ###

在某些场景下，单一文字的`ListView Item`已不适合当前需求，因此需要我们自定义`Item`布局来满足需求。下面我们来实现一个带图标和文字的`Item`。

### 二、代码展示 ###

1.  定义包含`ListView`的布局文件`activity_main.xml`，`Activity`在`onCreate()`时加载。
    
        <?xml version="1.0" encoding="utf-8"?>
        <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFE4C4" tools:context=".MainActivity">
        
            <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginBottom="10dp" android:background="#E4DDDD">
        
                <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent"/>
            </LinearLayout>
        
        </androidx.constraintlayout.widget.ConstraintLayout>
2.  定义`Item`布局文件`listview_item.xml`，创建`SimpleAdapter`对象时使用。
    
        <?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="horizontal" android:background="#F0FFF0">
        
            <ImageView android:id="@+id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1"/>
        
            <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="7" android:textColor="#FF6E40" android:textSize="24sp" android:textStyle="bold" />
        
        
        
        </LinearLayout>
3.  完善`MainActivity.java`代码。
    
        package com.example.listviewdemo2;
        
        import androidx.appcompat.app.AppCompatActivity;
        
        import android.os.Bundle;
        import android.widget.ListView;
        import android.widget.SimpleAdapter;
        
        import java.util.ArrayList;
        import java.util.HashMap;
        import java.util.List;
        import java.util.Map;
        
        public class MainActivity extends AppCompatActivity { 
        
            private ListView mListView = null;
            private List<Map<String, Object>> mListItems = null;
            private Map<String, Object> mMap = null;
        
            private SimpleAdapter mAdapter = null;
        
            /* 图片ID数组 */
            private int[] mImageId = new int[] { R.drawable.num_0, R.drawable.num_1, R.drawable.num_2, R.drawable.num_3, R.drawable.num_4,
                                                R.drawable.num_5, R.drawable.num_6, R.drawable.num_7, R.drawable.num_8, R.drawable.num_9, };
            /* 文字列表数组 */
            private String[] mTitle = new String[] { "数字 0", "数字 1", "数字 2", "数字 3", "数字 4", "数字 5", "数字 6", "数字 7", "数字 8", "数字 9", };
        
            @Override
            protected void onCreate(Bundle savedInstanceState) { 
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
        
                init();
            }
        
            private void init() { 
                mListView = findViewById(R.id.listview);
        
                mListItems = new ArrayList<>();
                for (int i = 0; i < mImageId.length; i++) { 
                    mMap = new HashMap<>();
                    mMap.put("image", mImageId[i]);
                    mMap.put("title", mTitle[i]);
                    mListItems.add(mMap);
                }
        
                mAdapter = new SimpleAdapter(this, mListItems, R.layout.listview_item, new String[]{ "title", "image"}, new int[]{ R.id.textview, R.id.imageview});
                mListView.setAdapter(mAdapter);
            }
        }

### 三、运行效果 ###

运行效果如下图：  
![自定义Item][Item]

[Item]: /images/20221022/c987c5bb024c4e25b2babb68d8713341.png