Android學習系列(16)–App列表之圓角ListView

有些東西看多了，就厭煩了：extjs對我這種感覺最為強烈。甚至，有時覺得設計之殤是審美疲勞。
直角看多了，就想看看圓角，不知何時，這幾年颳起了一陣陣的圓角設計風：CSS新標準納入圓角元素，iphone中幾乎隨處可見圓角設計，也開始出現很多圓角名片了...
今天我們就實現一個圓角的ListView效果。
圓角的設計，我們並不追求到處都用，無處不用，android中有少數介面用直角確實容易顯得鋒利，和周邊介面太過對比而顯得不協調，比如大欄目列表，設定等等，而採用圓角實現，則會活潑，輕鬆的多，也融合的特別好。 

1.感覺
實際上在Android中因為SDK中沒有預設對圓角的一個完整的支援，需要麻煩自訂設定才能實現完美的圓角效果，所以絕大多數應用都是採用分組直角列表這種樣式。
所以我覺得很有必要讓大家看看這些少數的不一樣的東西，看看有什麼不一樣的感覺。
先讓我們來看兩張圖片：

  

左邊的是Android的一個應用的設定介面，右邊是iphone系統的設定介面。
ps:上述只是效果，並不是說左邊的圓角列表就是用listview是實現的，事實上它是用LinearLayout布局一個一個堆起來的。

2.原理
通過判斷ListView上點擊的項的位置，我們切換不同的選取器，當然這個切換的動作我們需要定義在重寫ListView的onInterceptTouchEvent()方法中。

if(itemnum==0){    if(itemnum==(getAdapter().getCount()-1)){        //只有一項        setSelector(R.drawable.app_list_corner_round);    }else{        //第一項                                    setSelector(R.drawable.app_list_corner_round_top);    }}else if(itemnum==(getAdapter().getCount()-1))    //最後一項    setSelector(R.drawable.app_list_corner_round_bottom);else{    //中間一項                                setSelector(R.drawable.app_list_corner_shape);}

3.定義選取器
如果只有一項，我們需要四個角都是圓角，app_list_corner_round.xml檔案定義如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <gradient android:startColor="#B5E7B8"         android:endColor="#76D37B"         android:angle="270"/>    <corners android:topLeftRadius="4dip"        android:topRightRadius="4dip"        android:bottomLeftRadius="4dip"        android:bottomRightRadius="4dip"/></shape> 

如果是頂部第一項，則上面兩個角為圓角，app_list_corner_round_top.xml定義如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <gradient android:startColor="#B5E7B8"         android:endColor="#76D37B"         android:angle="270"/>    <corners android:topLeftRadius="4dip"        android:topRightRadius="4dip"/></shape> 

如果是底部最後一項，則下面兩個角為圓角，app_list_corner_round_bottom.xml定義如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <gradient android:startColor="#B5E7B8"         android:endColor="#76D37B"         android:angle="270"/>    <corners android:bottomLeftRadius="4dip"        android:bottomRightRadius="4dip" /></shape> 

如果是中間項，則應該不需要圓角， app_list_corner_shape.xml定義如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <gradient android:startColor="#B5E7B8"         android:endColor="#76D37B"         android:angle="270"/></shape> 

4.背景圖片
因為預設的情況下，ListView就要顯示一個圓角的邊框，這個我們使用一張9patch背景圖片來實現app_list_corner_border.9.png：

在這裡提示一下，做9patch背景圖片的時候，記得把內容地區定義為邊框線以內的地區。

5. 初步實現
參考前面提供的素材和核心代碼，我們初步實現如下:
(1).自訂CornerListView.java:

/** * 圓角ListView */public class CornerListView extends ListView {    public CornerListView(Context context) {        super(context);    }    public CornerListView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    public CornerListView(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        switch (ev.getAction()) {        case MotionEvent.ACTION_DOWN:                int x = (int) ev.getX();                int y = (int) ev.getY();                int itemnum = pointToPosition(x, y);                if (itemnum == AdapterView.INVALID_POSITION)                        break;                                 else                {                          if(itemnum==0){                                if(itemnum==(getAdapter().getCount()-1)){                                                                        setSelector(R.drawable.app_list_corner_round);                                }else{                                    setSelector(R.drawable.app_list_corner_round_top);                                }                        }else if(itemnum==(getAdapter().getCount()-1))                                setSelector(R.drawable.app_list_corner_round_bottom);                        else{                                                        setSelector(R.drawable.app_list_corner_shape);                        }                }                break;        case MotionEvent.ACTION_UP:                break;        }        return super.onInterceptTouchEvent(ev);    }}

這個CornerListView主要處理了點擊項的選取器的切換。
(2).列表布局檔案和清單項目布局檔案：
列表布局檔案main_tab_setting.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <com.tianxia.app.floworld.view.CornerListView android:id="@+id/setting_list"        android:layout_width="fill_parent"         android:layout_height="wrap_content"        android:layout_margin="10dip"        android:background="@drawable/app_list_corner_border"        android:cacheColorHint="#00000000">    </com.tianxia.app.floworld.view.CornerListView></LinearLayout>

清單項目布局檔案main_tab_setting_list_item.xml：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <ImageView android:id="@+id/setting_list_item_arrow"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_width="wrap_content"        android:layout_height="fill_parent"        android:layout_marginLeft="15dip"        android:layout_marginRight="15dip"        android:src="@drawable/appreciate_tab_list_item_arrow_small"/>    <TextView  android:id="@+id/setting_list_item_text"        android:layout_toLeftOf="@id/setting_list_item_arrow"        android:layout_width="fill_parent"         android:layout_height="wrap_content"        android:textSize="16dip"        android:textColor="#000000"        android:paddingTop="10dip"        android:paddingBottom="10dip"        android:paddingLeft="10dip" /></RelativeLayout>

(3)介面實現
顯示介面SettingTabActivity.java:

public class SettingTabActivity extends Activity{        private CornerListView cornerListView = null;        private List<Map<String,String>> listData = null;    private SimpleAdapter adapter = null;            @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main_tab_setting);                cornerListView = (CornerListView)findViewById(R.id.setting_list);        setListData();                adapter = new SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item , new String[]{"text"}, new int[]{R.id.setting_list_item_text});        cornerListView.setAdapter(adapter);    }        /**     * 設定列表資料     */    private void setListData(){        listData = new ArrayList<Map<String,String>>();                Map<String,String> map = new HashMap<String, String>();        map.put("text", "圖庫更新");        listData.add(map);                map = new HashMap<String, String>();        map.put("text", "收藏圖片");        listData.add(map);                map = new HashMap<String, String>();        map.put("text", "下載目錄");        listData.add(map);    }}

(4).
通過以上實現，我們基本達到了圓角的ListView的效果：