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

本來這篇文章想併到上篇Android學習系列(16)--App列表之圓角ListView中的，但是若是如此就讓大家錯過一篇新的好的文章，著實可惜。
上篇中我們使用shape，corners，gradient實現了一個漸層的圓角效果，但是在完文之後的實踐中，我發現有時效果不甚滿意，選中和放手的事件監聽沒有去正確的判斷，然後漸層效果也比較單一，效能也覺得不是很快，不如用圖片來的驚豔和迅速，又懶的去改原來的，所以我又用圖片來實現一個更完美的效果。

1. 準備
您可能需要參考我之前的兩篇文章:
(1). Android學習系列(16)--App列表之圓角ListView
(2). Android學習系列(4)--App自適應draw9patch不失真背景
瞭解圓角的基本實現原理和9patch圖片的製作和注意事項。

2. (我準備了3套皮膚)

  

  

3. 圓角類CornerListView的實現：

/** * 圓角ListView */public class CornerListView extends ListView {    public CornerListView(Context context) {        this(context, null);    }    public CornerListView(Context context, AttributeSet attrs) {        super(context, attrs);        //整個listview的圓角背景        this.setBackgroundResource(R.drawable.corner_list_bg);    }    @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.corner_list_single_item);                                } else {                                    //第一項                                    setSelector(R.drawable.corner_list_first_item);                                }                        } else if (itemnum==(getAdapter().getCount()-1)){                             //最後一項                            setSelector(R.drawable.corner_list_last_item);                        } else {                            //中間項                            setSelector(R.drawable.corner_list_item);                        }                }                break;        case MotionEvent.ACTION_UP:                break;        }        return super.onInterceptTouchEvent(ev);    }}

從上面看到，我們用到了一張ListView的背景圖片和4個項選取器。

4. 素材
一種5張圖片素材：1張背景圖片和4個項選取器對應的選中圖片，都是9patch圖片：

    

分別對應的是：
R.drawable.corner_list_bg，
R.drawable.corner_list_first_pressed，
R.drawablecorner_list_last_pressed，
R.drawablecorner_list_pressed，
R.drawablecorner_list_single_pressed

5.選取器構造
根據前面的後4張圖片我們來構造選中時的對應選取器：

<!-- corner_list_first_item.xml --><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/corner_list_first_pressed" />    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/corner_list_first_pressed" /></selector><!-- corner_list_last_item.xml --><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/corner_list_last_pressed" />    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/corner_list_last_pressed" /></selector><!-- corner_list_item.xml --><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/corner_list_pressed" />    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/corner_list_pressed" /></selector><!-- corner_list_single_item.xml --><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/corner_list_single_pressed" />    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/corner_list_single_pressed" /></selector>

6. 應用
我直接把使用圓角的Activity代碼貼出來：

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);        map = new HashMap<String, String>();        map.put("text", "關於我們");        listData.add(map);        map = new HashMap<String, String>();        map.put("text", "支援我們，請點擊這裡的廣告");        listData.add(map);    }}

ps：記得設定cacheColorHit屬性為0或者"#00000000"！

7. 總結
在平時Android使用的過程中，發現很多設定介面的選項大量應用到了這種圓角效果，非常的漂亮，同時也發現很多應用，這個效果做的很不如意，包括一些大公司，要麼沒有選中效果，要麼listview整個的背景是圓角，但是選中的第一項和最後一項的選中效果還是直角，要麼乾脆為圓角裡設定一定像素的內邊距等等，我對此總結，算是對這個問題有一個比較好的解決方案（我已經在網上搜過，未發現有人把這個效果分享過來），獨樂樂不如眾樂樂。 

ps：附上3套皮膚素材：/Files/qianxudetianxia/cornerlist-skin.zip