Android ListView圆角实现

最新推荐文章于 2024-05-08 04:21:09 发布
最新推荐文章于 2024-05-08 04:21:09 发布
阅读量943 收藏
点赞数
分类专栏： Android学习资料 文章标签： android listview layout encoding import string

在android上开发项目，如果仅仅是采用默认的样式可能不是很美观，需要编写响应的样式来使界面美观，在iphone上常用的圆角ListView的实现。

主要的实现思路就是：通过重写ListView中拦截触摸的事件方式，在生成ListView时候根据不同行采用不同的样式。如第一个行，最末一行，和中建行。（特殊的情况下只有一行的时候，四个角均为圆角考虑）。

实现如下： 

最后一行为时候，下方两个角为圆角样式如下：

app_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="#BFEEFF"   
        android:endColor="#40B9FF"   
        android:angle="270"/> 
    <corners android:bottomLeftRadius="6dip" 
        android:bottomRightRadius="6dip" /> 
</shape>
第一行为圆角且仅仅为一条记录使用样式：

app_list_corner_round.xml 

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient android:startColor="#BFEEFF"   
        android:endColor="#40B9FF"   
        android:angle="270"/> 
    <corners android:topLeftRadius="6dip" 
        android:topRightRadius="6dip" 
        android:bottomLeftRadius="6dip" 
        android:bottomRightRadius="6dip"/> 
</shape>

第一行为圆角且有多条记录使用样式：

app_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="#BFEEFF"
        android:endColor="#40B9FF"
        android:angle="270"/>
    <corners android:topLeftRadius="6dip"
        android:topRightRadius="6dip"/>
</shape>
多行记录非第一行和最末一行使用的样式： 

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient android:startColor="#BFEEFF"   
        android:endColor="#40B9FF"   
        android:angle="270"/> 
</shape>

重写的ListView  

package com.easyway.listview.corner;  
import android.content.Context;  
import android.util.AttributeSet;  
import android.view.MotionEvent;  
import android.widget.AdapterView;  
import android.widget.ListView;  

/** 
*  圆角ListView 
*      重写ListView的样式实现相关的样式 
*  app_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="#BFEEFF"  
        android:endColor="#40B9FF"  
        android:angle="270"/> 
    <corners android:topLeftRadius="6dip" 
        android:topRightRadius="6dip"/> 
</shape>

*  android:shape 配置的是图形的形式，主要包括方形、圆形等，上边代码为方形。  
*  gradient节点主要配置起点颜色、终点颜色、中间点的坐标、中间点的颜色、渐变角度（90度为上下渐变，0为左右渐变），  
*  padding节点主要配置上下左右边距，  
*  corners节点配置四周园角的半径。   
*    
*   
* @Title:   
* @Description: 实现TODO  
* @Copyright:Copyright (c) 2011  
* @Company:易程科技股份有限公司  
* @Date:2012-7-16  
* @author  longgangbai  
* @version 1.0  
*/   

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 == AdapterView.INVALID_POSITION)  
                        break;                 
                else{  
       if(itemnum==0){  
                        if(itemnum==(getAdapter().getCount()-1)){ 
                            setSelector(R.drawable.app_list_corner_round); //仅仅一行记录的样式  
                        }else{  
                            setSelector(R.drawable.app_list_corner_round_top); //多行且第一行的样式  
                        }  
                    }else if(itemnum==(getAdapter().getCount()-1))  //最后一行的样式  
                            setSelector(R.drawable.app_list_corner_round_bottom);  
                    else{        
                        setSelector(R.drawable.app_list_corner_shape);  
                    }  
                }  
                break;  
        case MotionEvent.ACTION_UP:  
                break;  
        }  
        return super.onInterceptTouchEvent(ev);  
    }  
} 
 
package com.easyway.listview.corner;
 
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.AdapterView;
import android.widget.ListView;
 
/**
*  圆角ListView
*      重写ListView的样式实现相关的样式
*  app_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="#BFEEFF"
        android:endColor="#40B9FF"
        android:angle="270"/>
    <corners android:topLeftRadius="6dip"
        android:topRightRadius="6dip"/>
</shape>
* 
*  android:shape 配置的是图形的形式，主要包括方形、圆形等，上边代码为方形。
*  gradient节点主要配置起点颜色、终点颜色、中间点的坐标、中间点的颜色、渐变角度（90度为上下渐变，0为左右渐变），
*  padding节点主要配置上下左右边距，
*  corners节点配置四周园角的半径。
* 
*
* @Title:
* @Description: 实现TODO
* @Copyright:Copyright (c) 2011
* @Company:易程科技股份有限公司
* @Date:2012-7-16
* @author  longgangbai
* @version 1.0
*/
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 == AdapterView.INVALID_POSITION)
                        break;               
                else{
                if(itemnum==0){
                        if(itemnum==(getAdapter().getCount()-1)){       
                            setSelector(R.drawable.app_list_corner_round); //仅仅一行记录的样式
                        }else{
                            setSelector(R.drawable.app_list_corner_round_top); //多行且第一行的样式
                        }
                }else if(itemnum==(getAdapter().getCount()-1))  //最后一行的样式
                        setSelector(R.drawable.app_list_corner_round_bottom);
                else{            
                    setSelector(R.drawable.app_list_corner_shape);
                }
                }
                break;
        case MotionEvent.ACTION_UP:
                break;
        }
        return super.onInterceptTouchEvent(ev);
135
    }
136
}

主要布局类main.xml 

<?xml version="1.0" encoding="utf-8"?> 
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
03     android:layout_width="fill_parent" 
04     android:id="@+id/listview_layout" 
05     android:layout_height="fill_parent" 
06     android:orientation="vertical" > 
07    
08     <LinearLayout 
09         android:id="@+id/linearLayout1" 
10         android:layout_width="match_parent" 
11         android:layout_height="wrap_content" 
12         android:orientation="vertical" 
13         android:paddingBottom="5dp" 
14         android:paddingLeft="25dp" 
15         android:paddingTop="15dp" > 
16    
17         <TextView 
18             android:id="@+id/menu_1" 
19             android:layout_width="wrap_content" 
20             android:layout_height="wrap_content" 
21             android:text="@string/setting" 
22             android:textColor="@color/gray" /> 
23     </LinearLayout> 
24    
25     <com.easyway.listview.corner.CornerListView 
26         android:id="@+id/list1" 
27         android:layout_width="fill_parent" 
28         android:layout_height="wrap_content" 
29         android:layout_marginLeft="15dp" 
30         android:layout_marginRight="15dp" 
31         android:background="@drawable/shape_bg_listview" 
32         android:cacheColorHint="@null"/> 
33    
34 </LinearLayout> 
35  
36 <?xml version="1.0" encoding="utf-8"?>
37 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
38     android:layout_width="fill_parent"
39     android:id="@+id/listview_layout"
40     android:layout_height="fill_parent"
41     android:orientation="vertical" >
42  
43     <LinearLayout
44         android:id="@+id/linearLayout1"
45         android:layout_width="match_parent"
46         android:layout_height="wrap_content"
47         android:orientation="vertical"
48         android:paddingBottom="5dp"
49         android:paddingLeft="25dp"
50         android:paddingTop="15dp" >
51  
52         <TextView
53             android:id="@+id/menu_1"
54             android:layout_width="wrap_content"
55             android:layout_height="wrap_content"
56             android:text="@string/setting"
57             android:textColor="@color/gray" />
58     </LinearLayout>
59  
60     <com.easyway.listview.corner.CornerListView
61         android:id="@+id/list1"
62         android:layout_width="fill_parent"
63         android:layout_height="wrap_content"
64         android:layout_marginLeft="15dp"
65         android:layout_marginRight="15dp"
66         android:background="@drawable/shape_bg_listview"
67         android:cacheColorHint="@null"/>


</LinearLayout> 每行的布局

<?xml version="1.0" encoding="utf-8"?> 
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
03     android:layout_width="match_parent" 
04     android:layout_height="match_parent" 
05     android:orientation="vertical" > 
06    
07     <RelativeLayout 
08         android:id="@+id/relativeLayout1" 
09         android:layout_width="match_parent" 
10         android:layout_height="wrap_content" 
11         android:paddingBottom="10dip" 
12         android:paddingLeft="15dip" 
13         android:paddingRight="5dip" 
14         android:paddingTop="10dip" > 
15    
16         <TextView 
17             android:id="@+id/item_title" 
18             android:layout_width="wrap_content" 
19             android:layout_height="wrap_content" 
20             android:layout_alignParentLeft="true" 
21             android:layout_alignParentTop="true" 
22             android:textColor="@color/gray" 
23             android:textSize="15sp" /> 
24    
25         <ImageView 
26             android:id="@+id/imageView1" 
27             android:layout_width="wrap_content" 
28             android:layout_height="wrap_content" 
29             android:layout_alignParentRight="true" 
30             android:layout_centerVertical="true" 
31             android:layout_marginRight="16dp" 
32             android:src="@drawable/right" /> 
33             
34     </RelativeLayout> 
35    
36 </LinearLayout> 
37  
38 <?xml version="1.0" encoding="utf-8"?>
39 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
40     android:layout_width="match_parent"
41     android:layout_height="match_parent"
42     android:orientation="vertical" >
43  
44     <RelativeLayout
45         android:id="@+id/relativeLayout1"
46         android:layout_width="match_parent"
47         android:layout_height="wrap_content"
48         android:paddingBottom="10dip"
49         android:paddingLeft="15dip"
50         android:paddingRight="5dip"
51         android:paddingTop="10dip" >
52  
53         <TextView
54             android:id="@+id/item_title"
55             android:layout_width="wrap_content"
56             android:layout_height="wrap_content"
57             android:layout_alignParentLeft="true"
58             android:layout_alignParentTop="true"
59             android:textColor="@color/gray"
60             android:textSize="15sp" />
61  
62         <ImageView
63             android:id="@+id/imageView1"
64             android:layout_width="wrap_content"
65             android:layout_height="wrap_content"
66             android:layout_alignParentRight="true"
67             android:layout_centerVertical="true"
68             android:layout_marginRight="16dp"
69             android:src="@drawable/right" />
70          
71     </RelativeLayout>
72  
73 </LinearLayout>

主要类： 

package com.easyway.listview.corner;  
02
   
03
import java.util.ArrayList;  
import java.util.HashMap;  
   
import android.app.Activity;  
import android.os.Bundle;  
import android.view.View;  
import android.widget.AdapterView;  
import android.widget.AdapterView.OnItemClickListener;  
import android.widget.LinearLayout;  
import android.widget.SimpleAdapter;  
/** 
* Android实现圆角ListView示例 
*          实现圆角ListView原理主要采用添加相关的样式布局。 
*          通过重写ListView中特定的方法 
*              拦截触摸事件的方法。 
*              public boolean onInterceptTouchEvent(MotionEvent ev)  
*              根据横轴坐标计算行数，并实现 
*             
* @Title:  
* @Description: 实现TODO 
* @Copyright:Copyright (c) 2011 
* @Company:易程科技股份有限公司 
* @Date:2012-7-16 
* @author  longgangbai 
* @version 1.0 
*/ 
public class RoundCornerActivity extends Activity {  
    private CornerListView cornerListView = null;  
    private ArrayList<HashMap<String, String>> maplist = null; 
    private LinearLayout linearLayout;  
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        //设置布局  
        setContentView(R.layout.main);  
        //获取布局对象  
        linearLayout=(LinearLayout)findViewById(R.id.listview_layout);  
        //设置壁纸为背景图片  
        linearLayout.setBackgroundDrawable(getWallpaper());  
        //获取初始化数据  
        maplist=getData();  
        //创建一个适配器对象  
        SimpleAdapter adapter1 = new SimpleAdapter(this, maplist,  
                R.layout.simple_list_item_1, new String[] { "item" },  
                new int[] { R.id.item_title });  
        //创建ListView对象  
        cornerListView = (CornerListView) findViewById(R.id.list1);  
        //设置适配器  
        cornerListView.setAdapter(adapter1);  
        initListener();  
    }  
    private void initListener() {  
        //添加响应时间  
        cornerListView.setOnItemClickListener(new OnItemClickListener() {  
   
            @Override 
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,  
                    long arg3) {  
                if (arg2 == 0) {  
                    System.out.println("0");  
                }else{  
                    System.out.println("1");  
                }  
            }  
        });  
    }  
   
    /** 
     * 模拟数据 
     * @return 
     */ 
    public ArrayList<HashMap<String, String>> getData() {  
   
        maplist = new ArrayList<HashMap<String, String>>();  
        HashMap<String, String> map1 = new HashMap<String, String>();  
        HashMap<String, String> map2 = new HashMap<String, String>();  
        HashMap<String, String> map3 = new HashMap<String, String>(); 
        HashMap<String, String> map4 = new HashMap<String, String>();  
        map1.put("item", "公交");  
        map2.put("item", "火车");  
        map3.put("item", "地铁");  
        map4.put("item", "航空");  
        maplist.add(map1);  
        maplist.add(map2);  
        maplist.add(map3);  
        maplist.add(map4);  
        return maplist;  
    }  
   
}



Huangdroid
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
android ListView实现圆角（两种解决方案）
jj120522的专栏
09-05 1万+
首先呢，我们还是看几个示图：（这是360推出的一款天气预报APP(墨迹)，很不错的一款哦，这里为她们做一个免费广告，哈哈.）                 这种带有圆角的listview' 看起来很棒吧，确实是这样，其实也不能这么说，主要方形太多了，斯通见惯就不值钱了，“物以稀为贵嘛”. 就好比学java都搞androd，很明显嘛，为了多赚点钱，可是供过于求的话，就不这么乐观了，就好比现在
android listview圆角实现
10-09
以下将详细讲解如何在Android中为ListView实现圆角。 首先，我们需要创建一个自定义的ListView，这通常涉及到继承AbsListView或ListView类。在这个自定义ListView中，我们将重写onDraw方法，以在绘制每个子视图（即...
android自定义listview实现圆角
daditao的专栏
05-29 1012
http://blog.csdn.net/wangkuifeng0118/article/details/7746175 在项目中我们会经常遇到这种圆角效果，因为直角的看起来确实不那么雅观，可能大家会想到用图片实现，试想上中下要分别做三张图片，这样既会是自己的项目增大也会增加内存使用量，所以使用shape来实现不失为一种更好的实现方式。在这里先看一下shape的使用：
2024年最全android ListView实现圆角实例教程二，handler机制的原理面试
最新发布
xcbyaya的博客
05-08 710
对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！最后，我再重复一次，如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。
listview实现圆角
淘气阿星的博客
01-09 758
在项目中我们会经常遇到这种圆角效果，因为直角的看起来确实不那么雅观，可能大家会想到用图片实现，试想上中下要分别做三张图片，这样既会是自己的项目增大也会增加内存使用量，所以使用shape来实现不失为一种更好的实现方式。在这里先看一下shape的使用：<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas
Android学习系列(16)--App列表之圆角ListView
dianan1505的博客
09-19 245
有些东西看多了，就厌烦了：extjs对我这种感觉最为强烈。甚至，有时觉得设计之殇是审美疲劳。直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了...今天我们就实现一个圆角的ListView效果。圆角的设计，我们并不追求到处都用，无处不用，android中有少数界面用直角确实容易显得锋利...
Android实现ListView圆角效果
weixin_34352449的博客
03-18 151
本文演示如何Android中实现ListView圆角效果。   无论是网站，还是APP，人们都爱看一些新颖的视图效果。直角看多了，就想看看圆角，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，特别是在iphone中几乎随处可见圆角设计，现在也开始出现很多圆角名片了。   现在就给大家实现一个圆角的ListView效果。 圆角的设计，我们并不追求到处都用，无处不用，andro...
基于Android实现ListView圆角效果
09-02
首先，实现ListView圆角效果主要依赖于Android的Drawable资源，特别是Shape Drawable。Shape Drawable允许我们定义不同形状（如矩形、圆形等）并自定义其颜色、渐变、边框等属性。在这个案例中，我们将通过定义不同...
Android UI控件之ListView实现圆角效果
08-28
"Android UI控件之ListView实现圆角效果" Android UI控件之ListView实现圆角效果是Android应用程序中一种常见的需求。ListView是Android UI控件中的一种，用于显示列表数据。然而，ListView的默认样式是方形的，...
Android 实现圆角ListView实例
06-20
要实现一个具有圆角效果的ListView，我们需要结合自定义View、Drawable以及Adapter等技术来完成。本实例将详细介绍如何在Android中创建一个圆角ListView。 首先，我们要明白圆角效果通常是由背景Drawable实现的。在...
Android ListView边框圆角美化
09-08
本文将深入探讨如何在Android中实现ListView的边框圆角美化，以此来达到类似iPhone界面的视觉效果。 首先，我们需要理解ListView的基本结构。ListView是由多个View（通常是ListView项布局，即Item Layout）组成的，...
android listView 圆角
03-24
android实现的listView圆角效果
圆角背景的ListView
03-28
NULL 博文链接：https://aichixihongshi.iteye.com/blog/1157447
listview圆角实现
04-03
NULL 博文链接：https://xiaoming123123.iteye.com/blog/1481566
ListView圆角样式
06-08
自定义ListView的Item圆角样式，打破传统平凡样式ListView。
ListView圆角显示
12-11
ListView圆角显示：提供两种实现方法.
Android ListView圆角
struggling的专栏
12-21 470
首先来看看ListView 相关基本属性 1、单击列表后，列表的背景变成黑色了。可通过指定android:cacheColorHint的属性来放变它，将它指定为透明。使用下面的属性值：     android:cacheColorHint="#000000" 即可。 2、去除列表项中间的分割线：android:divider="#00000000"，这里的值也可以指向一个drawable
android 将listview设置圆角的样式
11-11 1540
有什么方法设置带圆角Listview if(itemnum==0){ if(itemnum==(getAdapter().getCount()-1)){ //只有一项 setSelector(R.drawable.app_list_corner_round); }else{ //第一项                            se
android ListView实现圆角
05-14
要在Android的ListView中实现圆角，可以使用以下步骤： 1. 创建一个圆角背景 在drawable文件夹中创建一个drawable资源文件，例如“listview_background.xml”，并添加以下代码： ```xml <shape xmlns:android=...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值