【轉】Android開發筆記——圓角和邊框們

標籤：效率   圖形   question   數值   highlight   class   resources   cccccc   ack   

原文地址：http://blog.xianqu.org/2012/04/android-borders-and-radius-corners/

 

Android開發筆記——圓角和邊框們

在做Android介面開發時，我們往往希望它儘可能優美，儘可能顯得專業。於是你看了看其他應用，哇，好多邊框和圓角啊。你是不是也想給自己的應用加上邊框和圓角效果？呃……那怎麼做呢？如果你是從web前端跑到Android來的，那麼我想你一定想到了不下三種解決方案。如用圖片替代，用CSS3定義，用JS畫。在Android中，其實也有類似的用法，本文將簡單介紹兩種Android圓角和邊框的實現。

1 圖片

在Android中，給一個控制項（或View）設定背景主要是通過background:xxx屬性來完成。background的參數一般來說是一個drawable資源。 drawable可以是一張普通的圖片，也可以是9 patch圖片，還可以是一個xml檔案。 給控制項設定邊框最簡單的方式就是把background設定成你預先設計好的帶圓角和邊框的背景圖。比如下面這張圖：

但是，你很快會發現一個缺點：靈活性很差！是的，固定大小的圖片很難根據控制項裡的內容而調整大小。它在被做出來的那天就已經被確定了！換句話說，你很難只用這一張圖來應付擁有相同風格卻大小各異的控制項。為了給所有控制項加上圓角和邊框，你必須小心翼翼地計算他們的大小，然後一個一個得製作背景圖片！天哪，這簡直太愚蠢了。一旦遇到大小不定的控制項，這方法就歇菜了。而且，大量的背景圖片會讓你的安裝包迅速膨脹。呃……還有，你怎麼應對擁有各式各樣解析度的Android裝置呢？

所以，你需要……換個方法。

比較為福士採用一種解決方案是NinePatch。可以毫不誇張得說，9 patch是Android中解決自適應問題的利器。介紹和使用你可以看看這裡還有這裡。

使用9 patch圖片有很多好處，如減輕美工壓力，減少UI代碼量，減少記憶體使用量……總結起來就是：省時省力，屌爆了。

所以在給圓角和邊框時，你或許會這麼做。

當然，9 patch能做的是遠遠比這多，如做一個自適應的對話方塊什麼的。

2 XML定義

我想大多數程式員都喜歡用代碼解決問題。原因如下：

1. 用代碼更加cool。
2. 我美工不行，我會說出去嗎？

OK，好東西在這裡。

2.1 基本的圓角、邊框

Android除了支援原始的圖片資源外，比較棒的一點就是可以用XML檔案定義一些簡單的圖形。這有點像web的CSS，不過相比CSS3，Android的xml實現還沒那麼強大，例如，邊框要麼四周都有，要麼四周都沒有（我們將在後面討論這事）。xml drawable的傳送門在這裡。

要畫一個帶灰色邊框和圓角的圖形很容易，在drawable資來源目錄下添加一個xml：

<?xml version="1.0" encoding="utf-8"?><!-- shape如果不聲明形狀則預設為正方形 --><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <corners android:radius="5.0dp" />    <!-- 圓角，你也可以對不同的角設定不同的數值 -->    <solid android:color="#FFFFFF" />    <!-- 形狀的填充色 -->    <stroke        android:width="1dp"        android:color="#CCCCCC" />    <!-- 邊框寬度和顏色 --></shape>

在你需要用到這東西的地方如某個View下，設定background就行了。

2.2 “自由的邊框“

目前的版本的Android SDK並沒有給stroke提供bottom、left、right之類的屬性，也就是說你無法通過它來讓長方形的邊框少於4條。啊，真是太遺憾了。怎麼辦呢？有人想到了對Layer List hack。 在StackOverflow上有不少這樣的把戲。

為了實現只有left，right和top邊框，我們可以這麼寫：

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item>        <shape android:shape="rectangle" >            <stroke                android:width="1dp"                android:color="@color/card_stroke" />        </shape>    </item>    <item        android:left="2dp"        android:right="2dp"        android:top="2dp">        <!-- 在實際使用中我發現1dp達不到顯示效果，而2dp正好可以顯示邊框 -->        <shape android:shape="rectangle" >            <solid android:color="@color/solid_white" />        </shape>    </item></layer-list>

原理差不多是這樣：

詭異的是理論上只要位移量只要1dp就能顯示1dp寬頻邊框了，但我在listview裡實驗了一下發現不行，換成2dp方可。有同學能解釋解釋嗎？

如果要給圖形加上圓角，只需要給每個shape加上

<corners    android:topLeftRadius="5.0dip"    android:topRightRadius="5.0dip" />

值得注意的是，兩個shape的radius在設定的時候請確保前面的圖層不會把後面的擋住。

3 小結

要在Android中實現圓角和邊框，比較簡單的方法：圖片、XML差不多就是這麼用的啦。此外還有用Java代碼調用draw方法畫出來的，不過我沒有研究過。 他們各有各的優點啦。用圖片，能控制的東西更多，用代碼修改起來比較另過。 最後要說的是兩個方法的效率。在這個問題上，我留有疑問，沒有做過專門的比較。但直觀的感受是……好吧，沒什麼感受。

【轉】Android開發筆記——圓角和邊框們