Android UI（一）Layout 背景局部Shape圓角設計

Jeff Lee blog:   http://www.cnblogs.com/Alandre/  (泥沙磚瓦漿木匠),retain the url when reproduced ! Thanks

今天我們來Android UI第一講：實現Layout 背景局部Shape圓角設計

效果圖：

第一步：定義一個shape

res/drawable/shape_to_corner_no_bottom_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <!-- shape with circle-top corner -->
        <shape>
            <!-- the shape background color -->
            <solid android:color="@color/black"/>
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
                	 android:bottomLeftRadius="0.1dp" android:bottomRightRadius="0.1dp"/>
            <stroke  android:width="1dp" android:color="@color/black"/>
        </shape>
    </item>
</layer-list>

其中參數含義:{英語單詞顧名思義}

這是參數詳解

 <!-- 圓角 -->
    <corners
        android:radius="9dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp"
        android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"/><!-- 設置圓角半徑 -->
    
    <!-- 漸變 -->
    <gradient
        android:startColor="@android:color/white"
        android:centerColor="@android:color/black"
        android:endColor="@android:color/black"
        android:useLevel="true"
        android:angle="45"
        android:type="radial"
        android:centerX="0"
        android:centerY="0"
        android:gradientRadius="90"/>
    
    <!-- 間隔 -->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/><!-- 各方向的間隔 -->
    
    <!-- 大小 -->
    <size
        android:width="50dp"
        android:height="50dp"/><!-- 寬度和高度 -->
    
    <!-- 填充 -->
    <solid
        android:color="@android:color/white"/><!-- 填充的顏色 -->
    
    <!-- 描邊 -->
    <stroke
        android:width="2dp"
        android:color="@android:color/black"
        android:dashWidth="1dp"
        android:dashGap="2dp"/>
    填充：設置填充的顏色

間隔：設置四個方向上的間隔

大小：設置大小

圓角：同時設置五個屬性，則Radius屬性無效

android:Radius="20dp"                           設置四個角的半徑

android:topLeftRadius="20dp"              設置左上角的半徑
android:topRightRadius="20dp"           設置右上角的半徑
android:bottomLeftRadius="20dp"      設置右下角的半徑
android:bottomRightRadius="20dp"    設置左下角的半徑

描邊：dashWidth和dashGap屬性，只要其中一個設置為0dp，則邊框為實現邊框

android:width="20dp"                               設置邊邊的寬度
android:color="@android:color/black"  設置邊邊的顏色
android:dashWidth="2dp"                         設置虛線的寬度
android:dashGap="20dp"                          設置虛線的間隔寬度

漸變：當設置填充顏色后，無漸變效果。angle的值必須是45的倍數（包括0），僅在type="linear"有效，不然會報錯。android:useLevel 這個屬性不知道有什么用。

第二步: Layout中設置

   android:background="@drawable/shape_to_corner_no_bottom_line"

這樣就簡單的設置好了。