App列表之圆角ListView

最新推荐文章于 2021-12-16 10:48:08 发布

fengkuanghun

最新推荐文章于 2021-12-16 10:48:08 发布

阅读量1.2k

点赞数

分类专栏： Android

Android 专栏收录该内容

166 篇文章 1 订阅

订阅专栏

[html] view plain copy print ?

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

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

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

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

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

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

[java] view plain copy print ?

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

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文件定义如下：

[html] view plain copy print ?

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

<?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定义如下：

[html] view plain copy print ?

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

<?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定义如下：

[html] view plain copy print ?

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

<?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定义如下：

[html] view plain copy print ?

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

<?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:

[java] view plain copy print ?

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

/**
 * 圆角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：

[html] view plain copy print ?

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

<?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：

[html] view plain copy print ?

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

<?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:

[html] view plain copy print ?

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

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的效果：

fengkuanghun

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
App列表之圆角ListView

[html] view plaincopyprint?xml version="1.0" encoding="utf-8"?> shape xmlns:android="http://schemas.android.com/apk/res/android"> gradient android:startColor="#B5E7B8" android:
复制链接

扫一扫