Android自定義View實(shí)現(xiàn)水波紋效果
介紹:水波紋散開(kāi)效果的控件在 App 里面還是比較常見(jiàn)的,例如 網(wǎng)易云音樂(lè)歌曲識(shí)別,附近搜索場(chǎng)景。
看下實(shí)現(xiàn)的效果:

實(shí)現(xiàn)思路: 先將最大圓半徑與最小圓半徑間距分成幾等份,從內(nèi)到外,Paint 透明度依次遞減,繪制出同心圓,然后不斷的改變這些同心圓的半徑大小,延遲一定時(shí)間重繪,便達(dá)到了想外散開(kāi)的動(dòng)畫效果了。
public class WaveView extends View {
private static final String TAG = "WaveView";
private int waveColor;
private int waveCount;
private Bitmap waveCenterIcon;
private Paint paint;
private int mWidth;
private int mHeight;
private int centerX;
private int centerY;
private float radius; // 最外圓半徑,即最大半徑
private float innerRadius; // 最內(nèi)圓的半徑,即最小半徑
private int centerIconWidth;
private int centerIconHeight;
private float[] waveDegreeArr;
private boolean isRunning = true;
public WaveView(Context context) {
this(context, null);
}
public WaveView(Context context, AttributeSet attrs) {
super(context, attrs);
readAttrs(context, attrs);
init();
}
private void init() {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(waveColor);
paint.setStyle(Paint.Style.FILL);
waveDegreeArr = new float[waveCount];
// 設(shè)置中間 drawable 點(diǎn)擊事件
}
private void readAttrs(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView);
try {
waveColor = typedArray.getColor(R.styleable.WaveView_waveColor, 0xffff0000);
waveCount = typedArray.getInt(R.styleable.WaveView_waveCount, 4);
Drawable centerDrawable = typedArray.getDrawable(R.styleable.WaveView_waveCenterIcon);
waveCenterIcon = ((BitmapDrawable) centerDrawable).getBitmap();
} catch (Exception e) {
} finally {
typedArray.recycle();
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
centerX = mWidth / 2;
centerY = mHeight / 2;
radius = Math.min(mWidth, mHeight) / 2f;
centerIconWidth = waveCenterIcon.getWidth();
centerIconHeight = waveCenterIcon.getHeight();
innerRadius = Math.max(centerIconWidth, centerIconHeight) * 1.2f;
for (int i = 0; i < waveCount; i++) {
waveDegreeArr[i] = innerRadius + (radius - innerRadius) / waveCount * i;
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (widthMode == MeasureSpec.UNSPECIFIED || widthMode == MeasureSpec.AT_MOST) {
widthMeasureSpec = MeasureSpec.makeMeasureSpec(dp2Px(120), MeasureSpec.EXACTLY);
}
if (heightMode == MeasureSpec.UNSPECIFIED || heightMode == MeasureSpec.AT_MOST) {
heightMeasureSpec = MeasureSpec.makeMeasureSpec(dp2Px(120), MeasureSpec.EXACTLY);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
drawWave(canvas);
drawCenterCircle(canvas);
drawCenterIcon(canvas);
}
private void drawCenterCircle(Canvas canvas) {
canvas.drawCircle(centerX, centerY, innerRadius, paint);
}
private void drawWave(Canvas canvas) {
for (int i = 0; i < waveCount; i++) {
paint.setAlpha((int) (255 - 255 * waveDegreeArr[i] / radius));
canvas.drawCircle(centerX, centerY, waveDegreeArr[i], paint);
}
for (int i = 0; i < waveDegreeArr.length; i++) {
if ((waveDegreeArr[i] += 4) > radius) {
waveDegreeArr[i] = innerRadius;
}
}
if (isRunning) {
postInvalidateDelayed(50);
}
}
private void drawCenterIcon(Canvas canvas) {
paint.setAlpha(255);
int left = centerX - centerIconWidth / 2;
int top = centerY - centerIconHeight / 2;
canvas.drawBitmap(waveCenterIcon, left, top, paint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
// 處理事件邏輯
handleEvent(event);
return true;
}
return true;
}
private void handleEvent(MotionEvent event) {
float touchX = event.getX();
float touchY = event.getY();
Log.i(TAG, "handleEvent: " + "(" + touchX + "," + touchY + ")");
float distanceX = Math.abs(touchX - centerX);
float distanceY = Math.abs(touchY - centerY);
// 計(jì)算觸摸點(diǎn)距離中心點(diǎn)的距離
float distance = (float) Math.sqrt(distanceX * distanceX + distanceY * distanceY);
// 當(dāng)點(diǎn)擊的點(diǎn)距離中心點(diǎn)距離小于最內(nèi)圓半徑時(shí),認(rèn)為是點(diǎn)擊有效,否則無(wú)效
if (distance < innerRadius) {
if (listener != null) {
listener.onCenterWaveClick();
}
}
}
OnCenterWaveClickListener listener;
public interface OnCenterWaveClickListener {
void onCenterWaveClick();
}
public void setOnCenterWaveClickListener(OnCenterWaveClickListener listener) {
this.listener = listener;
}
public void toggle() {
isRunning = !isRunning;
invalidate();
}
public boolean isWaveRunning() {
return isRunning;
}
private int dp2Px(int dpValue) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics());
}
}
github地址:https://github.com/xing16/WaveView
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android水波紋載入控件CircleWaterWaveView使用詳解
- android自定義WaveView水波紋控件
- Android自定義View控件實(shí)現(xiàn)多種水波紋漣漪擴(kuò)散效果
- Android自定義WaveProgressView實(shí)現(xiàn)水波紋加載需求
- Android自定義View實(shí)現(xiàn)水波紋引導(dǎo)動(dòng)畫
- Android 自定義view實(shí)現(xiàn)水波紋動(dòng)畫效果
- Android自定義View 實(shí)現(xiàn)水波紋動(dòng)畫引導(dǎo)效果
- Android自定義view實(shí)現(xiàn)水波紋進(jìn)度球效果
- Android項(xiàng)目實(shí)戰(zhàn)手把手教你畫圓形水波紋loadingview
- Android自定義View實(shí)現(xiàn)簡(jiǎn)單水波紋效果
相關(guān)文章
Android 無(wú)障礙全局懸浮窗實(shí)現(xiàn)示例
本文主要介紹了Android 無(wú)障礙全局懸浮窗實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Android?Jetpack?Compose開(kāi)發(fā)實(shí)用小技巧
這篇文章主要為大家介紹了Android?Jetpack?Compose開(kāi)發(fā)中的一些實(shí)用小技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
Android自定義View之RadioGroup實(shí)現(xiàn)跨多行顯示
這篇文章主要介紹了Android自定義View之RadioGroup實(shí)現(xiàn)跨多行顯示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11
Android使用TabLayou+fragment+viewpager實(shí)現(xiàn)滑動(dòng)切換頁(yè)面效果
這篇文章主要介紹了Android使用TabLayou+fragment+viewpager實(shí)現(xiàn)滑動(dòng)切換頁(yè)面效果,需要的朋友可以參考下2017-05-05
Android RecyclerView item選中放大被遮擋問(wèn)題詳解
這篇文章主要介紹了Android RecyclerView item選中放大被遮擋問(wèn)題詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Android開(kāi)發(fā)實(shí)現(xiàn)webview中img標(biāo)簽加載本地圖片的方法
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)webview中img標(biāo)簽加載本地圖片的方法,結(jié)合實(shí)例形式分析了webview加載本地圖片的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
Android編程實(shí)現(xiàn)項(xiàng)目中異常捕獲及對(duì)應(yīng)Log日志文件保存功能
這篇文章主要介紹了Android編程實(shí)現(xiàn)項(xiàng)目中異常捕獲及對(duì)應(yīng)Log日志文件保存功能,涉及Android異常處理、日志讀寫及權(quán)限控制等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02

