Android自定義View實現(xiàn)水波紋效果
介紹:水波紋散開效果的控件在 App 里面還是比較常見的,例如 網(wǎng)易云音樂歌曲識別,附近搜索場景。
看下實現(xiàn)的效果:
實現(xiàn)思路: 先將最大圓半徑與最小圓半徑間距分成幾等份,從內(nèi)到外,Paint 透明度依次遞減,繪制出同心圓,然后不斷的改變這些同心圓的半徑大小,延遲一定時間重繪,便達到了想外散開的動畫效果了。
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]; // 設置中間 drawable 點擊事件 } 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); // 計算觸摸點距離中心點的距離 float distance = (float) Math.sqrt(distanceX * distanceX + distanceY * distanceY); // 當點擊的點距離中心點距離小于最內(nèi)圓半徑時,認為是點擊有效,否則無效 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
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android水波紋載入控件CircleWaterWaveView使用詳解
- android自定義WaveView水波紋控件
- Android自定義View控件實現(xiàn)多種水波紋漣漪擴散效果
- Android自定義WaveProgressView實現(xiàn)水波紋加載需求
- Android自定義View實現(xiàn)水波紋引導動畫
- Android 自定義view實現(xiàn)水波紋動畫效果
- Android自定義View 實現(xiàn)水波紋動畫引導效果
- Android自定義view實現(xiàn)水波紋進度球效果
- Android項目實戰(zhàn)手把手教你畫圓形水波紋loadingview
- Android自定義View實現(xiàn)簡單水波紋效果
相關文章
Android?Jetpack?Compose開發(fā)實用小技巧
這篇文章主要為大家介紹了Android?Jetpack?Compose開發(fā)中的一些實用小技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11Android自定義View之RadioGroup實現(xiàn)跨多行顯示
這篇文章主要介紹了Android自定義View之RadioGroup實現(xiàn)跨多行顯示,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11Android使用TabLayou+fragment+viewpager實現(xiàn)滑動切換頁面效果
這篇文章主要介紹了Android使用TabLayou+fragment+viewpager實現(xiàn)滑動切換頁面效果,需要的朋友可以參考下2017-05-05Android RecyclerView item選中放大被遮擋問題詳解
這篇文章主要介紹了Android RecyclerView item選中放大被遮擋問題詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04Android開發(fā)實現(xiàn)webview中img標簽加載本地圖片的方法
這篇文章主要介紹了Android開發(fā)實現(xiàn)webview中img標簽加載本地圖片的方法,結合實例形式分析了webview加載本地圖片的步驟與相關操作技巧,需要的朋友可以參考下2017-10-10Android編程實現(xiàn)項目中異常捕獲及對應Log日志文件保存功能
這篇文章主要介紹了Android編程實現(xiàn)項目中異常捕獲及對應Log日志文件保存功能,涉及Android異常處理、日志讀寫及權限控制等相關操作技巧,需要的朋友可以參考下2018-02-02