android 圆角ListView

概览                                                                                      

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为角的弧度，值越大角越圆。

效果