概覽
l 目的
l 方法
l 具體實現
l 注意事項
l 效果
目的
原生的ListView出來的效果顯然太平淡了，大多應用開始使用圓角ListView來增添用界面的
美感。本文的目的是實現ListView圓角。
方法
論壇上基本上是兩種實現方式。一種是shape實現，另一種是9.png圖片實現。根據自己喜
好選擇哪種方式實現
具體實現
本文采用shape 方式實現。
l 圓角背景list_corner_round_bg..xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!-- 漸變 -->
<gradient android:angle="180" android:endColor="#FFCCCCCC"
android:startColor="@android:color/white" />
<!-- 描邊 -->
<stroke android:width="1dp" android:color="@color/color_gray" />
<!-- 實心填充 -->
<solid android:color="@color/color_white" />
<!-- 圓角 -->
<corners android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip" android:topLeftRadius="8dip"
android:topRightRadius="8dip" />
</shape>
l List第一項背景 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"/>
-->
<gradient
android:angle="270"
android:endColor="#40B9FF"
android:startColor="#BFEEFF" />
<corners
android:topLeftRadius="8dip"
android:topRightRadius="8dip" />
</shape>
l List中間項背景list_corner_round_mid.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"/>
-->
<gradient
android:angle="270"
android:endColor="#40B9FF"
android:startColor="#BFEEFF" />
</shape>
l List最後項背景 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"/>
-->
<gradient
android:angle="270"
android:endColor="#40B9FF"
android:startColor="#BFEEFF" />
<corners
android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip" />
</shape>
l List 只有一項的情況時的背景 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"/>
-->
<gradient
android:angle="270"
android:endColor="#40B9FF"
android:startColor="#BFEEFF" />
<corners
android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip"
android:topLeftRadius="8dip"
android:topRightRadius="8dip" />
</shape>
l 繼承ListView的CornerListView.lava
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 == 0) {
if (itemnum == (getAdapter().getCount() - 1)) {
// 只有一項
setSelector(R.drawable.list_corner_round);
} else {
// 第一項
setSelector(R.drawable.list_corner_round_top);
}
} else if (itemnum == (getAdapter().getCount() - 1))
// 最後一項
setSelector(R.drawable.list_corner_round_bottom);
else {
// 中間一項
setSelector(R.drawable.list_corner_round_mid);
}
break;
case MotionEvent.ACTION_UP:
break;
}
return super.onInterceptTouchEvent(ev);
}
}
l 主界面佈局
<com.aaron.csdn.CornerListView
android:id="@+id/local_listView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/list_corner_round_bg"
android:cacheColorHint="#00000000"
android:divider="#000000"
android:dividerHeight="0.5px"
android:fadingEdge="none" />
注意事項
solid：實心，就是填充的意思
android:color指定填充的顏色
gradient：漸變
android:startColor和android:endColor分別爲起始和結束顏色，ndroid:angle是漸變角度，必須爲45的
整數倍。
另外漸變默認的模式爲android:type="linear"，即線性漸變，可以指定漸變爲徑向漸
變，android:type="radial"，徑向漸變需要指定半徑android:gradientRadius="50"。
stroke：描邊
android:width="2dp" 描邊的寬度，android:color描邊的顏色。
我們還可以把描邊弄成虛線的形式，設置方式爲：
android:dashWidth="5dp"
android:dashGap="3dp"
其中android:dashWidth表示'-'這樣一個橫線的寬度，android:dashGap表示之間隔開的距離。
corners：圓角
android:radius爲角的弧度，值越大角越圓。
效果
