android listview 圓角邊框的實現的實現

這幾天十一放假，在群裡非常活躍，很多朋友問如何?android中listview的圓角功能，像Iphone設定裡面的tableView如 如下效果：

實現過程

其實這個功能實現也很簡單，只是很多朋友沒有仔細的去瞭解android布局的相關知識，這裡我們使用了android中的shade的圓角功能來實現的。

java代碼很簡單，就一個activity，一個listview。listview中要判斷item的位置，第一條，最後一條和中間的item是不一樣的。代碼如下：

   java代碼和布局檔案

AndroidlistviewActivity.java

package com.yangfuhai.listviewdemo;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.ListView;/** * @title 圓角listview的實現 * @description 圓角listview的實現 * @company 探索者網路工作室(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);}/** * 添加 按鈕執行的操作 * @param view */static int i = 0;public void add(View view) {mListViewAdapter.addData(" ----item ---   "+i+"   ---");mListViewAdapter.notifyDataSetChanged();i++;}/** * 刪除按鈕執行的操作 * @param view */public void del(View view) {mListViewAdapter.delData();mListViewAdapter.notifyDataSetChanged();if(i>0) i--;}}

適配器 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 圓角listview的實現 適配器 * @description ListViewAdapter listview的適配器 * @company 探索者網路工作室(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>(); //資料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;}/** * listview中要判斷item的位置，第一條，最後一條和中間的item是不一樣的。 */@Overridepublic View getView(int position, View convertView, ViewGroup parent) {View view  = null ;if(datas.size()>1){//listView 資料是兩條以上if(position == 0){ //第一條資料view = View.inflate(mContext, R.layout.list_item_top, null);}else if(position == datas.size() - 1){ //最後一條資料view = View.inflate(mContext, R.layout.list_item_bottom, null);}else{ //中間的資料view = View.inflate(mContext, R.layout.list_item_middle, null);}}else{ //只有一條資料view = View.inflate(mContext, R.layout.list_item_single, null);}((TextView)view.findViewById(R.id.title)).setText(datas.get(position));//設定文本樣式return view;}}

布局檔案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="請點擊添加刪除 查看效果" />    <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="添加" />        <Button            android:id="@+id/buttonDel"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="del"            android:text="刪除" />    </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>

 

listview的布局檔案和資源檔

上面的代碼很簡單，沒有什麼可講的。主要講的是listview每個item的樣式檔案

 

listview的item有四個布局檔案，分別是：只有一個item時候的樣式，多個item時候上邊item的樣式，下邊item的樣式，中間item的樣式。 布局檔案和背景檔案對應關係如所示：

檔案檔案

listview的item配置樣式如下：

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

這四個布局檔案中唯一不同的只是他們的stype屬性（style=”@style/list_item_middle”）不同，也就是他們的背景不同。

 

資源檔

下面我們先貼出布局檔案背景檔案的shade代碼，然後再仔細的講解背景這些檔案裡面代碼的意思。

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資源檔講解

我們拿 background_view_rounded_top.xml （最後一個資源檔）來給大家講解 裡面的每個屬性的含義：

 

inset

inset：這種資源指向一個InsetDrawable對象，它能夠用指定的距離嵌入到另一個可繪製資源中。它的屬性有：

android:drawable=”@drawable/drawable_resource”

android:insetTop=”dimension”

android:insetRight=”dimension”

android:insetBottom=”dimension”

android:insetLeft=”dimension”

其中android:drawable是要嵌入的圖片資源，android：insetXXX是嵌入位置。

selector

selector：是一種樣式選取器，它用來指導某個view（button,textview,edittext等）的不同狀態（比如：正常的狀態，獲得焦點的狀態，按下的狀態 等）對應的不同資源。

shadeshade gradient

shade gradient：色彩坡形

android:startColor和android:endColor分別為漸層的起始顏色和結束顏色

android:angle是漸層角度，必須為45的整數倍 。

漸層模式有兩種：

android:type=”linear”，線性漸層，白話就是漸層是從一頭到另一頭的色彩坡形過程。

android:type=”radial”，放射狀漸層，白話就是漸層是從中心到四周的過程。放射狀漸層需要指定漸層半徑android:gradientRadius=”50″。

shade corners

shade  corners：圓角 （這篇文章主要就是用到了它）

android:radius為角的弧度，值越大角越圓。

其他

shade  除了gradient和corners以外，還有stroke（描邊），solid （實心），padding等（具體大家可以看android的協助文檔）。

 

實現

通過以上的代碼，我們實現了效果如：

 

 

完畢

 

源碼下載

源碼下載：http://download.csdn.net/detail/michael_yy/4614701 (免積分下載)

轉載請註明出處。http://blog.csdn.net/michael_yy/article/details/8038653