`
wen742538485
  • 浏览: 236646 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Android ListView圆角实现

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

        本人实现的原理如下:

通过重写ListView中拦截触摸的事件方式,在生成ListView时候根据不同行采用不同的样式。如第一个行,最末一行,和中建行。(特殊的情况下只有一行的时候,四个角均为圆角考虑)。

实现如下:

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

app_list_corner_round_bottom.xml

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>  

<?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代码 
<?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>  

<?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代码 
<?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"/>
    <corners android:topLeftRadius="6dip"
        android:topRightRadius="6dip"/>
</shape>  
多行记录非第一行和最末一行使用的样式:

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"/> 
</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

Java代码 
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);
    }
}

主要布局类main.xml

Xml代码 
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:id="@+id/listview_layout" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" > 
 
    <LinearLayout 
        android:id="@+id/linearLayout1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="vertical" 
        android:paddingBottom="5dp" 
        android:paddingLeft="25dp" 
        android:paddingTop="15dp" > 
 
        <TextView 
            android:id="@+id/menu_1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/setting" 
            android:textColor="@color/gray" /> 
    </LinearLayout> 
 
    <com.easyway.listview.corner.CornerListView 
        android:id="@+id/list1" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="15dp" 
        android:layout_marginRight="15dp" 
        android:background="@drawable/shape_bg_listview" 
        android:cacheColorHint="@null"/> 
 
</LinearLayout> 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:id="@+id/listview_layout"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="25dp"
        android:paddingTop="15dp" >

        <TextView
            android:id="@+id/menu_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/setting"
            android:textColor="@color/gray" />
    </LinearLayout>

    <com.easyway.listview.corner.CornerListView
        android:id="@+id/list1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="@drawable/shape_bg_listview"
        android:cacheColorHint="@null"/>

</LinearLayout> 每行的布局:

Xml代码 
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 
 
    <RelativeLayout 
        android:id="@+id/relativeLayout1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:paddingBottom="10dip" 
        android:paddingLeft="15dip" 
        android:paddingRight="5dip" 
        android:paddingTop="10dip" > 
 
        <TextView 
            android:id="@+id/item_title" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_alignParentLeft="true" 
            android:layout_alignParentTop="true" 
            android:textColor="@color/gray" 
            android:textSize="15sp" /> 
 
        <ImageView 
            android:id="@+id/imageView1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_alignParentRight="true" 
            android:layout_centerVertical="true" 
            android:layout_marginRight="16dp" 
            android:src="@drawable/right" /> 
          
    </RelativeLayout> 
 
</LinearLayout> 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dip"
        android:paddingLeft="15dip"
        android:paddingRight="5dip"
        android:paddingTop="10dip" >

        <TextView
            android:id="@+id/item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:textColor="@color/gray"
            android:textSize="15sp" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="16dp"
            android:src="@drawable/right" />
       
    </RelativeLayout>

</LinearLayout> 
主要类:

Java代码 
package com.easyway.listview.corner;  
 
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;  
    }  
 

  • 大小: 19.1 KB
分享到:
评论

相关推荐

    android listview圆角实现

    以下将详细讲解如何在Android中为ListView实现圆角。 首先,我们需要创建一个自定义的ListView,这通常涉及到继承AbsListView或ListView类。在这个自定义ListView中,我们将重写onDraw方法,以在绘制每个子视图(即...

    Android ListView边框圆角美化

    本文将深入探讨如何在Android中实现ListView的边框圆角美化,以此来达到类似iPhone界面的视觉效果。 首先,我们需要理解ListView的基本结构。ListView是由多个View(通常是ListView项布局,即Item Layout)组成的,...

    Android 实现圆角ListView实例

    要实现一个具有圆角效果的ListView,我们需要结合自定义View、Drawable以及Adapter等技术来完成。本实例将详细介绍如何在Android中创建一个圆角ListView。 首先,我们要明白圆角效果通常是由背景Drawable实现的。在...

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

    本篇文章将详细探讨如何实现一个模仿iPhone中UITableView风格的Android ListView,特别是如何赋予ListView圆角效果。 首先,我们需要了解ListView的基本结构。ListView是Android中的一个视图容器,用于显示一列可...

    基于Android实现ListView圆角效果

    首先,实现ListView圆角效果主要依赖于Android的Drawable资源,特别是Shape Drawable。Shape Drawable允许我们定义不同形状(如矩形、圆形等)并自定义其颜色、渐变、边框等属性。在这个案例中,我们将通过定义不同...

    Android实现iphone圆角ListView和点击的效果

    在Android开发中,为了使应用界面更接近iOS的风格或者增加独特的用户体验,有时我们需要实现类似iPhone的圆角ListView以及点击效果。本篇文章将详细讲解如何在Android中复现这一功能。 首先,我们要创建一个带有...

    listview圆角示例源码

    在Android中,实现ListView圆角通常涉及以下几个关键知识点: 1. **自定义ListView项布局**:首先,我们需要为ListView创建一个自定义的布局文件。在这个布局中,我们可以设置背景为一个带有圆角的Drawable资源。...

    ListView圆角分块显示

    总的来说,实现ListView圆角分块显示涉及到UI设计、自定义布局、数据适配等多个方面,需要开发者具备良好的Android基础知识和实践经验。在实际项目中,可以根据需求和性能要求选择合适的方法来实现这一功能。

    Android listview 圆角

    - 压缩包中的`AndroidListview`可能包含了一个示例项目,演示了如何实现带圆角的ListView以及相关的性能优化。通过查看源码,我们可以学习到实际应用中的最佳实践。 综上所述,要实现“Android ListView 圆角”这...

    android listView 圆角

    要实现ListView的圆角效果,我们需要理解Android的布局系统、自定义ViewGroup以及如何为ListView的每个条目设置背景。以下是实现这一目标的具体步骤和相关知识点。 1. **自定义Adapter** - Android中的ListView...

    listview圆角实现

    以上就是实现ListView圆角的基本步骤。当然,实际应用中可能还需要考虑更多细节,如阴影效果、不同状态下的背景色等,可以根据需求进行扩展。同时,如果你希望在ListView滑动时保持头部和底部的圆角,可能需要使用到...

    listview圆角列表demo

    而“listview圆角列表demo”则是针对ListView进行的一种定制化设计,使得ListView的每一项(item)显示为具有圆角的矩形,以提升界面的美观度和用户体验。下面将详细解释如何实现ListView的圆角效果。 1. **圆角...

    android listview

    为了实现圆角效果,我们需要对ListView的每一项视图进行定制。一种常见的方式是在XML布局文件中,为列表项的背景设置一个带有圆角的九宫格图片(.9.png),这种图片可以拉伸而保持圆角不变形。此外,还可以使用Shape...

    ListView圆角样式

    5. **圆角动态变化**:如果需要在ListView中实现动态圆角,例如根据数据项的状态改变圆角大小,可以考虑在`getView()`方法中根据数据项的状态动态修改背景的`android:radius`属性,或者使用自定义的Drawable类,通过...

    自定义listview 圆角listviewitem 处理 选中背景处理

    本文将深入探讨如何实现自定义的圆角ListView项以及处理选中背景。 首先,我们需要了解ListView的工作原理。ListView通过Adapter来填充数据,并通过ViewHolder优化性能。Adapter负责将数据转化为View,然后ListView...

    android listview的实现

    本篇文章将深入探讨如何实现一个具有圆角效果的ListView,同时介绍如何动态添加和删除ListView的item,并实现点击背景变化的功能。 首先,我们要创建一个圆角ListView。这通常涉及到自定义ListView的Adapter和item...

    Android 圆角listview

    总的来说,实现“Android圆角listview”和“回弹效果”需要结合布局设计、自定义视图绘制、滚动监听和动画处理等技术。开发者可以根据项目的具体需求,选择合适的方法来实现这些功能,提升用户体验。

    ListView的圆角效果

    在Android开发中,ListView是...这个压缩包文件"ListView的圆角实现"可能包含了实现上述步骤的代码示例,供开发者参考和学习。通过理解这些知识点,你可以根据自己的项目需求,灵活地实现不同风格的圆角ListView效果。

Global site tag (gtag.js) - Google Analytics