效果圖

實(shí)現(xiàn)思路

這個(gè)效果實(shí)現(xiàn)起來并不難，重要的是思路

此View滿足了多種水波紋漣漪擴(kuò)散效果，這要求它能滿足很多的變化

根據(jù)上面的樣式，可以看出此View需要滿足以下變化

• 圓圈從中心可循環(huán)向外擴(kuò)散
• 圓圈之間的擴(kuò)散間距可以改變
• 可控制擴(kuò)散圓的漸變度
• 圓圈可以是線條樣式或者實(shí)心樣式
• 圓圈擴(kuò)散的速度可以控制
• 適配圓圈不同大小下的擴(kuò)散效果

具體實(shí)現(xiàn)

創(chuàng)建自定義屬性

首先為View創(chuàng)建自定義的xml屬性

在工程的values目錄下新建attrs.xml文件

 <declare-styleable name="mRippleView">
 <attr name="cColor" format="color"/>
 <attr name="cSpeed" format="integer"/>
 <attr name="cDensity" format="integer"/>
 <attr name="cIsFill" format="boolean"/>
 <attr name="cIsAlpha" format="boolean"/>
 </declare-styleable>

各個(gè)屬性的作用如下

• cColor：View控件的顏色
• cSpeed：向外擴(kuò)散的速度
• cDensity：圓形波紋擴(kuò)散的間距
• cIsFill：是否開啟填充模式，true為實(shí)心圓
• cIsAlpha：是否開啟漸變效果，true為開啟

創(chuàng)建自定義View控件

新建RippleView類繼承View類，重寫它的三個(gè)構(gòu)造方法，獲取用戶設(shè)置的屬性，同時(shí)指定默認(rèn)值

 public RippleView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 // 獲取用戶配置屬性
 TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.mRippleView);
 mColor = tya.getColor(R.styleable.mRippleView_cColor, Color.BLUE);
 mSpeed = tya.getInt(R.styleable.mRippleView_cSpeed, 1);
 mDensity = tya.getInt(R.styleable.mRippleView_cDensity, 10);
 mIsFill = tya.getBoolean(R.styleable.mRippleView_cIsFill, false);
 mIsAlpha = tya.getBoolean(R.styleable.mRippleView_cIsAlpha, false);
 tya.recycle();
 init();
 }

使用TypedArray讀取完自定義的屬性后一定要記得調(diào)用recycle方法釋放掉

重寫onMeasure

測量onMeasure，首先需要測量出View的寬和高，并指定View在wrap_content時(shí)的最小范圍，對于View繪制流程還不熟悉的同學(xué)，可以先去了解下具體的繪制流程

http://www.dbjr.com.cn/article/118775.htm

重寫onMeasure方法，其中我們要考慮當(dāng)View的寬高被指定為wrap_content時(shí)的情況，如果我們不對wrap_content的情況進(jìn)行處理，那么當(dāng)使用者指定View的寬高為wrap_content時(shí)將無法正常顯示出View

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
 int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
 int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
 int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
 // 獲取寬
 if (myWidthSpecMode == MeasureSpec.EXACTLY) {
  // match_parent/精確值
  mWidth = myWidthSpecSize;
 } else {
  // wrap_content
  mWidth = DensityUtil.dip2px(mContext, 120);
 }

 // 獲取高
 if (myHeightSpecMode == MeasureSpec.EXACTLY) {
  // match_parent/精確值
  mHeight = myHeightSpecSize;
 } else {
  // wrap_content
  mHeight = DensityUtil.dip2px(mContext, 120);
 }
 // 設(shè)置該view的寬高
 setMeasuredDimension(mWidth, mHeight);
 }

MeasureSpec的狀態(tài)分為三種EXACTLY、AT_MOST、UNSPECIFIED，這里只要單獨(dú)指定非精確值EXACTLY之外的情況就好了

本文中使用到的DensityUtil類，是為了將dp轉(zhuǎn)換為px來使用，以便適配不同的屏幕顯示效果

 public static int dip2px(Context context, float dpValue) {
 final float scale = context.getResources().getDisplayMetrics().density;
 return (int) (dpValue * scale + 0.5f);
 }

重寫onDraw

設(shè)計(jì)的整體思路如下圖所示

先要實(shí)現(xiàn)圓形向外擴(kuò)散的效果

• 初始化第一個(gè)圓

這里的動(dòng)畫效果本來是想使用ValueAnimator屬性動(dòng)畫的數(shù)值發(fā)生器來實(shí)現(xiàn)，但是我們這里有很多的計(jì)算需求，所以最后還是選擇使用算法來實(shí)現(xiàn)，方便控制圓的一些參數(shù)

想要實(shí)現(xiàn)擴(kuò)散的效果，這里思路是在每次更新View時(shí)動(dòng)態(tài)改變圓的半徑，同時(shí)還需要給圓設(shè)置漸變度數(shù)，所以決定用一個(gè)類來保存圓的狀態(tài)，所有圓都存在一個(gè)List里

// 添加第一個(gè)圓圈
mRipples = new ArrayList<>();
Circle c = new Circle(0, 255);
mRipples.add(c);

傳入Circle類里的兩個(gè)參數(shù)，第一個(gè)0表示圓的初始寬度，第二個(gè)255表示初始透明度

• 添加新圓

要想實(shí)現(xiàn)不斷有圓向外擴(kuò)散，就需要在第一個(gè)圓擴(kuò)散到一定范圍時(shí)在圓心處再添加一個(gè)圓，這個(gè)的范圍可以由圓的半徑來控制，當(dāng)List集合中最后一個(gè)圓的半徑增加到某個(gè)值mDensity時(shí)，新的圓就從圓心處創(chuàng)建出來

// 添加圓
if (mRipples.size() > 0) {
 // 控制第二個(gè)圓出來的間距
 if (mRipples.get(mRipples.size() - 1).width > DensityUtil.dip2px(mContext, mDensity)) {
 mRipples.add(new Circle(0, 255));
 }
}

• 刪除List中多余的圓

List中的圓存儲(chǔ)的數(shù)量不宜過多，多了內(nèi)存消耗大，需要在當(dāng)圓的半徑超過View的寬度時(shí)就刪掉這個(gè)圓

// 當(dāng)圓超出View的寬度后刪除
if (c.width > mWidth / 2) {
 mRipples.remove(i);
}

我們也可以在外切正方形的頂點(diǎn)處刪除這個(gè)圓，需要用到勾股定律來計(jì)算擴(kuò)散圓到外切正方形頂點(diǎn)的位置

如上圖所示，得出計(jì)算公式為

// 使用勾股定律求得一個(gè)外切正方形中心點(diǎn)離頂點(diǎn)的距離
sqrtNumber = (int) (Math.sqrt(mWidth * mWidth + mHeight * mHeight) / 2);

這樣就需要修改刪除圓的位置了

if (c.width > sprtNumber) {
 mRipples.remove(i);
}

• 控制擴(kuò)散圓的漸變度

當(dāng)圓在向View的邊緣擴(kuò)散時(shí)，漸變度數(shù)的改變需要?jiǎng)討B(tài)來計(jì)算，漸變的計(jì)算算法要適配不同的圓寬度大小，我們知道透明度是0~255之間的，0表示完全透明，255表示百分百不透明，計(jì)算的時(shí)候就是需要將這個(gè)數(shù)值等份分配到圓的寬度里

這里要區(qū)分一點(diǎn)，對于圓來說，寬度是由圓心從0開始向外遞增，而漸變度數(shù)則是由圓心從255開始向外遞減，當(dāng)圓與最外圍的正方形內(nèi)切時(shí)漸變度必須變?yōu)?，由此分析得知，公式如下

透明度 = 255 - 圓的寬度 * （255 / View寬度）

double alpha = 255 - c.width * (255 / ((double) mWidth / 2));
c.alpha = (int) alpha;

GitHub地址

https://github.com/zhuwentao2150/RippleView

總結(jié)

關(guān)于自定義View的總結(jié)部分在我的其它博客中已經(jīng)寫過蠻多了，有興趣的可以去看看

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評(píng)論