Android 水波紋效果
阿新 • • 發佈:2018-12-10
今天翻看部落格,發現了水波紋效果。順便研究了一下
一,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//結束半徑
);
總結:第一次寫部落格,寫的很簡單,還在摸索中。為了速度,有些樣例間接了網上大神