天天看點

【Android 開發】:UI控件之 ListView 清單控件的使用1. Android中 ListView 概括    2. MVC模式的優點 3. 案例的實作

1. Android中 ListView 概括   

    Android中的清單控件非常靈活,可以自定義每一個清單項,實際上每一個清單項就是一個View

    在Android定義了3個清單控件:ListView、ExpandableListView 和 Spinner,其中Spinner就是在Windows中常見的下拉清單框。

    ListView控件用于清單的形式顯示資料,ListView控件采用MVC模式将前端顯示和後端資料進行分離。也就是說,ListView控件在裝載資料時并不是直接使用 ListView.add 或者類似的方法添加資料,而是需要指定一個Adapter對象。

MVC模式中的C(控制器,Controller) -----> Adapter

MVC模式中的V(視圖,View)         -----> ListView,用于顯示資料。

MVC模式中的M(模型,Model)        ----->  為ListView提供資料的List或數組

   在ListView控件中通過Adapter對象獲得需要顯示的資料,在建立Adapter對象時需要指定要顯示的資料(List或數組對象),是以,要顯示的資料與ListView之間通過Adapter對象進行連接配接,同時又互相獨立,也就是說,ListView隻知道顯示的資料來自Adapter,并不知道這些資料來自List還是數組。

   對于資料本身來說,隻是知道将這些資料添加到Adapter對象中,并不知道這些資料會被用于ListView控件或其他控件。如圖所示:

【Android 開發】:UI控件之 ListView 清單控件的使用1. Android中 ListView 概括    2. MVC模式的優點 3. 案例的實作
這邊的ArrayList可以手工去生成,而Coursor是一個遊标的操作,一般是資料庫方面的了

2. MVC模式的優點

    MVC把應用程式的邏輯層與界面是完全分開的,最大的好處是:界面設計人員可以直接參與到界面開發,程式員就可以把精力放在邏輯層上。而不是像以前那樣,設計人員把所有的材料交給開發人員,由開發人員來實作界面。在Eclipes工具中開發Android采用了更加簡單的方法,設計人員在AnroidDraw中設計界面,以XML方式儲存,在Eclipes中直接打開就可以看到設計人員設計的界面。邏輯處理的代碼則放在src檔案夾下。讓程式員更專注與業務。[實際上在Android開發中,UI界面的設計也主要是由Anroid程式員來實作的,美工處理的一般是圖檔方面的設計等]

1) 視圖層(View):一般采用XML檔案進行界面的描述,使用的時候可以非常友善的引入。同時便于後期界面的修改。邏輯中與界面對應的id不變化則代碼不用修改,大大增強了代碼的可維護性。

2) 控制層(Controller):Android的控制層的重任通常落在了衆多的Acitvity的肩上,這句話也就暗含了不要在Acitivity中寫代碼,要通過Activity交割Model業務邏輯層處理,這樣做的另外一個原因是Android中的Acitivity的響應時間是5s,如果耗時的操作放在這裡,程式就很容易被回收掉。[耗時的操作,例如從網絡中取資料]

3) 模型層(Model):對資料庫的操作、對網絡等的操作都應該在Model裡面處理,當然對業務計算等操作也是必須放在的該層的。就是應用程式中二進制的資料。

3. 案例的實作

實戰案例一:ListView普通清單控件的使用

在實作之前,我們需要補充一些關于ListView的知識,首先檢視一下Android api文檔的ListView.

1) ListView:這是一個用來顯示可以垂直滾動的清單,這裡面的選項都是來自與這個視圖關聯的 ListAdapter 中。

【重點】我們主要用到的是ListView中的 public void setAdapter (ListAdapter adapter)方法。它的作用是在ListView 中設定擴充卡,主要是做一些資料的處理,檢視 ListAdapter 接口可以發現很多實作它的子類,來滿足我們展示不同界面的資料的需求。如我們案例中要用到的的ArrayAdapter<T>
2) ArrayAdapter<T> : 這是一個基于數組的對象的集合,繼承BaseAdaper,預設的這個類它會提供一個資源id來關聯到一個簡單的TextView的樣式,如果你想要一個更複雜的布局,也可以自定義的去建構然後提供相應的資源id。檢視它的構造方法如下:
【Android 開發】:UI控件之 ListView 清單控件的使用1. Android中 ListView 概括    2. MVC模式的優點 3. 案例的實作
這裡我們使用第三個構造方法

public ArrayAdapter (Context context, int textViewResourceId, T[] objects)

1. 第一個參數表示上下問對象

2. 第二個參數表示關聯到TextView的樣式的id

3. 第三個參數表示構造的資料源,也就文章開頭中的 MVC 模型中的 Model。

3) 案例實作
1) 布局檔案
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <!-- 讓目前的 ListView 充滿整個螢幕  -->
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>

</RelativeLayout>
           
2) MyDataSource.java 作為資料源
public class MyDataSource {

    public MyDataSource() {
        // TODO Auto-generated constructor stub
    }
    
    public static List<String> getDataSource(){
        List<String> list = new ArrayList<String>();
        list.add("北京");
        list.add("上海");
        list.add("廣州");
        list.add("湖北");
        list.add("湖南");
        list.add("長沙");
        list.add("深圳");       
        return list;    
    }

}
           
3) 程式主要代碼
public class MainActivity extends Activity {
    
    private ListView listView;
    private ArrayAdapter<String> adapter;
    //作為資料源來使用
    private List<String> data = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initComponent();
        data = MyDataSource.getDataSource();       
        adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, data);
        listView.setAdapter(adapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
    private void initComponent(){
        listView = (ListView)findViewById(R.id.listview);
        
    }
}
           
4) 程式執行結果
【Android 開發】:UI控件之 ListView 清單控件的使用1. Android中 ListView 概括    2. MVC模式的優點 3. 案例的實作

實戰案例二:為ListView清單項添加單選框

  在上面案例的基礎上進行适當的修改,我們先查一下ListView的api文檔中的 public void setChoiceMode (int choiceMode)方法,這個表示給 ListView 添加樣式,它有以下幾種方式:
【Android 開發】:UI控件之 ListView 清單控件的使用1. Android中 ListView 概括    2. MVC模式的優點 3. 案例的實作
1) 案例實作:
修改第一個案例中的 MainActivity.java
...
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initComponent();
        data = MyDataSource.getDataSource();       
        adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_single_choice, data);
        //給每一個選項添加單選選項。
        //設定ListView的選擇的樣式為單選清單
        listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
        listView.setAdapter(adapter);
     
    }
...
           
2) 案例執行結果:
【Android 開發】:UI控件之 ListView 清單控件的使用1. Android中 ListView 概括    2. MVC模式的優點 3. 案例的實作

實戰案例三:為ListView清單項添加複選框

1) 案例實作
修改第一個案例中的 MainActivity.java
...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initComponent();
        data = MyDataSource.getDataSource();       
/*        adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_single_choice, data);
        //給每一個選項添加單選選項。
        //設定ListView的選擇的樣式為單選清單
        listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);*/
        
        //設定多選操作
        adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_multiple_choice, data);
        listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
        listView.setAdapter(adapter);
    }
...
           
2) 案例執行結果
【Android 開發】:UI控件之 ListView 清單控件的使用1. Android中 ListView 概括    2. MVC模式的優點 3. 案例的實作
3) 在這裡我們給它添加一個事件,ListView有很多觸發的事件,讀者可以自己去檢視Android的官方文檔
修改上述程式的主檔案 MainActivity.java:
...
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initComponent();
        data = MyDataSource.getDataSource();       
/*        adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_single_choice, data);
        //給每一個選項添加單選選項。
        //設定ListView的選擇的樣式為單選清單
        listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);*/
        
        //設定多選操作
        adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_multiple_choice, data);
        listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
        listView.setAdapter(adapter);
        //添加ListView長按的事件
        listView.setOnItemLongClickListener(new OnItemLongClickListener() {

            @Override
            public boolean onItemLongClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                // TODO Auto-generated method stub
                Toast.makeText(MainActivity.this, "click me", 1).show();
                return false;
            }
        });
    }
...
           
【Android 開發】:UI控件之 ListView 清單控件的使用1. Android中 ListView 概括    2. MVC模式的優點 3. 案例的實作