Android 實現對話方塊圓角功能

Android 實現對話方塊圓角功能

Android 實現自訂dialog圓角功能

 

剛接觸公司的Android項目，客戶畫好了介面，需求如下：

 

彈出的視窗是要四個圓角，並且標題列顏色和下方不一樣，還要以藍色線分隔開，通過網上各種百度，給出的方案基本上是在/drawable檔案夾下建立一個shape檔案，裡面對控制項進行一些控制。（這裡要注意的是shape檔案應該是放在drawable檔案夾下，至於為什麼要放到這裡，以及根項目下的各種元素用法，請參考這位前輩的部落格：http://blog.csdn.net/lonelyroamer/article/details/8254592講解的非常詳細）。

 

關鍵點就在於shape提供了很多元素用來控制顏色、圓角（四個方向都可以控制半徑大小）。既然要用到圓角的快顯視窗，我們就得用以下的元素corners來控制，工程目錄為：F:PopwindowOnLeft1appsrcmain esdrawable-mdpishapeyuanjiao3.xml：

android:shape=rectangle >







android:angle=270
android:centerColor=#0000FF
android:endColor=#0000FF
android:startColor=#0000FF />

 

上述代碼中corner可以設定上面和下面的兩個角，不設定的話預設是半徑為0，這一點大家可以上機測試。

設定好了圓角尺寸之後，就要在布局檔案裡面使用，使用其實非常簡單，通過Layout、view、textview等的android:background=@drawable/shapeyuanjiao3屬性，設定尺寸、圓角（可以定製單獨顯示哪個角需要圓角）。

好了，進入實際需求來吧，為了顯示初步的布局，我用了一個相對布局，檔案如下：

android:layout_width=match_parent
android:layout_height=match_parent>
android:id=@+id/front_image/>

android:background=#33000000/>

android:layout_marginLeft=60dp
android:layout_marginRight=60dp
android:orientation=vertical android:layout_centerInParent=true
android:background=@drawable/shapeyuanjiao>
android:background=@drawable/shapeyuanjiao3
android:text=保證金狀態
android:gravity=center
android:textColor=@color/white />
android:layout_width=match_parent
android:background=@color/blue />
android:layout_height=30dip

android:text=賬號09102
android:textColor=@color/black/>


android:text=浮動損益
android:textColor=@color/black/>



 

 

請注意 android:background=@drawable/shapeyuanjiao3
android:text=保證金狀態
android:gravity=center
android:textColor=@color/white />
android:layout_width=match_parent
android:background=@color/blue />

這段代碼就是關鍵所在，textview為dialog的表頭，單獨設定成藍色的。整體的dialog視窗需要設定成灰色的，所以需要另外一個shape檔案，兩個檔案只是在圓角的顯示個數和顏色上面有一點差異，大家可以稍作修改就可以看到效果。下列是整個dialog的設定情況：

android:layout_marginLeft=60dp
android:layout_marginRight=60dp
android:orientation=vertical android:layout_centerInParent=true
android:background=@drawable/shapeyuanjiao>

實際運行結果如:

介面有點醜，莫見怪。其實在做的過程當中，走了很多彎路，我列出來吧，給遇到同樣問題的人提供一些經驗，技術不夠的地方請批評指正。

彎路一：

我從網上找了另外一種設定dialog為圓角的方式，也是通過shape檔案來設定，但方法有點曲折，是通過給整個dialog外層另外增加一層圓角，這裡會看到整個視窗像是被包在一起，效果很不理想，shape檔案如下：

//設定邊距,實現圓角功能
android:bottom=4dp
android:left=4dp
android:right=4dp
android:top=4dp />

//控制邊界線顏色和筆觸大小
android:width=1dp
android:color=#CdCdCd />

//控制介面色彩坡形（你這個用不到）
android:startColor=#E9E9E9
android:endColor=#FFFFFF
android:type=linear
android:angle=90/>

//控制圓角大小

 

注意這段代碼：

//設定邊距,實現圓角功能
android:bottom=4dp
android:left=4dp
android:right=4dp
android:top=4dp />這個方式有點不太符合客戶的要求，有需要的朋友可以參考一下，我啟動並執行結果如下：

 

彎路2：

在布局檔案中，一開始我是這樣考慮的，既然標題的顏色和下列顯示的不太一樣，我就用android:background=@color/blue這樣設定，然後外圍的LineLayout設定android:background=@drawable/shapeyuanjiao3但是發現，運行之後，是沒有圓角效果的，諮詢了公司同事才發現，雖然設定了整個的Layout的shape圓角效果，但給每一行的imageview設定background的時候，就會覆蓋外圍的樣式，導致顯示不出來，解決方案就是每個單獨的imageview不用設定顏色，給標題藍色單獨再用另外一個shape設定成藍色的就可以了。