Android實現(xiàn)水波紋控件的方法
更新時間：2017年07月23日 10:44:32 作者：ZACH_ZHOU
這篇文章主要為大家詳細介紹了Android實現(xiàn)水波紋控件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
有很多app使用過水波紋的這樣的效果，看著很酷酷的樣子，所以自己就擼碼寫了一個。
實現(xiàn)思路：
利用貝塞爾曲線繪制圓?。ㄒ簿褪撬ǖ牟y）
通過動畫改變繪制的起始點使水波紋平移
首先，定義我們需要的自定義屬性。
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="waveStyleable"> <!-- 水波紋的長度--> <attr name="waveLength" format="float"></attr> <!-- 水波紋的高度--> <attr name="waveHeight" format="float"></attr> <!-- 水波紋的速度--> <attr name="waveSpeed" format="float"></attr> <!--水波紋上方的頭像 --> <attr name="waveTopIcon" format="reference"></attr> <!--水波的顏色 --> <attr name="waveColor" format="color"></attr> <!--水波距離底部的距離 --> <attr name="distanceY" format="float"></attr> </declare-styleable> </resources>
自定義view繪制水波紋控件
public class WaveView extends View {
private Paint paint;
private Path path;
private float waveLength ;
private float waveHeight ;
private float waveSpeed ;
private Bitmap bitmap;
private int waveColor ;
private int strokeWidth = 3;
private Region region;
private int width,height;
public int translateX ;
private float distanceY;
public WaveView(Context context) {
super(context);
}
public WaveView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.waveStyleable);
waveLength = array.getFloat(R.styleable.waveStyleable_waveLength,300);
waveColor = array.getColor(R.styleable.waveStyleable_waveColor,0x00ff00);
waveHeight = array.getFloat(R.styleable.waveStyleable_waveHeight,100);
waveSpeed = array.getFloat(R.styleable.waveStyleable_waveSpeed,5);
distanceY = array.getFloat(R.styleable.waveStyleable_distanceY,100);
Drawable waveTopICon = array.getDrawable(R.styleable.waveStyleable_waveTopIcon);
array.recycle();
bitmap = drawableToBitmap(waveTopICon);
initPaint();
startAnimal();
}
private void initPaint() {
paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(waveColor);
paint.setStrokeWidth(strokeWidth);
//繪制貝塞爾曲線的path
path = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//繪制貝塞爾曲線
drawPath(canvas,path);
//繪制wave上部的頭像
drawIcon(canvas);
}
private void drawIcon(Canvas canvas) {
float baseLine = height-distanceY;
if(region.getBounds().top==baseLine){
canvas.drawBitmap(bitmap,width/2-bitmap.getWidth()/2,region.getBounds().bottom-bitmap.getHeight(),paint);
}else {
if(region.getBounds().top==0){
canvas.drawBitmap(bitmap,width/2-bitmap.getWidth()/2,height-bitmap.getHeight()-distanceY,paint);
}
canvas.drawBitmap(bitmap,width/2-bitmap.getWidth()/2,region.getBounds().top-bitmap.getHeight(),paint);
}
}
private void drawPath(Canvas canvas, Path path) {
path.reset();
//path的起始點，向手機外多繪制一段
path.moveTo(-2* waveLength +translateX,getHeight()-distanceY);
for(int i = 0; i<getWidth()+ waveLength; i+= waveLength){
path.rQuadTo(waveLength /2,-waveHeight, waveLength,0);
path.rQuadTo(waveLength /2,waveHeight, waveLength,0);
}
region = new Region();
Region clip = new Region();
clip.set((int) (getWidth()/2-0.1),0,getWidth()/2,getHeight()*2);
region.setPath(path,clip);
path.lineTo(getWidth(),getHeight());
path.lineTo(-waveLength,getHeight());
path.close();
canvas.drawPath(path,paint);
}
public void startAnimal(){
ValueAnimator animator = ValueAnimator.ofFloat(0,1);
animator.setDuration(3000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
translateX += waveSpeed;
if(-2* waveLength +translateX >= 0){
translateX = 0;
}
postInvalidate();
}
});
animator.start();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//獲取寬高模式
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
width = MeasureSpec.getSize(widthMeasureSpec);
height = MeasureSpec.getSize(heightMeasureSpec);
if (widthMode == MeasureSpec.AT_MOST){
width = (int) waveLength;
}
if(heightMode == MeasureSpec.AT_MOST){
height = (int) (waveHeight+ distanceY+bitmap.getHeight());
}
setMeasuredDimension(width,height);
}
/**
* dp轉(zhuǎn)化為px
* @param dpValue
* @param context
* @return
*/
public float dp2px(float dpValue,Context context){
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpValue,context.getResources().getDisplayMetrics());
}
/**
* 如果圖片底部有很多空白會導致圖片不能貼到波紋底部
* @param bitmap
* @return
*/
public Bitmap makeRoundCorner(Bitmap bitmap)
{
int width = bitmap.getWidth();
int height = bitmap.getHeight();
int left = 0, top = 0, right = width, bottom = height;
float roundPx = height/2;
if (width > height) {
left = (width - height)/2;
top = 0;
right = left + height;
bottom = height;
} else if (height > width) {
left = 0;
top = (height - width)/2;
right = width;
bottom = top + width;
roundPx = width/2;
}
Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
int color = 0xff424242;
Paint paint = new Paint();
Rect rect = new Rect(left, top, right, bottom);
RectF rectF = new RectF(rect);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
public Bitmap drawableToBitmap(Drawable drawable) {
Bitmap bitmap = Bitmap.createBitmap(
drawable.getIntrinsicWidth(),
drawable.getIntrinsicHeight(),
drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
: Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
drawable.draw(canvas);
return makeRoundCorner(bitmap);
}
}
相關(guān)類：
Path： 可以繪制二次曲線或者三次曲線到畫布上，moveTo()方法將path移動到手機屏幕的（-2* waveLength，distanceY）這個點，然后以這個點為起始點繪制二次曲線曲線，rQuadTo（），以最后點為相對位置點進行取點繪制。在屬性動畫里面，不斷改變起始點的位置，這樣繪制的水波紋就會平移。
Region：表示區(qū)域的類，通過set(path,rect)可以獲取到矩形區(qū)域與path弧線相交的新的矩形。如果rect的寬度無限小，那么獲取的矩形區(qū)域會近似為一個點，這個點就是圖片移動的y坐標。
xml文件使用：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.iwintrue.waveapplication.MainActivity"> <com.iwintrue.waveapplication.WaveView xmlns:app="http://schemas.android.com/apk/res-auto" app:waveLength = "200" app:waveHeight = "50" app:waveSpeed = "10" app:waveColor = "#0ff" app:distanceY = "100" app:waveTopIcon = "@mipmap/icon" android:layout_centerInParent="true" android:id="@+id/waterView" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#f00" /> </RelativeLayout>
核心代碼就是這么多，代碼中也有解釋，關(guān)鍵的類也做了注解了。要是還有那里有疑問，多多交流哈
github地址：https://github.com/zhoukai1526/WaveApplication
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android中使用BitmapShader類來制作各種圖片的圓角
這篇文章主要介紹了Android中使用BitmapShader類來制作各種圖片的圓角的方法,文中隨教程講解帶出的例子可以輕松控制圖片圓形的變換,很好很強大,需要的朋友可以參考下2016-04-04
Android自帶的組件比較丑陋（個人感覺），自己寫組件比較復(fù)雜，而且必須熟悉android應(yīng)用層開發(fā)的一些機制，如繪制、回調(diào)，所以非迫不得已的情況下還是不要自己寫組件，因為怕考慮不周全導致譬如性能或異常方面的問題，你自己寫也會耗費不少時間2013-02-02
Flux是Facebook在14年提出的一種Web前端架構(gòu)，主要用來處理復(fù)雜的UI邏輯的一致性問題（當時是為了解決Web頁面的消息通知問題）。接下來從其特點和使用上來介紹Flux架構(gòu)。本文主要目的是讓你對Flux的一個架構(gòu)大體面貌有個了解。2016-08-08
本篇文章主要介紹了Android中js和原生交互的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了自定義滑動按鈕的例子，圖文剖析Android自定義View繪制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
最近接了個項目，其中有項目需求是這樣的，有這么個需求，就是一個產(chǎn)品下有兩個價格，一個是市場價，一個是銷售價，這時要把市場價添加個刪除線；怎么實現(xiàn)呢？下面小編給大家分享一段簡單的代碼實現(xiàn)Android 添加TextView刪除線2016-02-02
這篇文章主要為大家詳細介紹了android利用handler實現(xiàn)打地鼠游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本文給大家分享的是，在安卓APP開發(fā)的過程中，經(jīng)常會需要調(diào)用手機自身攝像頭拍照的代碼，十分的簡單實用，有需要的小伙伴可以參考下。2015-07-07
Android解決dialog彈出時無法捕捉Activity的back事件的方法
這篇文章主要介紹了Android解決dialog彈出時無法捕捉Activity的back事件的方法,涉及Android操作Activity事件的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了Android 自定義陰影效果詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-02-02