Android App列表之圆角ListView

有些东西看多了,就厌烦了:extjs对我这种感觉最为强烈。甚至,有时觉得设计之殇是审美疲劳。
直角看多了,就想看看圆角,不知何时,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,iphone中几乎随处可见圆角设计,也开始出现很多圆角名片了...
今天我们就实现一个圆角的ListView效果。
圆角的设计,我们并不追求到处都用,无处不用,android中有少数界面用直角确实容易显得锋利,和周边界面太过对比而显得不协调,比如大栏目列表,设置等等,而采用圆角实现,则会活泼,轻松的多,也融合的特别好。 

1.感觉
实际上在Android中因为SDK中没有默认对圆角的一个完整的支持,需要麻烦自定义设置才能实现完美的圆角效果,所以绝大多数应用都是采用分组直角列表这种样式。
所以我觉得很有必要让大家看看这些少数的不一样的东西,看看有什么不一样的感觉。
先让我们来看两张图片:

  

左边的是Android的一个应用的设置界面,右边是iphone系统的设置界面。
ps:上述只是效果,并不是说左边的圆角列表就是用listview是实现的,事实上它是用LinearLayout布局一个一个堆起来的。

2.原理
通过判断ListView上点击的项的位置,我们切换不同的选择器,当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent()方法中。

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); 
} 


3.定义选择器
如果只有一项,我们需要四个角都是圆角,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="#B5E7B8" 
        android:endColor="#76D37B" 
        android:angle="270"/> 
    <corners android:topLeftRadius="4dip"
        android:topRightRadius="4dip"
        android:bottomLeftRadius="4dip"
        android:bottomRightRadius="4dip"/> 
</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="#B5E7B8" 
        android:endColor="#76D37B" 
        android:angle="270"/> 
    <corners android:topLeftRadius="4dip"
        android:topRightRadius="4dip"/> 
</shape> 


如果是底部最后一项,则下面两个角为圆角,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="#B5E7B8" 
        android:endColor="#76D37B" 
        android:angle="270"/> 
    <corners android:bottomLeftRadius="4dip"
        android:bottomRightRadius="4dip" /> 
</shape> 


如果是中间项,则应该不需要圆角, app_list_corner_shape.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"/> 
</shape> 


4.背景图片
因为默认的情况下,ListView就要显示一个圆角的边框,这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png:


在这里提示一下,做9patch背景图片的时候,记得把内容区域定义为边框线以内的区域。

5. 初步实现
参考前面提供的素材和核心代码,我们初步实现如下:
(1).自定义CornerListView.java:

/** 
 * 圆角ListView 
 */
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); 
    } 
} 


这个CornerListView主要处理了点击项的选择器的切换。
(2).列表布局文件和列表项布局文件:
列表布局文件main_tab_setting.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"> 
    <com.tianxia.app.floworld.view.CornerListView android:id="@+id/setting_list"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_margin="10dip"
        android:background="@drawable/app_list_corner_border"
        android:cacheColorHint="#00000000"> 
    </com.tianxia.app.floworld.view.CornerListView> 
</LinearLayout> 


列表项布局文件main_tab_setting_list_item.xml:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"> 
    <ImageView android:id="@+id/setting_list_item_arrow"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="15dip"
        android:layout_marginRight="15dip"
        android:src="@drawable/appreciate_tab_list_item_arrow_small"/> 
    <TextView  android:id="@+id/setting_list_item_text"
        android:layout_toLeftOf="@id/setting_list_item_arrow"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:textSize="16dip"
        android:textColor="#000000"
        android:paddingTop="10dip"
        android:paddingBottom="10dip"
        android:paddingLeft="10dip" /> 
</RelativeLayout> 


(3)界面实现
显示界面SettingTabActivity.java:

public class SettingTabActivity extends Activity{ 
      
    private CornerListView cornerListView = null; 
      
    private List<Map<String,String>> listData = null; 
    private SimpleAdapter adapter = null; 
      
      
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main_tab_setting); 
          
        cornerListView = (CornerListView)findViewById(R.id.setting_list); 
        setListData(); 
          
        adapter = new SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item , new String[]{"text"}, new int[]{R.id.setting_list_item_text}); 
        cornerListView.setAdapter(adapter); 
    } 
      
    /** 
     * 设置列表数据 
     */
    private void setListData(){ 
        listData = new ArrayList<Map<String,String>>(); 
          
        Map<String,String> map = new HashMap<String, String>(); 
        map.put("text", "图库更新"); 
        listData.add(map); 
          
        map = new HashMap<String, String>(); 
        map.put("text", "收藏图片"); 
        listData.add(map); 
          
        map = new HashMap<String, String>(); 
        map.put("text", "下载目录"); 
        listData.add(map); 
    } 
} 


(4).效果图
通过以上实现,我们基本达到了圆角的ListView的效果:

  

文章出自: http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html#2390409
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值