今天翻看部落格，發現了水波紋效果。順便研究了一下

一，Touch Feedback（觸控反饋）

 1，原始自帶效果

程式碼：

    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="5.x自帶按鍵效果" />

    <Button
        android:layout_marginTop="50dp"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:gravity="center"
        android:text="第一種按下效果" />
    <Button
        android:layout_marginTop="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:text="按下圓形水波紋" />

 

錄製視訊到時候發現原生的下面兩個錄製不出來效果，所以自定義了一下效果顏色

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--可以修改背景顏色和水波紋的顏色：-->
        <item name="colorControlHighlight">@color/colorAccent</item>
        <item name="colorButtonNormal">@color/material_blue_grey_800</item>
    </style>
 

2 自定義。主要用到了ripple這個屬性。這個屬性是api21之後才有的，所以要在res下建drawable-v21,在drawable下建press.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/rippleshape" android:state_pressed="true" />
    <item android:drawable="@color/colorPrimary" />
</selector>
 

在drawable-v21下建press.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent">
    <item>
        <shape android:shape="oval">
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>

其中<ripple android:color="#FF21272B" .... />這個是指定水波紋的顏色 item裡不指定內容也可以，在ripple試試指定radius。

二，Reveal effect(揭示效果)

看效果

程式碼

public class MainActivity extends AppCompatActivity {

    private View view;
    private double radio;
    private boolean isOn = true;//記錄view的狀態,第一次進去是可見的,記為true,不可見記為false

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view = findViewById(R.id.view);
        findViewById(R.id.bt_action).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                createAnimation(view).start();
            }
        });


    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public Animator createAnimation(View v) {

        Animator animator;
        if (radio == 0L) {
            radio = Math.sqrt(Math.pow(view.getWidth(), 2) + Math.pow(view.getHeight(), 2));
        }
        if (isOn) {
            animator = ViewAnimationUtils.createCircularReveal(
                    v,// 操作的檢視
                    0,// 動畫開始的中心點X
                    0,// 動畫開始的中心點Y
                    (float) radio,// 動畫開始半徑
                    0);// 動畫結束半徑
        } else {
            animator = ViewAnimationUtils.createCircularReveal(
                    v,// 操作的檢視
                    0,// 動畫開始的中心點X
                    0,// 動畫開始的中心點Y
                    0,// 動畫開始半徑
                    (float) radio);// 動畫結束半徑
        }
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                if (!isOn) {
                    view.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (isOn) {
                    view.setVisibility(View.INVISIBLE);
                }
                isOn = !isOn;
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.setInterpolator(new DecelerateInterpolator());
        animator.setDuration(500);
        return animator;
    }
}

主要API

ViewAnimationUtils.createCircularReveal(
View view,//目標view
int centerX,//開始動畫的起點x座標(相對於目標view而言)
int centerY,//開始動畫的起點y座標(相對於目標view而言)
float startRadius,//初始半徑
float endRadius//結束半徑
);

總結：第一次寫部落格，寫的很簡單，還在摸索中。為了速度，有些樣例間接了網上大神