扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下Android如何实现水波纹控件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
10年积累的成都网站建设、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有渌口免费网站建设让你可以放心的选择与我们合作。
有很多app使用过水波纹的这样的效果,看着很酷酷的样子,所以自己就撸码写了一个。
实现思路:
利用贝塞尔曲线绘制圆弧(也就是水波的波纹)
通过动画改变绘制的起始点使水波纹平移
首先,定义我们需要的自定义属性。
自定义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= 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转化为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); } }
相关类:
Path: 可以绘制二次曲线或者三次曲线到画布上,moveTo()方法将path移动到手机屏幕的(-2* waveLength,distanceY)这个点,然后以这个点为起始点绘制二次曲线曲线,rQuadTo(),以最后点为相对位置点进行取点绘制。在属性动画里面,不断改变起始点的位置,这样绘制的水波纹就会平移。
Region:表示区域的类,通过set(path,rect)可以获取到矩形区域与path弧线相交的新的矩形。如果rect的宽度无限小,那么获取的矩形区域会近似为一个点,这个点就是图片移动的y坐标。
xml文件使用:
以上是“Android如何实现水波纹控件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流