Android Learning Series (16)-rounded corner listview in App list

I get bored with reading many things: extjs is the most intense for me. Even, sometimes the design is aesthetic fatigue.
When I look at the right corner, I want to see the rounded corner. I don't know when, in the past few years, there has been a burst of rounded corner design wind: The new CSS standard includes the rounded corner elements, and the rounded corner design is almost everywhere on the iPhone, there are also a lot of rounded corner business cards...
Today, we will implement a rounded listview effect.
With the design of rounded corners, we do not want to use them everywhere. In Android, there are a few interfaces with right angles that are easy to appear sharp, and they are too different from the surrounding interfaces, such as the list of Large columns, setting, and so on. Using the rounded corner will be lively, easy, and better integrated.

1. Feeling
In fact, in Android, because the SDK does not have a complete support for rounded corners by default, You need to customize the settings to achieve the perfect rounded corner effect. Therefore, most applications use the grouped right-angle list style.
So I think it is necessary to let everyone look at these few different things and see what they feel.
Let's take a look at two images:

On the left is the setting interface of an android application, and on the right is the setting interface of the iPhone system.
PS: The above is only the effect. It does not mean that the list of rounded corners on the left is implemented using listview. In fact, it is stacked one by one with the linearlayout layout.

2. Principles
By judging the position of the items clicked on the listview, we switch between different selectors. Of course, this switching action needs to be defined in the onintercepttouchevent () method of the listview rewriting.

If (itemnum = 0) {If (itemnum = (getadapter (). getcount ()-1) {// only one setselector (R. drawable. app_list_corner_round);} else {// The first setselector (R. drawable. app_list_corner_round_top) ;}} else if (itemnum = (getadapter (). getcount ()-1) // The Last setselector (R. drawable. app_list_corner_round_bottom); else {// setselector (R. drawable. app_list_corner_shape );}
 

3. Define Selector
If there is only one item, we need four rounded corners. The app_list_corner_round.xml file is defined as follows:

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

If it is the first item on the top, the two corners are rounded. The app_list_corner_round_top.xml is defined as follows:

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

If it is the last entry at the bottom, the following two corners are rounded. app_list_corner_round_bottom.xml is defined as follows:

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

If it is an intermediate item, no rounded corner is required. app_list_corner_shape.xml is defined as follows:

 
<? 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. Background Image
Labels:

Here, we will remind you to define the content area as the area within the border line when making a 9patch background image.

5. preliminary Implementation
refer to the previous material and core Code . The preliminary implementation is as follows:
(1 ). custom cornerlistview. java:

/*** Rounded listview */public class cornerlistview extends listview {public cornerlistview (context) {super (context);} public cornerlistview (context, attributeset attrs, int defstyle) {super (context, attrs, defstyle);} public cornerlistview (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 );}}

This cornerlistview mainly deals with switching the selector of the click item.
(2). List layout file and list item layout file:
List layout file 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) interface implementation
display interface settingtabactivity. Java:

Public class settingtabactivity extends activity {private 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);}/*** set list data */private void setlistdata () {listdata = new arraylist <Map <string, string> (); Map <string, string> map = new hashmap <string, string> (); map. put ("text", "Gallery Update"); listdata. add (MAP); map = new hashmap <string, string> (); map. put ("text", "add images to Favorites"); listdata. add (MAP); map = new hashmap <string, string> (); map. put ("text", "Download directory"); listdata. add (MAP );}}

(4 ).
Through the above implementation, we basically achieved the effect of rounded listview: