有些東西看多了，就厭煩了：extjs對我這種感覺最爲強烈。甚至，有時覺得設計之殤是審美疲勞。
直角看多了，就想看看圓角，不知何時，這幾年颳起了一陣陣的圓角設計風：CSS新標準納入圓角元素，iphone中幾乎隨處可見圓角設計，也開始出現很多圓角名片了...
今天我們就實現一個圓角的ListView效果。
圓角的設計，我們並不追求到處都用，無處不用，android中有少數界面用直角確實容易顯得鋒利，和周邊界面太過對比而顯得不協調，比如大欄目列表，設置等等，而採用圓角實現，則會活潑，輕鬆的多，也融合的特別好。
1.感覺
實際上在Android中因爲SDK中沒有默認對圓角的一個完整的支持，需要麻煩自定義設置才能實現完美的圓角效果，所以絕大多數應用都是採用分組直角列表這種樣式。
所以我覺得很有必要讓大家看看這些少數的不一樣的東西，看看有什麼不一樣的感覺。
先讓我們來看兩張圖片：
左邊的是Android的一個應用的設置界面，右邊是iphone系統的設置界面。
ps:上述只是效果，並不是說左邊的圓角列表就是用listview是實現的，事實上它是用LinearLayout佈局一個一個堆起來的。
2.原理
通過判斷ListView上點擊的項的位置，我們切換不同的選擇器，當然這個切換的動作我們需要定義在重寫ListView的onInterceptTouchEvent()方法中。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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文件定義如下：
|
1
2
3
4
5
6
7
8
9
10
|
<?xml
version="1.0"
encoding="utf-8"?> <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定義如下：
|
1
2
3
4
5
6
7
8
|
<?xml
version="1.0"
encoding="utf-8"?> <gradient
android:startColor="#B5E7B8" android:endColor="#76D37B" android:angle="270"/> <corners
android:topLeftRadius="4dip" android:topRightRadius="4dip"/></shape> |
如果是底部最後一項，則下面兩個角爲圓角，app_list_corner_round_bottom.xml定義如下：
|
1
2
3
4
5
6
7
8
|
<?xml
version="1.0"
encoding="utf-8"?> <gradient
android:startColor="#B5E7B8" android:endColor="#76D37B" android:angle="270"/> <corners
android:bottomLeftRadius="4dip" android:bottomRightRadius="4dip"
/></shape>
|
如果是中間項，則應該不需要圓角， app_list_corner_shape.xml定義如下：
|
1
2
3
4
5
6
|
<?xml
version="1.0"
encoding="utf-8"?> <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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
/** *
圓角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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?xml
version="1.0"
encoding="utf-8"?> 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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?xml
version="1.0"
encoding="utf-8"?> 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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
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的效果：
本文來自：http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html