Android 实现ListView圆角效果






今天，简单讲讲如何实现使用 

ListView显示圆角。

其实代码很多都可以解决，这是在网上搜索的一个解决的代码。

无论是网站，还是APP，人们都爱看一些新颖的视图效果。直角看多了，就想看看圆角，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，特别是在iphone中几乎随处可见圆角设计，现在也开始出现很多圆角名片了。

现在就给大家实现一个圆角的ListView效果。 圆角的设计，我们并不追求到处都用，无处不用，android中有少数界面用直角确实容易显得锋利，和周边界面太过对比而显得不协调，比如大栏目列表，设置等等，而采用圆角实现，则会活泼，轻松的多，也融合的特别好。
  

先看下在IPhone中实现圆角效果的一个图片：

具体实现                                                                               

本文采用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"/>--><gradientandroid:angle="270"android:endColor="#40B9FF"android:startColor="#BFEEFF" /><cornersandroid: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"/>--><gradientandroid: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"/>--><gradientandroid:angle="270"android:endColor="#40B9FF"android:startColor="#BFEEFF" /><cornersandroid: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"/>--><gradientandroid:angle="270"android:endColor="#40B9FF"android:startColor="#BFEEFF" /><cornersandroid: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); ;}@Overridepublic 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.CornerListViewandroid: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为角的弧度，值越大角越圆。

效果                                                                                      

 

 

 

这里简单讲讲，其实就是先写三个shape文件，一个是上面都是圆角，一个是下面都是圆角，一个是上下都是圆角。然后自定义一个listview，重写onInterceptTouchEvent，让listview根据item所在位置和listview的数据总数来确定布局。

Android 实现ListView圆角效果就讲完了。

就这么简单。

总结

以上是生活随笔为你收集整理的Android 实现ListView圆角效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。