android布局圆角的实现样式

最新推荐文章于 2023-08-12 11:00:56 发布

转载最新推荐文章于 2023-08-12 11:00:56 发布 · 3k 阅读

文章标签：

#android #Android

Android 专栏收录该内容

87 篇文章

订阅专栏

本文介绍如何在Android中实现圆角ListView效果。通过自定义ListView并根据不同位置的列表项切换选择器来实现不同圆角效果，同时提供了详细的代码示例。

android布局圆角的实现样式

http://www.eoeandroid.com/code/2012/0502/1289.html

　直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了…

　　今天我们就实现一个圆角的ListView效果。

　　圆角的设计，我们并不追求到处都用，无处不用，android中有少数界面用直角确实容易显得锋利，和周边界面太过对比而显得不协调，比如大栏目列表，设置等等，而采用圆角实现，则会活泼，轻松的多，也融合的特别好。

　　1．感觉
　　实际上在Android中因为SDK中没有默认对圆角的一个完整的支持，需要麻烦自定义设置才能实现完美的圆角效果，所以绝大多数应用都是采用分组直角列表这种样式。

　　所以我觉得很有必要让大家看看这些少数的不一样的东西，看看有什么不一样的感觉。

　　先让我们来看两张图片：

　　左边的是Android的一个应用的设置界面，右边是iphone系统的设置界面.

　　ps：上述只是效果，并不是说左边的圆角列表就是用listview是实现的，事实上它是用LinearLayout布局一个一个堆起来的.

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

01
if（itemnum==0）{

02
if（itemnum==（getAdapter（）.getCount（）-1））{

03
//只有一项

04
setSelector（R.drawable.app_list_corner_round）;

05
}else{

06
//第一项

07
setSelector（R.drawable.app_list_corner_round_top）;

08
}

09
}else if（itemnum==（getAdapter（）.getCount（）-1））

10
//最后一项

11
setSelector（R.drawable.app_list_corner_round_bottom）;

12
else{

13
//中间一项

14
setSelector（R.drawable.app_list_corner_shape）;

15
}

　　3.定义选择器　　如果只有一项，我们需要四个角都是圆角，app_list_corner_round.xml文件定义如下：

01
<?xml
 version="1.0" encoding="utf-8"?>

02
<shape
 xmlns：android="http：//schemas.android.com/apk/res/android">

03
<gradient
 android：startColor="#B5E7B8"

04
android：endColor="#76D37B"

05
android：angle="270"/>

06
<corners
 android：topLeftRadius="4dip"

07
android：topRightRadius="4dip"

08
android：bottomLeftRadius="4dip"

09
android：bottomRightRadius="4dip"/>

10
</shape>

　　如果是顶部第一项，则上面两个角为圆角，app_list_corner_round_top.xml定义如下：

1
<?xml
 version="1.0" encoding="utf-8"?>

2
<shape
 xmlns：android="http：//schemas.android.com/apk/res/android">

3
<gradient
 android：startColor="#B5E7B8"

4
android：endColor="#76D37B"

5
android：angle="270"/>

6
<corners
 android：topLeftRadius="4dip"

7
android：topRightRadius="4dip"/>

8
</shape>

　　如果是底部最后一项，则下面两个角为圆角，app_list_corner_round_bottom.xml定义如下：

1
<?xml
 version="1.0" encoding="utf-8"?>

2
<shape
 xmlns：android="http：//schemas.android.com/apk/res/android">

3
<gradient
 android：startColor="#B5E7B8"

4
android：endColor="#76D37B"

5
android：angle="270"/>

6
<corners
 android：bottomLeftRadius="4dip"

7
android：bottomRightRadius="4dip" />

8
</shape>

　　如果是中间项，则应该不需要圆角， app_list_corner_shape.xml定义如下：

1
<?xml
 version="1.0" encoding="utf-8"?>

2
<shape
 xmlns：android="http：//schemas.android.com/apk/res/android">

3
<gradient
 android：startColor="#B5E7B8"

4
android：endColor="#76D37B"

5
android：angle="270"/>

6
</shape>

　　4.背景图片　　因为默认的情况下，ListView就要显示一个圆角的边框，这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png,在这里提示一下，做9patch背景图片的时候，记得把内容区域定义为边框线以内的区域.参考前面提供的素材和核心代码，我们初步实现如下：　　（1）.自定义CornerListView.java：

01
/**

02
*
 圆角ListView

03
*/

04
public class CornerListView extends ListView
 {

05
public CornerListView（Context
 context） {

06
super（context）;

07
}

08
public CornerListView（Context
 context， AttributeSet attrs， intdefStyle）
 {

09
super（context，
 attrs， defStyle）;

10
}

11
public CornerListView（Context
 context， AttributeSet attrs） {

12
super（context，
 attrs）;

13
}

14
@Override

15
public boolean onInterceptTouchEvent（MotionEvent
 ev） {

16
switch （ev.getAction（））
 {

17
case MotionEvent.ACTION_DOWN：

18
int x
 = （int）
 ev.getX（）;

19
int y
 = （int）
 ev.getY（）;

20
int itemnum
 = pointToPosition（x， y）；

21
if （itemnum
 == AdapterView.INVALID_POSITION）

22
break;

23
else

24
{

25
if（itemnum==0）{

26
if（itemnum==（getAdapter（）.getCount（）-1））{

27
setSelector（R.drawable.app_list_corner_round）;

28
}else{

29
setSelector（R.drawable.app_list_corner_round_top）;

30
}

31
}else if（itemnum==（getAdapter（）.getCount（）-1））

32
setSelector（R.drawable.app_list_corner_round_bottom）;

33
else{

34
setSelector（R.drawable.app_list_corner_shape）;

35
}

36
}

37
break;

38
case MotionEvent.ACTION_UP：

39
break；

40
}

41
return super.onInterceptTouchEvent（ev）;

42
}

43
}

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

01
<?xml
 version="1.0" encoding="utf-8"?>

02
<LinearLayout
 xmlns：android="http：//schemas.android.com/apk/res/android"

03
android：orientation="vertical"

04
android：layout_width="fill_parent"

05
android：layout_height="fill_parent">

06
<com.tianxia.app.floworld.view.CornerListView
 android：id="@+id/setting_list"

07
android：layout_width="fill_parent"

08
android：layout_height="wrap_content"

09
android：layout_margin="10dip"

10
android：background="@drawable/app_list_corner_border"

11
android：cacheColorHint="#00000000">

12
</com.tianxia.app.floworld.
 view.CornerListView>

13
</LinearLayout>

　　列表项布局文件main_tab_setting_list_item.xml：

01
<?xml
 version="1.0" encoding="utf-8"?>

02
<RelativeLayout
 xmlns：android="http：//schemas.android.com/apk/res/android"

03
android：layout_width="fill_parent"

04
android：layout_height="fill_parent">

05
<ImageView
 android：id="@+id/setting_list_item_arrow"

06
android：layout_alignParentRight="true"

07
android：layout_centerVertical="true"

08
android：layout_width="wrap_content"

09
android：layout_height="fill_parent"

10
android：layout_marginLeft="15dip"

11
android：layout_marginRight="15dip"

12
android：src="@drawable/appreciate_tab_list_item_arrow_small"/>

13
<TextView
 android：id="@+id/setting_list_item_text"

14
android：layout_toLeftOf="@id/setting_list_item_arrow"

15
android：layout_width="fill_parent"

16
android：layout_height="wrap_content"

17
android：textSize="16dip"

18
android：textColor="#000000"

19
android：paddingTop="10dip"

20
android：paddingBottom="10dip"

21
android：paddingLeft="10dip" />

22
</RelativeLayout>

　　（3）界面实现,显示界面SettingTabActivity.java：

01
public class SettingTabActivity extends Activity{

02
private CornerListView
 cornerListView = null；

03
private List<Map<String，String>>
 listData = null；

04
private SimpleAdapter
 adapter = null;

05
@Override

06
protected void onCreate（Bundle
 savedInstanceState） {

07
super.onCreate（savedInstanceState）;

08
setContentView（R.layout.main_tab_setting）;

09
cornerListView
 = （CornerListView）findViewById（R.id.setting_list）;

10
setListData（）;

11
adapter
 = new SimpleAdapter（getApplicationContext（），
 listData， R.layout.main_tab_setting_list_item ， new String[]{"text"}， new int[]{R.id.setting_list_item_text}）;

12
cornerListView.setAdapter（adapter）;

13
}

14
/**

15
*
 设置列表数据

16
*/

17
private void setListData（）{

18
listData
 = new ArrayList<Map<String，String>>（）;

19
Map<String，String>
 map = new HashMap<String，
 String>（）;

20
map.put（"text"， "图库更新"）;

21
listData.add（map）;

22
map
 = new HashMap<String，
 String>（）;

23
map.put（"text"， "收藏图片"）;

24
listData.add（map）;

25
map
 = new HashMap<String，
 String>（）;

26
map.put（"text"， "下载目录"）;

27
listData.add（map）;

28
}

29
}