1. 程式人生 > >Android學習之listView顯示下拉列表(2)(SimpleAdapter介面卡)

Android學習之listView顯示下拉列表(2)(SimpleAdapter介面卡)

                     ListView顯示下拉列表(2)(SimpleAdapter介面卡)

上一篇文章我大概介紹了listView的主要功能以及用ArrayAdapter陣列介面卡實現純文字的下拉列表。但是在現實生活中,純文字的使用率不是很高,更多的是用SimpleAdapter實現圖文並茂的下拉列表,這種機制就和美團app和淘寶app的下拉列表一樣了,但是SimpleAdapter相對比較複雜,下面我來一一介紹。
1.首先和ArrayAdapter一樣,要新建一個介面卡。

<span style="background-color: rgb(255, 255, 255); font-family: 'Microsoft YaHei'; font-size: 14px;">我們先宣告它:private  SimpleAdapter sim_adapter;</span>

接著就是新建它,這裡要詳細介紹一下SimpleAdapter的幾個引數(content,data,resource,from,to):

content:和ArrayAdapter的一樣指的是上下文,我們就用我們的這個activity,所以用this.

data:是一個泛型資料來源(學過java應該知道什麼是泛型程式設計吧)一個map所組成的list集合
            每一個map都會去對應ListView列表中的每一行
            每一個map(鍵-值對)中的鍵必須包含在所有的from(下面有這個引數)中所指定的鍵

resource:列表佈局檔案的ID,就是你自己的xml檔案(和ArrayAdapter不同,ArrayAdapter是用android自帶的佈局)

from:map中的鍵名

 to:繫結資料檢視中的ID,與from成對應關係

2..新建一個數據源,private List<Map<String,Object>>dataList;dataList=new ArrayList<Map<String,Object>>();

這裡我們用一個函式去新建這個資料來源 

<span style="font-size:18px;"><strong> private  List<Map<String,Object>>  getdata(){
        for (int i=0;i<20;i++){
            Map<String,Object>map=new HashMap<String,Object>();
            map.put("pic",R.drawable.ic_launcher);
            map.put("text","zhangxiang"+i);
            dataList.add(map);

        }


        return dataList;

    }</strong></span>
我們迴圈插入20行,每一行都是一個hashmap,接著把我們在xml中的圖片的id和文字的id放進put中的第一個引數裡面,圖片的第二個引數我們用自帶的圖片
<span style="font-family:Microsoft YaHei;font-size:14px;">R.drawable.ic_launcher(小機器人),文字中的第二個引數我們隨便寫後面再加上一個i以便與區分,最後將map加入到dataList當中。</span>
3.關於from與to引數,我先把xml的原始碼附上以便解釋(即R.layout.item)
<span style="font-size:18px;"><strong><?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="match_parent">
    <ImageView
        android:id="@+id/pic"
        android:layout_marginLeft="20dp"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:src="@drawable/ic_launcher"/>
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:textSize="20sp"
        android:text="機器人"
        android:paddingTop="40dp"
        android:textColor="#ff450a0a"
        />
</LinearLayout></strong></span>

然後我們為from這個引數賦值new String[]{"pic","text"},為了便於對應鍵名就叫做pic與text

接著是to賦值new int []{R.id.pic,R.id.text},pic和text即你在xml中圖片與文字的id

最後新建的介面卡就是這樣的sim_adapter=new SimpleAdapter(this,getdata(),R.layout.item,new String[]{"pic","text"},new int []{R.id.pic,R.id.text});

然後 檢視載入介面卡即可:lv.setAdapter(sim_adapter);

整個activity中的原始碼奉上:

<span style="font-size:18px;"><strong>package xiang24.zhang.myapplicationnew;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Hashtable;
import java.util.List;
import java.util.Map;

import javax.xml.datatype.Duration;


public class MainActivity extends Activity {
    private ListView lv;//下拉列表
    private SimpleAdapter sim_adapter;
    private List<Map<String,Object>>dataList;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv=(ListView)findViewById(R.id.listView);
        //1.新建一個介面卡,新建資料來源
        //ArrayAdapter(上下文,當前listView中載入的每一個列表項所對應的佈局檔案,資料來源)
        //SimpleAdapter(content,data,resource,from,to)
        /*content:上下文,
          data:泛型資料來源,一個map所組成的list集合
            每一個map都會去對應ListView列表中的每一行
            每一個map(鍵-值對)中的鍵必須包含在所有的from中所指定的鍵
          resource:列表項佈局檔案的ID
          from:map中的鍵名
          to:繫結資料檢視中的ID,與from成對應關係


         */
        /*
        2.介面卡載入資料來源
        3.檢視載入介面卡
         */
          
          dataList=new ArrayList<Map<String,Object>>();
          sim_adapter=new SimpleAdapter(this,getdata(),R.layout.item,new String[]{"pic","text"},new int []{R.id.pic,R.id.text});
          lv.setAdapter(sim_adapter);
      

    }

    private  List<Map<String,Object>>  getdata(){
        for (int i=0;i<20;i++){
            Map<String,Object>map=new HashMap<String,Object>();
            map.put("pic",R.drawable.ic_launcher);
            map.put("text","zhangxiang"+i);
            dataList.add(map);

        }


        return dataList;

    }

}
</strong></span>

最後實現的效果如圖所示:如果下拉列表會顯示剩餘資料(注意這裡出現的文字是zhangxiang+i,而不是我們在xml中定義的text的值)。
<img src="https://img-blog.csdn.net/20141214011032953?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpZWZfSVRfb3BlcmF0ZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" align="left" width="250" height="350" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);" alt="" />

                                                                                 

注:感謝觀看,如果有喜歡android程式設計的同學可以加我qq805198265,大家一塊學習進步啊吐舌頭