前言：我們在很多時候都需要在res/drawable資料夾下建立相應的xml檔案來為控制元件新增一些樣式效果，比如按鈕按下時的按鈕樣式變化、或者指定按鈕的一些邊框樣式、或者為常用的EditText、TextView、ImageView、ImageButton等等新增一些樣式。今天我們就來講下怎麼製作圓形Button、圓形ImageView、圓形....等，並且使用Animation給它們新增彈跳動畫。

我們就先講一下shape標籤的屬性吧：

我們在xml新建一個shape屬性的標籤，shape標籤的根屬性shape屬性是我們今天主講的內容，

shape的根屬性android：shape屬性有這麼幾個固定的值，android:shape=["rectangle" | "oval" | "line" | "ring"]

shape的形狀，預設為矩形，可以設定為矩形（rectangle）、橢圓形(oval)、線性形狀(line)、環形(ring)【注：需要把控制元件設定為什麼樣的形狀時就需要自己設定這些值了，比如設定為圓形或者橢圓時需要把android:shape設定為android:shape="oval"，其它形狀的也是相應如此】

【注】： 下面的屬性只有在android:shape="ring"時可用，即為環形：

  android:innerRadius 尺寸，內環的半徑。

  android:innerRadiusRatio 浮點型，以環的寬度比率來表示內環的半徑，

  例如，如果android:innerRadiusRatio，表示內環半徑等於環的寬度除以5，這個值是可以被覆蓋的，預設為9.

  android:thickness 尺寸，環的厚度

  android:thicknessRatio 浮點型，以環的寬度比率來表示環的厚度，例如，如果android:thicknessRatio="2"，

  那麼環的厚度就等於環的寬度除以2。這個值是可以被android:thickness覆蓋的，預設值是3.

  android:useLevel boolean值，如果當做是LevelListDrawable使用時值為true，否則為false.

好了，知道了android:shape的幾個屬性，那麼我們要把一個Button變成圓形形狀的話，就需要設定android:shape="oval"了，這樣才能變成我們需要的形狀。

下面就直接貼程式碼了，xml檔案：

1. <shapeandroid:shape="oval">
2. <solidandroid:color="#b8c7e5"/>
3. <paddingandroid:bottom="10dp"android:left="10dp"android:right="10dp"android:top="10dp"/>
4. <strokeandroid:width="1dp"android:color="#ffffff"/>
5. </shape>

Button佈局檔案：

1. <Button
2.             android:id="@+id/bt_main_login"
3.             android:layout_width="80dp"
4.             android:layout_height="80dp"
5.             android:background="@drawable/main_button_style"
6.             android:layout_marginBottom="40dp"
7.             android:text="登入"
8.             android:textColor="#ffffff"
9.             android:textSize="20sp"/>

好了，這樣的話我們把Button就設定成了圓形了。

我們先來看看效果吧：

嘿嘿，是不是成功了啊，省去了自定義控制元件的事了。

但是我說了還要新增彈跳動畫效果啊，就是一開啟頁面就有這兩個圓形的按鈕像球一樣彈跳的顯示出來，那麼怎麼實現呢？答案就是要用到Animation和插值器了，直接上程式碼吧：

1. privatevoid jump(){  
2.         TranslateAnimation down = new TranslateAnimation(0, 0, -300, 0);//位移動畫，從button的上方300畫素位置開始
3.         down.setFillAfter(true);  
4.         down.setInterpolator(new BounceInterpolator());//彈跳動畫,要其它效果的當然也可以設定為其它的值
5.         down.setDuration(2000);//持續時間
6.         mBtLogin.startAnimation(down);//設定按鈕執行該動畫效果
7.         mBtRegister.startAnimation(down);//設定按鈕執行該動畫效果
8.     }  

那麼我們就來看下動畫效果吧

是不是ok了呀！！！