首页 > 代码库 > [Android 成长之路]2-实现带图标的ListView

[Android 成长之路]2-实现带图标的ListView

2024-07-09 13:21:42   231人阅读

--by San[kotomifi@gmail.com]

　　在编写列表时，如果是普通的列表，使用ListView + ArrayAdapter 即可实现，但是如果要在每个列表项中文字前配一个图标了，或者在文字后面再配一个图标，这个就可以用 SimpleAdapter 实现了，不要被它的名字欺骗了，It is not simple, it is powerful.

　　我们以制作一个带图标的菜单列表为例，首先我们创建一个布局文件 menu_frame.xml，里面包含一个 ListView, 代码如下：

　　

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     android:layout_width="match_parent" 3     android:padding="5dp" 4     android:layout_height="match_parent" 5     android:orientation="vertical" > 6      7     <ListView 8         android:id="@+id/menu_list" 9         android:layout_width="match_parent"10         android:layout_height="wrap_content"11         />12     13 </LinearLayout>

　　然后我们创建一个菜单项的布局文件 menu_items.xml， 里面包含一个 ImageView 和一个 TextView, 代码如下：

　　　　

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:id="@+id/menu_item" 4     android:layout_width="match_parent" 5     android:layout_height="match_parent" 6     android:orientation="horizontal" 7     android:paddingTop="40dp"> 8      9     <!-- 菜单项的图标 -->10     <ImageView11         android:id="@+id/menu_img"12         android:layout_width="wrap_content"13         android:layout_height="wrap_content"14         android:paddingLeft="10dp"15         android:contentDescription="@string/hello_world"16         />17     18     <!-- 菜单项的文字 -->19     <TextView20         android:id="@+id/menu_name"21         android:layout_width="wrap_content"22         android:layout_height="wrap_content"23         android:paddingLeft="10dp"24         android:textSize="20sp"25         />26     27 </LinearLayout>

 

　　菜单和菜单项的布局都编写好了，现在把他们结合起来

　　

 1         String[] menuNames = {"first", "second", "third", "fouth" }; 2         int[] menuImg = { 3                 R.drawable.ic_top_bar_send_disabled, 4                 R.drawable.ic_about_us, 5                 R.drawable.ic_app_recommendation, 6                 R.drawable.ic_article_more_item_read_it_later 7         }; 8         List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>(); 9         for (int i = 0; i < menuNames.length; i++ ) {10             Map<String, Object> listItem = new HashMap<String, Object>();11             listItem.put("img", menuImg[i]);12             listItem.put("name", menuNames[i]);13             listItems.add(listItem);14         }15         SimpleAdapter sampleAdapter = new SimpleAdapter(this16                 , listItems17                 , R.layout.menu_items18                 , new String[] {"img", "name"}19                 , new int[] { R.id.menu_img, R.id.menu_name}20             );21         22         menuListView = (ListView)findViewById(R.id.menu_list);23         menuListView.setAdapter(sampleAdapter);

　　这里面主要就是 SimpleAdapter,  说一下几个参数的意思

  • 第二个参数是一个 List<Map<String, ?>> 的集合，该集合中每个 Map<String, ?> 可生成一本列表项
  • 指定一个布局界面的 ID
  • 该参数是一个 String[] 类型的参数，该参数决定取 Map<String, ?> 对象中哪些 key 对应的 value 来生成列表项
  • 该参数是一个 int[] 类型的参数，该参数决定填充哪些组建(对应 menu_items.xml 中定义的id)


联系
我们