android listview 圆角的实现方案，模仿Iphone的UITableView

最新推荐文章于 2022-03-03 21:16:42 发布
最新推荐文章于 2022-03-03 21:16:42 发布
阅读量1.4k 收藏
点赞数
分类专栏： android 文章标签： android listview iphone layout encoding button

这几天十一放假，在群里非常活跃，很多朋友问如何实现android中listview的圆角功能，像Iphone设置里面的tableView如 如下效果：

1349266362_4068

实现过程

其实这个功能实现也很简单，只是很多朋友没有仔细的去了解android布局的相关知识，这里我们使用了android中的shade的圆角功能来实现的。

java代码很简单，就一个activity，一个listview。listview中要判断item的位置，第一条，最后一条和中间的item是不一样的。代码如下：

   java代码和布局文件

AndroidlistviewActivity.java

01 package com.yangfuhai.listviewdemo;
02  
03 import android.app.Activity;
04 import android.os.Bundle;
05 import android.view.View;
06 import android.widget.ListView;
07 /**
08  * @title 圆角listview的实现
09  * @description 圆角listview的实现
10  * @company 探索者网络工作室(www.tsz.net)
11  * <a href="http://my.oschina.net/arthor" class="referer" target="_blank">@author</a>  michael Young (www.YangFuhai.com)
12  * @version 1.0
13  * @created 2012-10-3
14  */
15 public class AndroidlistviewActivity extends Activity {
16     ListView mListView;
17     ListViewAdapter mListViewAdapter;
18  
19     @Override
20     public void onCreate(Bundle savedInstanceState) {
21         super.onCreate(savedInstanceState);
22         setContentView(R.layout.main);
23         mListView = (ListView) findViewById(R.id.listview);
24         mListViewAdapter = new ListViewAdapter(this);
25         mListView.setAdapter(mListViewAdapter);
26     }
27  
28     /**
29      * 添加 按钮执行的操作
30      * @param view
31      */
32     static int i = 0;
33     public void add(View view) {
34         mListViewAdapter.addData(" ----item ---   "+i+"   ---");
35         mListViewAdapter.notifyDataSetChanged();
36         i++;
37     }
38  
39     /**
40      * 删除按钮执行的操作
41      * @param view
42      */
43     public void del(View view) {
44         mListViewAdapter.delData();
45         mListViewAdapter.notifyDataSetChanged();
46         if(i>0) i--;
47     }
48 }

适配器 ListViewAdapter.java

01 package com.yangfuhai.listviewdemo;
02  
03 import java.util.ArrayList;
04 import java.util.List;
05  
06 import android.content.Context;
07 import android.view.View;
08 import android.view.ViewGroup;
09 import android.widget.BaseAdapter;
10 import android.widget.TextView;
11 /**
12  * @title 圆角listview的实现 适配器
13  * @description ListViewAdapter listview的适配器
14  * @company 探索者网络工作室(www.tsz.net)
15  * <a href="http://my.oschina.net/arthor" class="referer" target="_blank">@author</a>  michael Young (www.YangFuhai.com)
16  * @version 1.0
17  * @created 2012-10-3
18  */
19 public class ListViewAdapter extends BaseAdapter {
20  
21     private List<String> datas = new ArrayList<String>(); //数据
22     private Context mContext;
23     public ListViewAdapter(Context c) {
24         this.mContext = c;
25     }
26     public void addData(String strData){
27         if(strData!=null) datas.add(strData);
28     }
29  
30     public void delData(){
31         if(datas.size() > 0) datas.remove(datas.size() - 1);
32     }
33  
34     @Override
35     public int getCount() {
36         return datas.size();
37     }
38  
39     @Override
40     public Object getItem(int arg0) {
41         return datas.get(arg0);
42     }
43  
44     @Override
45     public long getItemId(int position) {
46         return position;
47     }
48  
49     /**
50      * listview中要判断item的位置，第一条，最后一条和中间的item是不一样的。
51      */
52     @Override
53     public View getView(int position, View convertView, ViewGroup parent) {
54         View view  = null ;
55         if(datas.size()>1){//listView 数据是两条以上
56             if(position == 0){ //第一条数据
57                 view = View.inflate(mContext, R.layout.list_item_top, null);
58             }else if(position == datas.size() - 1){ //最后一条数据
59                 view = View.inflate(mContext, R.layout.list_item_bottom, null);
60             }else{ //中间的数据
61                 view = View.inflate(mContext, R.layout.list_item_middle, null);
62             }
63         }else{ //只有一条数据
64             view = View.inflate(mContext, R.layout.list_item_single, null);
65         }
66  
67         ((TextView)view.findViewById(R.id.title)).setText(datas.get(position));//设置文本样式
68         return view;
69     }
70  
71 }

布局文件main.xml

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     android:layout_width="wrap_content"
04     android:layout_height="fill_parent"
05     android:orientation="vertical" >
06  
07     <TextView
08         android:layout_width="fill_parent"
09         android:layout_height="wrap_content"
10         android:text="请点击添加删除 查看效果" />
11  
12     <LinearLayout
13         android:layout_width="match_parent"
14         android:layout_height="wrap_content"
15         android:gravity="center" >
16  
17         <Button
18             android:id="@+id/buttonAdd"
19             android:layout_width="wrap_content"
20             android:layout_height="wrap_content"
21             android:onClick="add"
22             android:text="添加" />
23  
24         <Button
25             android:id="@+id/buttonDel"
26             android:layout_width="wrap_content"
27             android:layout_height="wrap_content"
28             android:onClick="del"
29             android:text="删除" />
30     </LinearLayout>
31  
32     <ListView
33         android:id="@+id/listview"
34         android:layout_marginLeft="10dip"
35         android:layout_marginRight="10dip"
36         android:layout_width="fill_parent"
37         android:layout_height="wrap_content" />
38  
39 </LinearLayout>

listview的布局文件和资源文件

上面的代码很简单，没有什么可讲的。主要讲的是listview每个item的样式文件

 

listview的item有四个布局文件，分别是：只有一个item时候的样式，多个item时候上边item的样式，下边item的样式，中间item的样式。 布局文件和背景文件对应关系如下图所示：

1349267800_1967

文件文件

listview的item布局样式如下：

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     style="@style/list_item_middle"
04     android:layout_width="fill_parent"
05     android:layout_height="wrap_content"
06     android:minHeight="60dip"
07     >
08  
09     <TextView
10         android:id="@+id/title"
11         style="@style/content_page_large_text"
12         android:layout_width="match_parent"
13         android:layout_height="wrap_content"
14         android:text="title" />
15  
16 </LinearLayout>

这四个布局文件中唯一不同的只是他们的stype属性（style=”@style/list_item_middle”）不同，也就是他们的背景不同。

 

资源文件

下面我们先贴出布局文件背景文件的shade代码，然后再仔细的讲解背景这些文件里面代码的意思。

background_view_rounded_bottom.xml

01 <?xml version="1.0" encoding="UTF-8"?>
02 <inset xmlns:android="http://schemas.android.com/apk/res/android"
03     android:insetBottom="1.0px"
04     android:insetLeft="1.0px"
05     android:insetRight="1.0px"
06     android:insetTop="1.0px" >
07  
08     <selector>
09         <item android:state_pressed="true">
10             <shape>
11                 <gradient
12                     android:angle="270.0"
13                     android:endColor="@color/base_end_color_pressed"
14                     android:startColor="@color/base_start_color_pressed" />
15  
16                 <corners
17                     android:bottomLeftRadius="10.0dip"
18                     android:bottomRightRadius="10.0dip"
19                     android:radius="2.0dip"
20                     android:topLeftRadius="0.0dip"
21                     android:topRightRadius="0.0dip" />
22             </shape>
23         </item>
24         <item>
25             <shape>
26                 <gradient
27                     android:angle="270.0"
28                     android:endColor="@color/base_end_color_default"
29                     android:startColor="@color/base_start_color_default" />
30  
31                 <corners
32                     android:bottomLeftRadius="11.0dip"
33                     android:bottomRightRadius="11.0dip"
34                     android:radius="2.0dip"
35                     android:topLeftRadius="0.0dip"
36                     android:topRightRadius="0.0dip" />
37             </shape>
38         </item>
39     </selector>
40  
41 </inset>

background_view_rounded_middle.xml：

01 <?xml version="1.0" encoding="UTF-8"?>
02 <inset xmlns:android="http://schemas.android.com/apk/res/android"
03     android:insetBottom="0.0px"
04     android:insetLeft="1.0px"
05     android:insetRight="1.0px"
06     android:insetTop="1.0px" >
07  
08     <selector>
09         <item android:state_pressed="true">
10             <shape>
11                 <gradient
12                     android:angle="270.0"
13                     android:endColor="@color/base_end_color_pressed"
14                     android:startColor="@color/base_start_color_pressed" />
15  
16                 <corners android:radius="0.0dip" />
17             </shape>
18         </item>
19         <item>
20             <shape>
21                 <gradient
22                     android:angle="270.0"
23                     android:endColor="@color/base_end_color_default"
24                     android:startColor="@color/base_start_color_default" />
25  
26                 <corners android:radius="0.0dip" />
27             </shape>
28         </item>
29     </selector>
30  
31 </inset>

background_view_rounded_single.xml ：

01 <?xml version="1.0" encoding="UTF-8"?>
02 <inset xmlns:android="http://schemas.android.com/apk/res/android"
03     android:insetBottom="1.0px"
04     android:insetLeft="1.0px"
05     android:insetRight="1.0px"
06     android:insetTop="0.0px" >
07  
08     <selector>
09         <item android:state_pressed="true">
10             <shape>
11                 <gradient
12                     android:angle="270.0"
13                     android:endColor="@color/base_end_color_pressed"
14                     android:startColor="@color/base_start_color_pressed" />
15  
16                 <corners android:radius="11.0dip" />
17             </shape>
18         </item>
19         <item>
20             <shape>
21                 <stroke
22                     android:width="1.0px"
23                     android:color="@color/rounded_container_border" />
24  
25                 <gradient
26                     android:angle="270.0"
27                     android:endColor="@color/base_end_color_default"
28                     android:startColor="@color/base_start_color_default" />
29  
30                 <corners android:radius="10.0dip" />
31             </shape>
32         </item>
33     </selector>
34  
35 </inset>

background_view_rounded_top.xml ：

01 <?xml version="1.0" encoding="UTF-8"?>
02 <inset xmlns:android="http://schemas.android.com/apk/res/android"
03     android:insetBottom="0.0px"
04     android:insetLeft="1.0px"
05     android:insetRight="1.0px"
06     android:insetTop="1.0px" >
07  
08     <selector>
09         <item android:state_pressed="true">
10             <shape>
11                 <gradient
12                     android:angle="270.0"
13                     android:endColor="@color/base_end_color_pressed"
14                     android:startColor="@color/base_start_color_pressed" />
15  
16                 <corners
17                     android:bottomLeftRadius="0.0dip"
18                     android:bottomRightRadius="0.0dip"
19                     android:radius="2.0dip"
20                     android:topLeftRadius="10.0dip"
21                     android:topRightRadius="10.0dip" />
22             </shape>
23         </item>
24         <item>
25             <shape>
26                 <gradient
27                     android:angle="270.0"
28                     android:endColor="@color/base_end_color_default"
29                     android:startColor="@color/base_start_color_default" />
30  
31                 <corners
32                     android:bottomLeftRadius="0.0dip"
33                     android:bottomRightRadius="0.0dip"
34                     android:radius="2.0dip"
35                     android:topLeftRadius="11.0dip"
36                     android:topRightRadius="11.0dip" />
37             </shape>
38         </item>
39     </selector>
40  
41 </inset>

listview资源文件讲解

我们拿 background_view_rounded_top.xml （最后一个资源文件）来给大家讲解 里面的每个属性的含义：

 

inset

inset：这种资源指向一个InsetDrawable对象，它能够用指定的距离嵌入到另一个可绘制资源中。它的属性有：

android:drawable=”@drawable/drawable_resource”
android:insetTop=”dimension”
android:insetRight=”dimension”
android:insetBottom=”dimension”
android:insetLeft=”dimension”
其中android:drawable是要嵌入的图片资源，android：insetXXX是嵌入位置。

selector

selector：是一种样式选择器，它用来指导某个view（button,textview,edittext等）的不同状态（比如：正常的状态，获得焦点的状态，按下的状态 等）对应的不同资源。

shade

shade gradient

shade gradient：颜色渐变
android:startColor和android:endColor分别为渐变的起始颜色和结束颜色
android:angle是渐变角度，必须为45的整数倍 。
渐变模式有两种：
android:type=”linear”，线性渐变，白话就是渐变是从一头到另一头的颜色渐变过程。
android:type=”radial”，径向渐变，白话就是渐变是从中心到四周的过程。径向渐变需要指定渐变半径android:gradientRadius=”50″。

shade corners

shade  corners：圆角 （这篇文章主要就是用到了它）
android:radius为角的弧度，值越大角越圆。

其他

shade  除了gradient和corners以外，还有stroke（描边），solid （实心），padding等（具体大家可以看android的帮助文档）。

 

实现效果图

通过以上的代码，我们实现了效果如下图：

1349270539_85121349270544_1907

1349270548_8038

 

 

完毕

 

源码下载

源码下载：http://download.csdn.net/detail/michael_yy/4614701 (免积分下载)

转载请注明出处。http://blog.csdn.net/michael_yy/article/details/8038653  或 http://www.yangfuhai.com/topic/48.html （杨福海的博客）

tianxiangshan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android UI控件之ListView实现圆角效果
08-28
主要为大家详细介绍了Android UI控件之ListView实现圆角效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android列表【android开发记录片】android下实现圆角列表布局控件
weixin_34216196的博客
05-24 71
每日一贴,明天的内容关键字为android列表      引子     明天闲来做了一个类似iphone的圆角列表，先看效果。          图片中绿色线条的是列表头文字，红色的是列表题名文字。此两处都可以显示/隐藏及动态改变值。对于列表头还可以设置文字的位置（靠左，靠右，居中）。点击图片中的地域一行，转到下面省分选择：                关于列表行     列...
Android 圆角ListView效果实现
Ricky
03-14 1294
在项目开发中我们可能会碰到圆角ListView效果，因为直角的看起来确实不那么雅观，可能大家会想到用图片实现，试想上中下要分别做三张图片，这样做太繁琐，这时使用shape来实现不失为一种更好的实现方式。 先看一下Android 中Shape的使用方法： solid：实心，就是填充的意思 android:color指定填充的颜色 gradient：渐变 android:startColor
基于Android实现ListView圆角效果
09-02
本篇将详细讲解如何基于Android实现ListView的圆角效果，以及其实现原理。 首先，实现ListView圆角效果主要依赖于Android的Drawable资源，特别是Shape Drawable。Shape Drawable允许我们定义不同形状（如矩形、圆形...
Android ListView圆角
struggling的专栏
12-21 470
首先来看看ListView 相关基本属性 1、单击列表后，列表的背景变成黑色了。可通过指定android:cacheColorHint的属性来放变它，将它指定为透明。使用下面的属性值：     android:cacheColorHint="#000000" 即可。 2、去除列表项中间的分割线：android:divider="#00000000"，这里的值也可以指向一个drawable
android 圆形listview,android 圆形ListView实现，并附带圆角ImageView
weixin_28745067的博客
05-27 138
转载请注明出处：王亟亟的大牛之路平时 垂直向下的ListView已经司空见惯，换一种带一定角度的圆角ListView应该会给用户不同的体验项目目录： 2个自定义View一个主ActivityMainActivitypublic class MainActivity extends Activity {private ListView lv;//本地图片模拟数据源private int[] imag...
android带圆角的布局,Android开发带有圆角列表UI布局续
weixin_34184876的博客
05-26 85
当前位置：操作系统 > 安卓/Android >>Android开发带有圆角列表UI布局续MainActivity.java 代码 实现信息的显示和隐藏功能[java]public class MainActivity extends Activity {private LinearLayout one;private LinearLayout tow;private Linea...
Android 圆角的效果实现
weixin_30291791的博客
07-01 138
Android 自定义ImageView实现圆角图片昨天给学生布置作业，写微信首页，也就是聊天的界面，listView里的item中联系人的头像是圆角的，图形界面如下： 那么我就仔细研究了圆角的具体实现。那么首先，我想到了第一种实现方案：1、就是给ImageView定义shape.xml文件，然后用src指定组件背景。那么想到这个方案的时候，我首先了解了一下ImageView的src和backg...
TabList实现listview实现类似table
weixin_34309435的博客
10-05 218
为什么80%的码农都做不了架构师？>>> ...
android os仿ios,安卓仿ios12桌面全套仿安卓完美版
热门推荐
weixin_42517607的博客
05-27 2万+
详情安卓仿ios12桌面全套仿安卓完美版，苹果系统的仿安卓系统工具，使用便捷，安卓手机也能体验苹果系统，从桌面、主题、UI、系统内的各种细节轻松体验效果，画面流畅轻松使用启动器操作使用，喜欢的朋友快来下载吧。安卓仿ios12桌面全套仿安卓完美版优势1、IPhone12启动器是安卓手机中热门的IPhone主题替换应用，让你安卓桌面直接变成IPhone主题;2、从主题，桌面，UI以及系统内的各种细节都...
Android ListView圆角实现
huangdroid的专栏---不要让任何事情成为你不去学习的理由！
09-10 942
在android上开发项目，如果仅仅是采用默认的样式可能不是很美观，需要编写响应的样式来使界面美观，在iphone上常用的圆角ListView的实现。 主要的实现思路就是：通过重写ListView中拦截触摸的事件方式，在生成ListView时候根据不同行采用不同的样式。如第一个行，最末一行，和中建行。（特殊的情况下只有一行的时候，四个角均为圆角考虑）。 实现如下：  最后一行为时候，下方
安卓中的ListView做到每一个item都不同---以实现圆角背景效果为例
英勇的博客
03-03 816
前言 很多书籍都会讲到ListView的缓存优化，这个想必大家都知道。也正是因为缓存，让ListView变得有时候让人摸不着头脑。比如说我想做一个有圆角背景效果的ListView，如下图： 也许很多人都会想到在getView方法里，根据position去采用不同的圆角背景图片，如果仅仅是这样，你会发现结果出乎你的意料：为什么有些地方不该圆的它圆了，该圆的它不圆？其实这就是缓存机制导致的。当然了，你也可以选择不采用缓存，但是这会导致性能大大降低，当数据量比较大时，快速滑动列表就会出现比较明显的卡顿现象。本篇
android自定义listview实现圆角
daditao的专栏
05-29 1011
http://blog.csdn.net/wangkuifeng0118/article/details/7746175 在项目中我们会经常遇到这种圆角效果，因为直角的看起来确实不那么雅观，可能大家会想到用图片实现，试想上中下要分别做三张图片，这样既会是自己的项目增大也会增加内存使用量，所以使用shape来实现不失为一种更好的实现方式。在这里先看一下shape的使用：
android 代码设置圆角,Android中用Shape实现圆角和局部圆角
weixin_42441929的博客
05-26 2868
本文讲解如何实现布局边框的部分圆角大家可能都知道圆角实现其实很简单, 在drawable文件夹下新建xml文件加入以下代码情景1: 四个角均为圆角android:shape="rectangle">android:width="1dp"android:color="@color/blue"/>android:radius="2dp"/>通过以上代码设置成布局的background...
Android 实现圆角/圆形图片的几种方式
雨汨的博客
11-25 754
1、Xfermode 绘制两层，先绘制形状，再绘制图片，然后根据Xfermode来去计算两个图层的关系(SRC_IN：显示的区域是二者交集)。 Glide实现圆形图片 static { CIRCLE_CROP_BITMAP_PAINT = new Paint(CIRCLE_CROP_PAINT_FLAGS); CIRCLE_CROP_BITMAP_PAINT.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); }
android ListView实现圆角
最新发布
05-14
要在Android的ListView中实现圆角，可以使用以下步骤： 1. 创建一个圆角背景 在drawable文件夹中创建一个drawable资源文件，例如“listview_background.xml”，并添加以下代码： ```xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="20dp"/> <solid android:color="#ffffff"/> </shape> ``` 这将创建一个圆角为20dp的矩形，并填充白色。 2. 在ListView中应用背景 在ListView的布局文件中，使用android:background属性将刚刚创建的背景应用于ListView。 ```xml <ListView android:id="@+id/my_listview" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/listview_background" /> ``` 这将使ListView具有圆角背景。 3. 可选：在ListView项中应用圆角 如果您希望ListView中的每个项都具有圆角，请在ListView项的布局文件中应用相同的圆角背景。 ```xml <RelativeLayout android:id="@+id/list_item" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/listview_background" > <!-- Add your list item views here --> </RelativeLayout> ``` 这将使每个ListView项都具有圆角背景。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值