android开发控件水波纹,Android实现水波纹控件的方法
有很多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
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转化为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文件使用:
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">
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"
/>
核心代码就是这么多,代码中也有解释,关键的类也做了注解了。要是还有那里有疑问,多多交流哈
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android开发控件水波纹,Android实现水波纹控件的方法相关推荐
- Android开发详解:第4章《UI 控件》
Android开发详解:第4章<UI 控件> 控件是Android程序设计的基本组成单位,通过使用控件可以高效地开发Android应用程序.所以熟练掌握控件的使用是合理.有效地进行Andr ...
- Android开发— 2016_最流行的Android组件、工具、框架大全(二)
2019独角兽企业重金招聘Python工程师标准>>> 泡在网上的日子 首页 代码 话题 问答 标签 关于 登录注册 首页 › 安卓开发 › android开发 Android开发- ...
- Android 开发艺术探索——第十章 Android的消息机制
Android 开发艺术探索--第十章 Android的消息机制读书笔记 Handler并不是专门用于更新UI的,只是常被用来更新UI 概述 Android的消息机制主要值得就是Handler的运行机 ...
- Android开发经验谈-很少有人会告诉你的Android开发基本常识,经验谈android
转载:http://www.android100.org/html/201507/15/165084.html Android开发经验谈-很少有人会告诉你的Android开发基本常识,经验谈andro ...
- android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法
本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法.分享给大家供大家参考,具体如下: 其实原理很简单,用到的是selector,用来设置android:background和an ...
- Android开发-AMD平台如何使用Android studio自带模拟器
Android开发-AMD平台如何使用Android studio自带模拟器 前言 AMD开启虚拟化VT win10专业版开启 win10家庭版开启 创建Android模拟器 前言 现在Android ...
- Android开发入门与实战之Android应用安装卸载
当一个Android开发者完整的开发完毕一个程序应用软件结束后要进行软件测试,这就是软件测试员的来历,那么在这之前,要进行Android开发应用的安装与卸载. Android开发入门与实战之Andro ...
- Android开发笔记(三十六)展示类控件
View/ViewGroup View是单个视图,所有的控件类都是从它派生出来:而ViewGroup是个视图组织,所有的布局视图类都是从它派生出来.由于View和ViewGroup是基类,因此很少会直 ...
- android 车载app怎么开发,Android开发智能车载App(1)---android控件及属性介绍
1.展示文本控件 TextView 属性名称 描述 android:text 设置显示文本. android:textSize 设置文字大小,推荐度量单位"sp",如"1 ...
- 为什么Android项目mainactivity中有一个变量R_【Android开发入门教程】二.Android应用程序结构分析!...
一.新建HelloWorld项目: 1.打开Eclipse,点击"File"->"New"->"Project"-Android ...
最新文章
- cherry-pick,revert和rebase使用的3-way合并策略
- 人工智能应用实战系列-如何在新闻推荐中使用迁移学习
- Vscode解决Setting.json报警告:Problems loading reference ... Unable to load schema from ...
- 移动互联网高级开发学习笔记
- 【JAVA编码专题】 JAVA字符编码系列三:Java应用中的编码问题
- 《千只鹤》:面对爱,我们永远还行走在成长的路上 ...
- LeetCode 522. 最长特殊序列 II
- STM32H743+CubeMX-串口非空闲中断接收
- otl_stream查询返回数据_Hive查询的18种方式,你都学会了吗?
- 弹窗实用素材模板|UI设计中的弹窗设计技巧,快get
- 高级灰rgb数值_插画的高级感,从何而来?
- (转载)图文推荐给开发人员非常实用的站点
- Win8 MSDN 简中/繁中/英文正式版下载(微软官方原版)
- js获取当前页面高度
- 怎么自学编程python_怎样自学Python编程?
- 2021-2027全球与中国高导热陶瓷绝缘基板市场现状及未来发展趋势
- 3D打印机将用于太空食物 未来或可打印披萨
- JS中的对象和方法简单剖析
- C语言 3习题6 请编程序将China译成密码,密码规律是:用原来的字母后面第4个字母代替原来的字母。 3习题7 设圆半径r=1.5
- NH2-PEG-MAL 氨基PEG马来酰亚胺
热门文章
- css隐藏状态,CSS元素隐藏和显示
- 「ImageProcess」mp4视频转存图片内存变大的原因探究
- CORS 跨域 实现思路及相关解决方案(转:http://www.cnblogs.com/sloong/p/cors.html)
- C++中的数组array和vector,lambda表达式,C字符串加操作,C++中新类型数组(数组缓存),多元数组,new缓冲
- Mysql 死锁过程及案例详解之元数据锁MetaData Lock
- pytorch常用函数API简析与汇总——以备查询
- SegNet网络简析及caffe工程应用
- Linux驱动编程 step-by-step (五)主要的文件操作方法实现
- 记一个鼠标略过时候的css动画
- 《机器学习与R语言(原书第2版)》一2.3 探索和理解数据