[安卓] 16、ListView和GridView結合顯示單元實現自定義列表顯示效果

 

List在各種手機應用中都有體現，是安卓UI設計的必修課。

本文將介紹在開發中如何利用ListView和GridView設計自定義列表。

下面分別是用ListView和GridView做的效果：

    

上面兩個看似相差很大，但是其程式碼非常類似，主要有：

   

① 在頁面中嵌入ListView或GridView:

ListView的activity_main.xml

<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="com.beautifulzzzz.activity.MainActivity" >

    <ListView
        android:id="@+id/listView1"
                android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp" >

    </ListView>

</RelativeLayout>

GridView的activity_main.xml

<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:background="@color/orange_red"
    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="com.beautifulzzzz.activity.MainActivity" >

 <GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3"
        android:padding="5dp" >
    </GridView>

</RelativeLayout>

 

② 設計每個單元樣式：

兩個工程的item.xml一樣，如果想定製不同的效果：如朋友圈列表那樣的就要精心設計這個item了（不排除有其他方法）！

該item.xml佈局顯示效果就是上面一個圖片，下面一個文字

<?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:gravity="center"
    android:orientation="vertical"
    android:padding="22dp" 
    android:background="@drawable/item_selector">
    
<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="50dp" />

<TextView 
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#ffffff"
    android:text="文字"
    />
</LinearLayout>

 

③ 設計Adapter和監聽事件：

兩個程式碼很相似，下面紅色的部分是將資料和item.xml中的元素繫結~class ItemClickListener implements OnItemClickListener是item點選監聽事件類，在其內部呼叫.get(key)獲得點選item中相應的元素值（是一種map的儲存方式）。

ListView的MainActivity.java

public class MainActivity extends Activity {

    private ListView lview;
    private List<Map<String, Object>> data_list;
    private SimpleAdapter sim_adapter;
    // ICON
    private int[] icon = { R.drawable.icon_01, R.drawable.icon_02,
            R.drawable.icon_03, R.drawable.icon_04, R.drawable.icon_05,
            R.drawable.icon_06, R.drawable.icon_07, R.drawable.icon_08,
            R.drawable.icon_09, R.drawable.icon_10, R.drawable.icon_11,
            R.drawable.icon_12, R.drawable.icon_13, R.drawable.icon_14 };
    private String[] iconName = { "ͨ茶葉", "漢堡", "肉", "香腸", "披薩", "蝦", "水果", "魚",
            "麵包", "蟹", "雞腿", "根莖蔬菜", "蛋糕", "酒" };

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        // this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        // WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);

        lview = (ListView) findViewById(R.id.listView1);
        data_list = new ArrayList<Map<String, Object>>();

        getData();

27         String[] from = { "image", "text" };
28         int[] to = { R.id.image, R.id.text };
29         sim_adapter = new SimpleAdapter(this, data_list, R.layout.item, from,
30                 to);

        lview.setAdapter(sim_adapter);
        lview.setOnItemClickListener(new ItemClickListener());
    }

    public List<Map<String, Object>> getData() {
        for (int i = 0; i < icon.length; i++) {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("image", icon[i]);
            map.put("text", iconName[i]);
            data_list.add(map);
        }

        return data_list;
    }

    // 當AdapterView被單擊(觸控式螢幕或者鍵盤)，則返回的Item單擊事件
    class ItemClickListener implements OnItemClickListener {
        public void onItemClick(AdapterView<?> arg0,// The AdapterView where the
                                                    // click happened
                View arg1,// The view within the AdapterView that was clicked
                int arg2,// The position of the view in the adapter
                long arg3// The row id of the item that was clicked
        ) {
            // 在本例中arg2=arg3
            HashMap<String, Object> item = (HashMap<String, Object>) arg0
                    .getItemAtPosition(arg2);
            // 顯示所選Item的ItemText
            setTitle((String) item.get("text"));// the item is map,you can
                                                // seethe function getData,if
                                                // want get the value, just use
                                                // .get(key) to get the value
        }
    }
}

GridView的MainActivity.java

public class MainActivity extends Activity {

    private GridView gview;
    private List<Map<String, Object>> data_list;
    private SimpleAdapter sim_adapter;
    // ICON
    private int[] icon = { R.drawable.icon_01, R.drawable.icon_02,
            R.drawable.icon_03, R.drawable.icon_04, R.drawable.icon_05,
            R.drawable.icon_06, R.drawable.icon_07, R.drawable.icon_08,
            R.drawable.icon_09, R.drawable.icon_10, R.drawable.icon_11,
            R.drawable.icon_12, R.drawable.icon_13, R.drawable.icon_14 };
    private String[] iconName = { "ͨ茶葉", "漢堡", "肉", "香腸", "披薩", "蝦", "水果", "魚",
            "麵包", "蟹", "雞腿", "根莖蔬菜", "蛋糕", "酒" };

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        // this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        // WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);

        gview = (GridView) findViewById(R.id.gridView1);
        data_list = new ArrayList<Map<String, Object>>();

        getData();

27         String[] from = { "image", "text" };
28         int[] to = { R.id.image, R.id.text };
29         sim_adapter = new SimpleAdapter(this, data_list, R.layout.item, from,
30                 to);

        gview.setAdapter(sim_adapter);
        gview.setOnItemClickListener(new ItemClickListener());
    }

    public List<Map<String, Object>> getData() {
        for (int i = 0; i < icon.length; i++) {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("image", icon[i]);
            map.put("text", iconName[i]);
            data_list.add(map);
        }

        return data_list;
    }

    // 當AdapterView被單擊(觸控式螢幕或者鍵盤)，則返回的Item單擊事件
    class ItemClickListener implements OnItemClickListener {
        public void onItemClick(AdapterView<?> arg0,// The AdapterView where the
                                                    // click happened
                View arg1,// The view within the AdapterView that was clicked
                int arg2,// The position of the view in the adapter
                long arg3// The row id of the item that was clicked
        ) {
            // 在本例中arg2=arg3
            HashMap<String, Object> item = (HashMap<String, Object>) arg0
                    .getItemAtPosition(arg2);
            // 顯示所選Item的ItemText
            setTitle((String) item.get("text"));// the item is map,you can
                                                // seethe function getData,if
                                                // want get the value, just use
                                                // .get(key) to get the value
        }
    }
}

 

在研究上面問題過程中記錄了幾個有用的連結：

1、安卓 GridView item均勻分佈：http://zhidao.baidu.com/link?url=XphquqnT6InmtaovIy9XqfRNEaQqzE8JCvqsVN8H46Fb_aXCALxbADzotyMCNreQDiqC6i0Is1WUI5twCQfl6V1BkvbbW1RrzZoGHOSeNoq

2、Android API 中文（15） —— GridView：http://www.cnblogs.com/over140/archive/2010/10/19/1855366.html

3、gridview中的OnItemClickListener事件觸發問題！！！

4、Android應用開發筆記(10)：製作自定義背景Button按鈕、自定義形狀Button的全攻略

5、android selector(如對TextView點選樣式改變) - perfect亮：http://www.cnblogs.com/liangstudyhome/p/3695305.html

MMMMMMMMMMMMM

• 上面工程中點選item的點選效果被我重新定義過了，具體用了第5點連結中說的selector:
  • 在item.xml的第8行：android:background="@drawable/item_selector"
  • 在drawable資料夾內新建item_selector.xml

  • <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
        <item android:state_pressed="true"
            android:drawable="@color/orange_red_shen" />
        <item android:state_focused="true"
            android:drawable="@color/orange_red_shen" />
        <item android:drawable="@color/orange_red" />
    </selector>

MMMMMMMMMMMMM

上述兩個工程的原始碼：

GridView工程：http://pan.baidu.com/s/1sjQlRCp

ListView工程：http://pan.baidu.com/s/1i3zxUj7

 

 

@beautifulzzzz

  2015-11-10 持續更新中~