概览
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为角的弧度,值越大角越圆。
效果