Button：今夜化了美美的裝——shape&ripple（波紋）

Buuton作爲大部分教程首先或者第二位講解的控件，有着至高無上的作用和需求，學Android的不管是大神或者小白都曾爲實現第一個Button的監聽事件而歡喜，在實現監聽功能的基礎上，用戶還是需求更高的體驗
國際慣例，上官方圖
在新版的Api23（Android6.0）或Api24裏的Button是這個樣子的。

然後今天想說的是:Android新版本的button都具備了最新的技能
ripple effect(水波紋效果),今天不說怎麼實現的，我們來分析一下，怎麼使用才優雅。

以前做按鈕的樣式，一般是用shape加上背景就行了，或者有些時候加上selector來做選中或未選中區分，今天我們要做的是一個帶有shape樣式的水波紋按鈕。效果圖：
（這裏沒上傳gif動畫，湊合看唄,點擊是有很炫的水波紋的）

現在分析一下紫色框的button，
實現步驟：1.在drawable下新建ripple文件，這裏我命名爲ripple_alf.xml，內容如下

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sizeandroid="http://schemas.android.com/apk/res-auto"
    xmlns:solidandroid="http://schemas.android.com/tools"
    android:color="#484b4a">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="#3ffcf9fc"/>
            <corners android:radius="8px"/>
            <stroke android:color="#9f32cd" android:width="2px" />
        </shape>


    </item>

</ripple>

<!--ripple標籤下的color表示波紋顏色-->
<!--ripple標籤下嵌入一個item標籤，在item裏面加入shape形狀-->

2.然後在layout文件裏面引用

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="選擇時間"
        android:id="@+id/button2"

        android:background="@drawable/ripple_alf"

        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="47dp"
        android:layout_alignParentEnd="true" />

完成效果，透明光環水波紋！
當然你可以修改顏色,透明來達到不同的效果

下面就是圓形的這枚傢伙了，在這裏我的ripple命名爲ripple.xml,內容如下：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sizeandroid="http://schemas.android.com/apk/res-auto"
    xmlns:solidandroid="http://schemas.android.com/tools"
    android:color="#969998">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">
            <solid
                android:color="#35e679"/>
            <size
                android:width="12dp"
                android:height="12dp"/>
        </shape>
    </item>

</ripple>

引用方式還是一樣的，下面是動畫效果
在res下新建anim文件夾，新建了zoom.xml文件

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

    <scale
        android:duration="500"
        android:fillEnabled="true"
        android:fillAfter="true"
        android:pivotY="50%"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:toXScale="1.02"
        android:toYScale="1.02" >
    </scale>

</set>

上面是放大縮小的動畫

最後在MainActivity裏面引用

public class MainActivity extends AppCompatActivity {
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button=(Button)findViewById(R.id.time);
       button.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.zoom);           //加載動畫
               button.clearAnimation();                                     //清理動畫
               button.startAnimation(animation);                  //傳入動畫，啓動

           }
       });

    }
}

好了，綠胖子也完成了，額，說到綠胖子想起來，我們可以用selector來做一些可愛背景的button，這裏就不列舉了。

我想開發簡單的東西，這些按鈕已經夠用了，畢竟模式是一樣的，具體客戶的要求還要別的形式實現。