Implementation of the rounded border of android listview

During the last few days of the holiday, the group was very active. Many friends asked how to implement the listview rounded corner function in android. The tableView in the Iphone settings is as follows:

Implementation Process

In fact, the implementation of this function is also very simple, but many friends did not carefully learn about the android layout, here we use the shade rounded corner function in android to achieve.

The java code is very simple, just an activity and a listview. In listview, you must determine the position of the item. The first and last items are different from the intermediate items. The Code is as follows:

Java code and layout files

AndroidlistviewActivity. java

Package com. yangfuhai. listviewdemo; import android. app. activity; import android. OS. bundle; import android. view. view; import android. widget. listView;/*** @ title rounded corner listview implementation * @ description rounded corner listview implementation * @ company explorer Network Studio (www.tsz.net) * @ author michael Young (www.YangFuhai.com) * @ version 1.0 * @ created 2012-10-3 */public class AndroidlistviewActivity extends Activity {ListView mListView; ListViewAdapter mListViewAdapter; @ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main); mListView = (ListView) findViewById (R. id. listview); mListViewAdapter = new ListViewAdapter (this); mListView. setAdapter (mListViewAdapter);}/*** add button operation * @ param view */static int I = 0; public void add (View view) {mListViewAdapter. addData ("---- item ---" + I + "---"); mListViewAdapter. notifyDataSetChanged (); I ++;}/*** delete button operation * @ param view */public void del (View view) {mListViewAdapter. delData (); mListViewAdapter. notifyDataSetChanged (); if (I> 0) I --;}}

Adapter ListViewAdapter. java

Package COM. yangfuhai. listviewdemo; import Java. util. arraylist; import Java. util. list; import android. content. context; import android. view. view; import android. view. viewgroup; import android. widget. baseadapter; import android. widget. textview;/*** @ title rounded corner listview implementation adapter * @ description listviewadapter listview adapter * @ company explorer Network Studio (www.tsz.net) * @ author Michael Young (www.yangfuhai.com) * @ Version 1.0 * @ Created 2012-10-3 */public class listviewadapter extends baseadapter {private list <string> datas = new arraylist <string> (); // data private context mcontext; Public listviewadapter (context c) {This. mcontext = C;} public void adddata (string strdata) {If (strdata! = NULL) datas. add (strdata);} public void deldata () {If (datas. size ()> 0) datas. remove (datas. size ()-1) ;}@ overridepublic int getcount () {return datas. size () ;}@ overridepublic object getitem (INT arg0) {return datas. get (arg0) ;}@ overridepublic long getitemid (INT position) {return position;}/*** the position of the item to be determined in listview, the first one, the last item is different from the intermediate item. * // @ Overridepublic view getview (INT position, view convertview, viewgroup parent) {view = NULL; If (datas. size ()> 1) {// The listview data is more than two if (position = 0) {// the first data view = view. inflate (mcontext, R. layout. list_item_top, null);} else if (position = datas. size ()-1) {// the last data view = view. inflate (mcontext, R. layout. list_item_bottom, null);} else {// the data in the middle view = view. inflate (mcontext, R. layout. list_item_middle, null) ;}} else {// only one data view = view. inflate (mcontext, R. layout. list_item_single, null);} (textview) view. findviewbyid (R. id. title )). settext (datas. get (position); // set the text Style Return view ;}}

Layout file main. xml

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "wrap_content" android: layout_height = "fill_parent" android: orientation = "vertical"> <TextView android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: text = "click" add to delete "/> <LinearLayout android: layout_width =" match_parent "android: layout_height = "wrap_content" android: gravity = "center"> <Button android: id = "@ + id/buttonAdd" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: onClick = "add" android: text = "add"/> <Button android: id = "@ + id/buttonDel" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: onClick = "del" android: text = "delete"/> </LinearLayout> <ListView android: id = "@ + id/listview" android: layout_marginLeft = "10dip" android: layout_marginRight = "10dip" android: layout_width = "fill_parent" android: layout_height = "wrap_content"/> </LinearLayout>

 

Layout file and resource file of listview

The above code is very simple and there is nothing to talk about. It mainly talks about the style file of each item in listview.

 

Listview items have four layout files: The style when there is only one item, the style of the top item when there are multiple items, the style of the bottom item, and the style of the middle item. Shows the relationship between the layout file and the background file:

File

The layout of listview items is as follows:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    style="@style/list_item_middle"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:minHeight="60dip"    >    <TextView        android:id="@+id/title"        style="@style/content_page_large_text"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="title" /></LinearLayout>

The only difference between the four layout files is that their stype attributes (style = "@ style/list_item_middle") are different, that is, their backgrounds are different.

 

Resource file

Next we will first paste the shade code of the layout file background file, and then carefully explain the meaning of the Code in the background files.

Background_view_rounded_bottom.xml

<?xml version="1.0" encoding="UTF-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android"    android:insetBottom="1.0px"    android:insetLeft="1.0px"    android:insetRight="1.0px"    android:insetTop="1.0px" >    <selector>        <item android:state_pressed="true">            <shape>                <gradient                    android:angle="270.0"                    android:endColor="@color/base_end_color_pressed"                    android:startColor="@color/base_start_color_pressed" />                <corners                    android:bottomLeftRadius="10.0dip"                    android:bottomRightRadius="10.0dip"                    android:radius="2.0dip"                    android:topLeftRadius="0.0dip"                    android:topRightRadius="0.0dip" />            </shape>        </item>        <item>            <shape>                <gradient                    android:angle="270.0"                    android:endColor="@color/base_end_color_default"                    android:startColor="@color/base_start_color_default" />                <corners                    android:bottomLeftRadius="11.0dip"                    android:bottomRightRadius="11.0dip"                    android:radius="2.0dip"                    android:topLeftRadius="0.0dip"                    android:topRightRadius="0.0dip" />            </shape>        </item>    </selector></inset>

Background_view_rounded_middle.xml:

<?xml version="1.0" encoding="UTF-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android"    android:insetBottom="0.0px"    android:insetLeft="1.0px"    android:insetRight="1.0px"    android:insetTop="1.0px" >    <selector>        <item android:state_pressed="true">            <shape>                <gradient                    android:angle="270.0"                    android:endColor="@color/base_end_color_pressed"                    android:startColor="@color/base_start_color_pressed" />                <corners android:radius="0.0dip" />            </shape>        </item>        <item>            <shape>                <gradient                    android:angle="270.0"                    android:endColor="@color/base_end_color_default"                    android:startColor="@color/base_start_color_default" />                <corners android:radius="0.0dip" />            </shape>        </item>    </selector></inset>

Background_view_rounded_single.xml:

<?xml version="1.0" encoding="UTF-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android"    android:insetBottom="1.0px"    android:insetLeft="1.0px"    android:insetRight="1.0px"    android:insetTop="0.0px" >    <selector>        <item android:state_pressed="true">            <shape>                <gradient                    android:angle="270.0"                    android:endColor="@color/base_end_color_pressed"                    android:startColor="@color/base_start_color_pressed" />                <corners android:radius="11.0dip" />            </shape>        </item>        <item>            <shape>                <stroke                    android:width="1.0px"                    android:color="@color/rounded_container_border" />                <gradient                    android:angle="270.0"                    android:endColor="@color/base_end_color_default"                    android:startColor="@color/base_start_color_default" />                <corners android:radius="10.0dip" />            </shape>        </item>    </selector></inset>

Background_view_rounded_top.xml:

<?xml version="1.0" encoding="UTF-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android"    android:insetBottom="0.0px"    android:insetLeft="1.0px"    android:insetRight="1.0px"    android:insetTop="1.0px" >    <selector>        <item android:state_pressed="true">            <shape>                <gradient                    android:angle="270.0"                    android:endColor="@color/base_end_color_pressed"                    android:startColor="@color/base_start_color_pressed" />                <corners                    android:bottomLeftRadius="0.0dip"                    android:bottomRightRadius="0.0dip"                    android:radius="2.0dip"                    android:topLeftRadius="10.0dip"                    android:topRightRadius="10.0dip" />            </shape>        </item>        <item>            <shape>                <gradient                    android:angle="270.0"                    android:endColor="@color/base_end_color_default"                    android:startColor="@color/base_start_color_default" />                <corners                    android:bottomLeftRadius="0.0dip"                    android:bottomRightRadius="0.0dip"                    android:radius="2.0dip"                    android:topLeftRadius="11.0dip"                    android:topRightRadius="11.0dip" />            </shape>        </item>    </selector></inset>

 

Listview resource file description

We will use background_view_rounded_top.xml (the last resource file) to explain the meaning of each attribute in it:

 

Inset

Inset: This type of resource points to an InsetDrawable object, which can be embedded into another plotting resource with the specified distance. Its attributes include:

Android: drawable = "@ drawable/drawable_resource"

Android: insetTop = "dimension"

Android: insetRight = "dimension"

Android: insetBottom = "dimension"

Android: insetLeft = "dimension"

Android: drawable is the image resource to be embedded, and android: insetXXX is the embedded position.

Selector

Selector: A style Selector Used to guide different states of a view (such as button, textview, and edittext) (such as normal state and focus state, the status of the resource.

Shadeshade gradient

Shade gradient: gradient color

Android: startcolor and Android: endcolor are the start and end colors of the gradient respectively.

Android: angle is the gradient angle, which must be an integer multiple of 45.

There are two gradient modes:

Android: TYPE = "linear", linear gradient. the vernacular is the gradient process from one end to the other.

Android: TYPE = "RADIAL", radial gradient, vernacular is the process from the center to the surrounding. The radial gradient must specify the gradient radius Android: gradientradius = "50 ″.

Shade corners

Shade corners: rounded corner (this article mainly uses it)

Android: radius is the Radian of an angle. The larger the value is, the closer the angle is.

Others

In addition to gradient and corners, shade also includes stroke (stroke), solid (solid), and padding (For details, refer to the android help documentation ).

 

Implementation

Through the above Code, we have achieved the following results:

 

 

Finished

 

Source code download

Download source code: http://download.csdn.net/detail/michael_yy/4614701 (point-free download)

Indicate the source for reprinting. Http://blog.csdn.net/michael_yy/article/details/8038653