Android 實現對話方塊圓角功能

標籤：android studio   對話方塊   android 圓角   模糊   

                       Android 實現自訂dialog圓角功能

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

                       

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

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

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- 填充的顏色 -->
    <solid android:color="#0000FF" />
    <!-- 設定按鈕的四個角為弧形 -->
    <!-- android:radius 弧形的半徑 -->
    <corners android:topLeftRadius="@dimen/RoundedAmplitude" android:topRightRadius="@dimen/RoundedAmplitude"/>

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

    
</shape>

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

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

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

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.pop.main.ClipImageView  android:layout_width="match_parent" android:layout_height="match_parent"
        android:id="@+id/front_image"/>

    <ImageView android:layout_width="match_parent" android:layout_height="match_parent"
        android:background="#33000000"/>

    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:orientation="vertical" android:layout_centerInParent="true"
        android:background="@drawable/shapeyuanjiao">
        <TextView android:layout_width="match_parent" android:layout_height="30dip"
            android:background="@drawable/shapeyuanjiao3"
            android:text="保證金狀態"
            android:gravity="center"
            android:textColor="@color/white" />
        <View  android:layout_height="1dip"
            android:layout_width="match_parent"
            android:background="@color/blue" /><!-- 實現分隔線的顯示-->
        <TextView android:layout_width="match_parent"
            android:layout_height="30dip"

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

        <TextView android:layout_width="match_parent" android:layout_height="30dip"

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

    </LinearLayout>


</RelativeLayout>

請注意 <TextView android:layout_width="match_parent" android:layout_height="30dip"
            android:background="@drawable/shapeyuanjiao3"
            android:text="保證金狀態"
            android:gravity="center"
            android:textColor="@color/white" />
        <View  android:layout_height="1dip"
            android:layout_width="match_parent"
            android:background="@color/blue" />

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

<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:orientation="vertical" android:layout_centerInParent="true"
        android:background="@drawable/shapeyuanjiao">

實際運行結果如:

             

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

彎路一：

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#0033FF" />
    //設定邊距,實現圓角功能
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />

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

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

    //控制圓角大小
    <corners android:radius="10dp" />

</shape>

注意這段代碼：

 //設定邊距,實現圓角功能
    <padding
        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設定成藍色的就可以了。

   有些地方說的不太明白，可以問我，這個小demo可以從這裡下載，歡迎下載。

http://download.csdn.net/detail/omayyouhappy/8888251是免費的，可以給新手一些建議。還有這個代碼還是先了背景圖片模糊的功能，具體可以參考我下一篇部落格：關於Android背景圖片模糊的解決方案？

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android 實現對話方塊圓角功能