Button 實現圓角按鈕

1 xml佈局的第一個，就是一個Button.，其他的都是TextView

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<!--注意 android:background="@drawable/btn_selector"-->
    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/btn_selector" 
        android:text="@string/hello_world" />

</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

2 注意到上面的Button的background屬性

android:background="@drawable/btn_selector" 
其中的btn_selector是一個自定義的xml文件，繼續看這個文件

• 1
• 2

3在工程的res目錄下面新建一個forlder命名成drawable(小寫英文的，注意別寫錯了)，然後在drawable目錄下新建一個selector文件

btn_selector.xml，大家應該秒懂這個文件的內容和意思吧！當按鈕正常沒有被按下的時候顯示一個背景，按下的時候則顯示另外一個顏色的背景，這樣可以使用戶得知按鈕被按下了。

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

    <!-- Button正常狀態下的背景 -->
    <item android:drawable="@drawable/btn_bg_normal" android:state_pressed="false"/>
    <!-- Button按下時的背景 -->
    <item android:drawable="@drawable/btn_bg_pressed" android:state_pressed="true"/>
</selector>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

4 從btn_selector.xml文件中大家又發現了btn_bg_normal和btn_bg_pressed,這兩個文件也是在drawable目錄下的

4.1 在drawable 目錄下新建兩個 shape文件分別是btn_bg_normal.xml,和btn_bg_pressed.xml文件

btn_bg_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 按鈕正常的時候的背景 -->
<!-- shape的默認形狀是rectangle，還有oval(橢圓),line（線）,ring（圓環），我就用過rectangle,其他的大家可以試一試 -->

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 矩形的圓角弧度 -->
    <corners android:radius="10dp" />
    <!-- 矩形的填充色 -->
    <solid android:color="#FF4081" />

    <!-- 矩形的邊框的寬度,每段虛線的長度，和兩段虛線之間的顏色和顏色 -->
    <stroke
        android:width="1dp"
        android:dashWidth="8dp"
        android:dashGap="4dp"
        android:color="#4eb621" />
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

btn_bg_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 矩形的圓角弧度 -->
    <corners android:radius="10dp" />
    <!-- 矩形的填充色 -->
    <solid android:color="#3F51B5" />
    <!-- 矩形的邊框的寬度,每段虛線的長度，和兩段虛線之間的顏色和顏色 -->
    <stroke
        android:width="1dp"
        android:color="#4eb621"
        android:dashGap="4dp"
        android:dashWidth="8dp" />
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

兩點注意： 
注意 stroke 是指shape的邊界線

  <stroke
        android:width="1dp"
        android:dashWidth="8dp"
        android:dashGap="4dp"
        android:color="#4eb621" />

• 1
• 2
• 3
• 4
• 5

如果希望邊界線是實線而不是虛線的話，可以象下面這樣寫。

<stroke
        android:width="1dp"
        android:color="#4eb621" />

• 1
• 2
• 3

注意如果要實現只有左邊是圓角，右邊還是直角這種類似的背景的話，可以如下設置：

<corners 
                android:topLeftRadius="20dp"
                android:bottomLeftRadius="20dp"
                android:topRightRadius="0dp" 
                android:bottomRightRadius="0dp"  />

• 1
• 2
• 3
• 4
• 5

具體設置corners 每個角的角度

drawable gradient 漸變背景色。

<gradient
  android:angle="integer"
  android:centerX="Float"
  android:centerY="Float"
  android:centerColor="integer"
  android:startColor="color"
  android:endColor="color"
  android:gradientRadius="integer"
  android:type=["linear"|"radial"|"sweep"]
  android:usesLevel=["true"|"false"]
  />

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

angle：角度，當 android:type=“linear”時有效 ，億45度爲單位，逆時針方向旋轉
centerX：Float。漸變色中心的 X 相對位置（ 0-1.0 ）。當 android:type=“linear”時無效 
centerY：Float。漸變色中心的 Y 相對位置（ 0-1.0 ）。當 android:type=“linear”時無效 
centerColor：color。可選的顏色，出現在 start 和 end 顏色之間。 
gradientRadius：Float。漸變色的半徑。當 android:type=“radial” 時有效。 
startcolor：開始的顏色 
endcolor：結束的顏色 
type：漸變色的樣式。有效值爲： 
“linear”：線性漸變，默認值 
“radial”：環形漸變。 start 顏色是處於中間的顏色 
“sweep”：扇形漸變 
useLevel：Boolean。“ true ”表示可以當作 LevelListDrawable 使用（沒搞懂是什麼意思）

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

layer-list 使用 
圖片來自：http://blog.csdn.net/pcaxb/article/details/47781547 

例子：如果我們想給一個TextView 添加這樣一個背景，一層背景是白色的，另外一層是藍色的但是只露出來一部分，就可以使用layer-list實現。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--上面的爲背景的底層-->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

    <!--背景上面的圖層 讓底部的背景露出來4dp的高度-->
    <item android:bottom="4dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

最後來一張圖 這纔是重點啊，哈哈。