android-UI元件例項大全(七)------Adapter類One之ListView

憶江南的部落格發表於2015-08-20
AndroidUI元件APTView

今天要學習的這個adapter灰常重要,也是UI元件的一個難點

adapter:介面卡,是介面卡檢視與資料之間的橋樑

簡單地可以這樣理解:將各種資料以合適的形式顯示到view上,提供給使用者看


！！！最後有一個模仿QQ好友列表佈局的實現哦！！！


這裡的話先說下MVC這種程式框架:

舉例:大型的商業程式通常由多人一同開發完成,比如有人負責操作介面的規劃與設計,有人負責程式程式碼的編寫

如果要能夠做到程式專案的分工就必須在程式的結構上做適合的安排,如果,介面設計與修改都涉及到程式程式碼的改變的話,

那麼兩者的分工就會造成執行上的困難

良好的程式架構師將整個程式專案劃分為如圖的三個部分:


model:通常可以理解為資料,負責執行程式的核心運算與判斷邏輯,,通過view獲得使用者輸入的資料,然後根據從資料庫查詢相關的資訊,

    最後進行運算和判斷,再將得到的結果交給view來顯示

view:使用者的操作介面,說白了就是GUI,應該使用哪種介面元件,元件間的排列位置與順序都需要設計

Controller:控制器,作為model與view之間的樞紐,負責控制程式的執行流程以及物件之間的一個互動


在adapter這裡的話就是model(資料)--->controller(以什麼方式顯示到)--->view(使用者介面)

我們的adapter就是屬於controller這個部分的

adapter與其子類關係圖:




ListView列表檢視

以垂直列表的形式列出需要顯示的列表項,eg:系統設定項與功能內容列表等

兩種新增ListView到螢幕中的方法:直接使用Listview建立和讓activity繼承ListActivity實現


一.直接在xml中建立ListView

步驟一:

在res\values目錄中建立一個陣列資源的xml檔案:arrays.xml:

  1. <span style="font-family:Comic Sans MS;"><?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <string-array name="myarray">  
  4.     <item>語文</item>  
  5.     <item>數學</item>  
  6.     <item>英語</item>  
  7.     <item>物理</item>  
  8.     <item>化學</item>  
  9.     <item>生物</item>     
  10.     </string-array>      
  11. </resources></span>  

接著,在佈局檔案中新增一個ListView,並使用myarray為其設定列表項

  1. <span style="font-family:Comic Sans MS;"><ListView  
  2.         android:id="@id/android:list"  
  3.         android:layout_height="wrap_content"  
  4.         android:layout_width="match_parent"   
  5.         android:entries="@array/myarray"  
  6.     /></span>  


//這裡的話,如果只有一個listview時,可以引用系統ListView的ID,該id的定義,必須引用系統資源中ID為list的元件,否則會報錯

//也可以建立一個新的id



執行後的效果圖:



使用列表檢視時,如何設定選項內容顯得格外重要,如果沒有在佈局檔案中通過entries指定要顯示的列表項的話，

可以為其設定adapter來指定需要顯示的列表項,步驟有兩個:

1)建立adapter物件:如果是純文字的話通常使用arrayAdapter物件,

而建立arrayAdapter物件的話可以是通過陣列資原始檔中建立,也可以通過Java檔案中的字串陣列進行建立

2)將建立好的介面卡物件與adapter進行關聯:listView.setAdapter(adapter);


程式碼:

首先對main.xml檔案進行修改,為其設定分隔條背景與寬度

  1. <span style="font-family:Comic Sans MS;"><ListView  
  2.         android:id="@+id/listView1"  
  3.         android:divider="@drawable/butbg"  
  4.         android:dividerHeight="3px"  
  5.         android:footerDividersEnabled="true"  
  6.         android:headerDividersEnabled="true"  
  7.         android:layout_height="wrap_content"  
  8.         android:layout_width="match_parent"   
  9.     /></span>  

程式碼解釋:

divider:設定分隔條,可以用顏色分割,也可以用drawable資源分割

dividerHeight:設定分隔條的高度

footerDividersEnabled:是否在footerView(表尾)前繪製一個分隔條,預設為true

headerDividersEnabled:是否在headerView(表尾)前繪製一個分隔條,預設為true


Java程式碼部分:

步驟:例項化一個listView,新增headerView與footerView

建立一個介面卡adapter,listview.setAdapet為這個介面卡新增一個某項被選中的監聽器


程式碼:

  1. <span style="font-family:Comic Sans MS;">package com.jay.demo;  
  2.   
  3. import android.os.Bundle;  
  4. import android.view.View;  
  5. import android.widget.AdapterView;  
  6. import android.widget.AdapterView.OnItemClickListener;  
  7. import android.widget.ArrayAdapter;  
  8. import android.widget.ImageView;  
  9. import android.widget.LinearLayout;  
  10. import android.widget.ListView;  
  11. import android.widget.Toast;  
  12. import android.R.anim;  
  13. import android.app.Activity;  
  14.   
  15. public class MainActivity extends Activity {  
  16.   
  17.       
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         setContentView(R.layout.activity_main);  
  22.           
  23.         //例項化listview,新增headView(表頭),括號中的引數是一個影象物件  
  24.         final ListView listView = (ListView) findViewById(R.id.listView1);  
  25.         listView.addHeaderView(line());  
  26.         //定義一個介面卡adapter  
  27.         ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.myarray,android.R.layout.simple_list_item_multiple_choice );<span style="white-space:pre">     </span>//將介面卡與listview相關聯  
  28.         listView.setAdapter(adapter);  
  29.         listView.addFooterView(line());  
  30.           
  31.         listView.setOnItemClickListener(new OnItemClickListener() {  
  32.   
  33.             @Override  
  34.             public void onItemClick(AdapterView<?> parent, View arg1, int pos,  
  35.                     long id) {  
  36.                 String result = parent.getItemAtPosition(pos).toString();  
  37.                 Toast.makeText(getApplicationContext(), result, Toast.LENGTH_LONG).show();  
  38.             }  
  39.         });  
  40.     }  
  41.   
  42.     private View line() {  
  43.         ImageView image = new ImageView(this);  
  44.         image.setImageResource(R.drawable.butbg);  
  45.         return image;  
  46.     }  
  47. }  
  48. </span>  

執行截圖:



程式碼分析:

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.myarray,android.R.layout.simple_list_item_multiple_choice );

這句程式碼建立了一個ArrayAdapter型別的介面卡adapter

createFromResource方法中的引數依次為:上下文,字串陣列,以及ListView的外觀形式

通常的外觀形式有以下幾種:

simple_list_item_1:單獨一行的文字框

simple_list_item_2:兩個文字框組成        

simple_list_item_checked:每項都是由一個已選中的列表項    

simple_list_item_multiple_choice:都帶有一個核取方塊    


simple_list_item_single_choice:都帶有一個單選鈕    



2.讓Activity繼承ListActivity實現:

如果我們需要的僅僅是顯示一個列表的話,直接繼承ListActivity類,刪掉設定佈局的程式碼,setListAdapter即可:


程式碼:

  1. <span style="font-family:Comic Sans MS;">package com.jay.demo;  
  2.   
  3. import android.os.Bundle;  
  4. import android.view.View;  
  5. import android.widget.AdapterView;  
  6. import android.widget.AdapterView.OnItemClickListener;  
  7. import android.widget.ArrayAdapter;  
  8. import android.widget.ImageView;  
  9. import android.widget.LinearLayout;  
  10. import android.widget.ListView;  
  11. import android.widget.Toast;  
  12. import android.R.anim;  
  13. import android.app.Activity;  
  14. import android.app.ListActivity;  
  15.   
  16. public class MainActivity extends ListActivity {  
  17.   
  18.       
  19.     @Override  
  20.     protected void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.           
  23.         String[] array = new String[]{"語文","數學","英語"};  
  24.         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,array);  
  25.         setListAdapter(adapter);      
  26.     }  
  27.   
  28.     @Override  
  29.     protected void onListItemClick(ListView l, View v, int position, long id) {  
  30.         // TODO Auto-generated method stub  
  31.         super.onListItemClick(l, v, position, id);  
  32.         String result = l.getItemAtPosition(position).toString();  
  33.         Toast.makeText(getApplicationContext(), result, Toast.LENGTH_LONG).show();  
  34.     }  
  35.       
  36.       
  37. }  
  38. </span>  

執行截圖:


程式碼解釋：

繼承ListActivity,新建一個ArrayAdapter物件,引數依次是上下文,顯示形式,字串陣列,setListAdapter即可

重寫onListItemClick()方法



使用例項:

模仿QQ好友的顯示欄:



前面的話我們都是用的ArrayAdapter,很簡單,接下來這裡的話就要使用另一個adapter了:

SimpleAdapter:功能強大,一點都不簡單哦,雖然simple是簡單的意思

好吧,廢話不多說:一步步實現吧:


step 1:

先定義一個空的ListView

  1. <span style="font-family:Comic Sans MS;"><ListView  
  2.         android:id="@+id/listView1"  
  3.         android:layout_width ="match_parent"  
  4.         android:layout_height="wrap_content">  
  5.     </ListView></span>  


step 2:接著我們定義一個介面佈局,作為ListView的列表項元件:

一個圖片和兩個textView

  1. <span style="font-family:Comic Sans MS;"><?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="horizontal" >  
  6.       
  7.     <!-- 定義一個用於顯示頭像的ImageView -->  
  8.     <ImageView   
  9.         android:baselineAlignBottom="true"  
  10.         android:id="@+id/imgtou"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:paddingLeft="8dp"      
  14.     />  
  15.       
  16.     <!-- 定義一個豎直方向的LinearLayout,把QQ呢稱與說說的文字框設定出來 -->  
  17.     <LinearLayout  
  18.         android:layout_width="match_parent"  
  19.         android:layout_height="wrap_content"  
  20.         android:orientation="vertical"  
  21.       >  
  22.     <TextView  
  23.         android:id="@+id/name"  
  24.         android:layout_width="wrap_content"  
  25.         android:layout_height="wrap_content"  
  26.         android:textSize="20sp"  
  27.         android:paddingLeft="8dp"  
  28.         android:textColor="#1D1D1C"  
  29.     />  
  30.     <TextView  
  31.         android:id="@+id/says"  
  32.         android:layout_width="wrap_content"  
  33.         android:layout_height="wrap_content"  
  34.         android:textSize="13sp"  
  35.         android:paddingLeft="8px"  
  36.         android:textColor="#B4B4B9"  
  37.     />      
  38.       
  39.     </LinearLayout>  
  40.       
  41. </LinearLayout></span>  

step 3:有了Listview裝列表項,也有了ListView的顯示佈局,還差什麼呢?

就差列表項了,這裡我們使用simpleAdapter來提供列表項

java部分程式碼:

  1. package com.jay.demo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5. import java.util.List;  
  6. import java.util.Map;  
  7.   
  8. import android.os.Bundle;  
  9. import android.widget.ListView;  
  10. import android.widget.SimpleAdapter;  
  11. import android.app.Activity;  
  12.   
  13.   
  14. public class MainActivity extends Activity {  
  15.   
  16.     private String[] names = new String[]{"萌妹子","小熊貓","蒙奇-D  路飛"};  
  17.     private String[] says = new String[]{"我就是個喜歡賣萌的小妮子","最討厭拍照什麼的...","我是要成為海賊王的男人"};  
  18.     private int[] imgIds = new int[]{R.drawable.tou1,R.drawable.tou2,R.drawable.tou3};  
  19.       
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState) {  
  22.         super.onCreate(savedInstanceState);  
  23.         setContentView(R.layout.activity_main);  
  24.           
  25.           
  26.         List<Map<String, Object>> listitem = new ArrayList<Map<String,Object>>();  
  27.         for(int i = 0;i < names.length; i++)  
  28.         {  
  29.             Map<String, Object> showitem = new HashMap<String, Object>();  
  30.             showitem.put("touxiang", imgIds[i]);  
  31.             showitem.put("name", names[i]);  
  32.             showitem.put("says", says[i]);  
  33.             listitem.add(showitem);  
  34.         }  
  35.           
  36.         //建立一個simpleAdapter  
  37.         SimpleAdapter myAdapter = new SimpleAdapter(getApplicationContext(), listitem, R.layout.simple_layout, new String[]{"touxiang","name","says"}, new int[]{R.id.imgtou,R.id.name,R.id.says});  
  38.         ListView listView = (ListView) findViewById(R.id.listView1);  
  39.         listView.setAdapter(myAdapter);  
  40.     }  
  41. }  



程式碼解釋:

1.定義了三個資源陣列,頭像,QQ呢稱,說說

2.定義一個儲存Map集合的List集合

3.通過迴圈依次將資源陣列中的值按對應的鍵存入map集合中

4.將每次的Map集合新增到定義好的List集合中

5.建立一個SimpleAdapter,構造方法中的引數分別為:

①上下文物件,

②列表項(資料),

③指定列表項的顯示佈局的id

④根據字串陣列中的值為鍵,取出Map陣列中的值來生成列表項

⑤對應Map集合中的值,依次填充的佈局中的元件的id


6.為ListView設定一個介面卡:listView.setAdapter(myAdapter);

就這樣,很簡單吧!!!!


執行截圖:




最後的話當然還要弄下事件監聽啦

有兩種:使用者點選某個項,或者選擇某個列表項

對應方法setOnItemClickListener()方法和setOnItemSelectedListener();

這裡筆者演示的是第一種事件監聽機制,另一種也一樣:

程式碼:

  1. listView.setOnItemClickListener(new OnItemClickListener() {  
  2.   
  3.             @Override  
  4.             public void onItemClick(AdapterView<?> parent, View view, int position,  
  5.                     long id) {  
  6.                 String show = names[position]+"  發表了說說:                "+says[position];  
  7.                 Toast.makeText(MainActivity.this,show, Toast.LENGTH_LONG).show();  
  8.             }  
  9.         });  

執行截圖:



大概的ListView就介紹這麼多先,如果以後發現什麼有趣的話會繼續補上,有什麼寫得不好的,歡迎指出,可以在部落格上留言或者加Q:779878443

或者加android新手群:271781108,這幾天才建的群,沒什麼人,歡迎新手加入;


相關文章