利用9-Patch PNG來實現ListView的圓角顯示

jopen 12年前發布 | 32K 次閱讀 Android Android開發 移動開發

說到圓角顯示，可能很多人的第一反應就是覆蓋onDraw方法來自己畫個圓角，可能以前寫過其它Windows程序，比如Delphi的人會更有這種沖動吧。
不過在Android中，我們不需要這么麻煩，事實上整個Android系統的UI都是基于Style來實現的，有興趣的朋友可以去研究一下Android的源碼，看看如Button, Radio是如何實現的，就會明白Android的UI體系是非常強大、簡單，又有趣的。
本文會以List View為例來講解，如何使用Style來實現圓角（想想哪個控件已經是有圓角的了？）。

何為Style

Android系統中的UI都是基于一個個的Style來顯示的，同1個控件，換1個Style，效果就完全不同了。Style其實就是一堆顯示屬性的集合，包括文字屬性，顏色設置，背景設置，而一堆Style的集合就構成了Theme.

尤其值得一提的是Style定義中經常會看到Selector，用于描述1個控件在不同的場景（Normal, Pressed, Disabled）下的顯示。如以下的style定義代碼：
文件：drawable/setting_button.xml

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


<selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    <item android:state_pressed="true"  android:drawable="@drawable/setting_icon_pressed"/>
    <item android:state_focused="true"  android:drawable="@drawable/setting_icon_pressed"/>



<item android:drawable="@drawable/setting_icon_normal"/> 



</selector></pre> 
  
 
  
這是最簡單的selector定義，它的含義是有1個按鈕，在pressed或focused時，顯示圖標 @drawable/setting_icon_pressed，否則顯示@drawable/setting_icon_normal，而這個 selector本身就可以用在button的android:background屬性中，如：android:background=”@drawable/setting_button”。如此一來，Android就會在你按下按鈕的時候自動切換背景圖片。
 
  
何為9-Patch
 
  
講到了背景圖片，就必然會聯想到圖片的大小和縮放問題，總不能不斷去麻煩美工MM來幫你修改圖的大小吧，更何況我們還要適應Android手機眾多的分辨率？
 這就要說到9-Patch了，先來看看Google官方關于這個工具的1個截圖：
 
  
draw9patch工具
 
  
首先，這是1個PNG圖片。其次，在用draw9patch打開的時候，會自動在邊緣添加1個像素點的透明邊框。而這個邊框就是你的工作范圍了，左鍵點擊會添加1個黑點，右鍵點擊會去掉1個黑點，這些黑點連成的線就構成了9-Patch圖片的效果。其中：左邊和上面表述的是圖片縮放的范圍，右邊和下邊表述的是內容的Padding范圍。
 
  

    好像有點不大明白？運行這個工具（在android sdk的tools目錄下），并且拖1個PNG圖片進去，選中下方的2個Checkbox，再試用一會兒就明白了。 
   
 OK，我們來準備今天這個教程所需要的圖片，請美工MM幫你畫1個圓角圖片吧，但不用切開，圖片大小大概在40×40即可，主要是根據你所需要的最小的大小來決定，然后拖到draw9patch中，看下開始的效果。 
   
 
   
draw9patch開始工作
 
 
   
然后我們在圖片邊緣點擊進行繪制，并且點選下方2個Checkbox，結束時的效果如下圖：
 
   
draw9patch繪制結束
 
   
在使用這個圖片時，左右2個綠色區域是會自動的上下拉伸，而上下2個綠色區域會自動的左右拉伸，中間的粉色區域會做4個方向的拉伸，至于4個角嘛，你已經知道了，它們不會縮放。而下方的的黑線表示，控件的內容會從最左邊到最右邊，幾乎不留空隙，右邊的黑線表示，控件的內容會在上下各留一些空間。
 好了，將這個文件保存為float_panel.9.png，并保存到res/drawable目錄下。記得擴展名必須是9.png，否則不會生效。另外下次你再次編輯這個文件時，draw9patch工具就不會再添加黑邊了。
 
   
編寫布局文件
 
   
文件：res/layout/coner_round_list_activity.xml
 
   
<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android&quot;
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical"
    >
    <TextView
        android:text="Coner Round List View Sample"



    android:layout_width="fill_parent" android:layout_height="wrap_content"
/>
<ListView
    android:id="@+id/conerRoundListView"
    android:layout_width="fill_parent" android:layout_height="wrap_content"

    android:paddingTop="10dp" android:paddingBottom="10dp"
    android:layout_margin="10dp"
    android:background="@drawable/float_panel"
    android:layout_weight="1"

    android:cacheColorHint="#FFEDEDED" android:divider="#00EDEDED"
/>



</LinearLayout></pre> 
   
 
   
略做講解：layout_margin是為了留點空間，更容易看出效果，backgroud就是用來設置9patch圖片的。cacheColorHint的顏色與我所選用的背景圖的顏色一樣，可以確保滾動時的item底色不會變化。android:divider是用來控制分隔線的，這里我們不需要它，否則效果會受影響。（試試去掉這個屬性？）
 
   
編寫Activity類
 
   
好了，我們寫個類來使用這個布局文件吧，老規矩，從API DEMO中COPY了一個很長的String[]定義，并且使用ArrayAdapter來顯示數據
 
   
public class ConerRoundListActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.coner_round_list_activity);
        ListView arrowList=(ListView) findViewById(R.id.conerRoundListView);
        arrowList.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, mStrings));
    }
    private String[] mStrings = {
            "Abbaye de Belloc", "Abbaye du Mont des Cats", "Abertam", "Abondance", "Ackawi",
            ...
    };
}
 
   
 平淡無奇的代碼，這也是我為什么說在Android中設置圓角是一件很容易的事情。 
   
 最后，在運行程序之前，我們還要為這個activity進行一下額外的配置，打開manifest文件，修改或添加這個activity的定義如下： 
   
<activity android:name=".conerround.ConerRoundListActivity"  android:label="Coner Round List"



android:theme="@android:style/Theme.Light"



/></pre> 
   
 
   
注意，我為這個activity指定了theme為android自帶的Theme.Light，原因是這個theme的配色與我選的圖片比較匹配（至少它的文字顏色是黑的，如果是默認Theme的白色，在背景圖上的顯示就看不清了）。
 
   
運行吧，最終的效果圖如下：
 
   
圓角ListView運行結果
 
   
總結
 
   
Style, 9-Patch PNG, Background，這些元素混在一起，構成了Android在UI方面非常強大的功能，而且它還很簡單，有興趣的話可以讀下源碼，會對UI元素的使用有更深的了解，也許自己弄1個漂亮的Theme來供多個程序使用是一個不錯的主意。
 
   
文章出處：http://www.learningandroid.net/blog/advance/9-patch-listview-coner/
 
  </div>

                    

                    

                        
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

相關經驗

相關資訊

相關文檔