自定义控件---继承View类方式(五彩绚烂的水波纹案例)

来源:互联网 发布:ipad mac 屏幕共享 编辑:程序博客网 时间:2024/04/29 21:49

---------------------------------------看效果(还有动画效果哦)----------------------------------------------------


activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <com.atguigu.myware.MyWave        android:layout_width="match_parent"        android:layout_height="match_parent" /></RelativeLayout>

MainActivity.java

package com.atguigu.myware;import android.os.Bundle;import android.app.Activity;import android.view.Menu;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}

MyWave.java

package com.atguigu.myware;import java.util.ArrayList;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.Style;import android.os.Handler;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/** * 水波纹效果 */public class MyWave extends View {/** * 定义一个水波浪类(一个圆环包括圆心、半径、画笔(需要绘制)) */private class Wave {// 圆心int pointX;int pointY;// 半径int radius;// 画笔Paint paint;}// 二个相临波浪中心点的最小距离private static final int DIS_SOLP = 13;// 是否有水波浪protected boolean isRunning = false;/** * 第一步构造器 */// 定义水波纹的集合private ArrayList<Wave> wList;public MyWave(Context context, AttributeSet attrs) {super(context, attrs);// 初始化创建水波纹集合wList = new ArrayList<MyWave.Wave>();}/** * touch事件 */@Overridepublic boolean onTouchEvent(MotionEvent event) {super.onTouchEvent(event);switch (event.getAction()) {//按下屏幕、滑动都可以产生水波case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:// 得到down、move的圆心int x = (int) event.getX();int y = (int) event.getY();// 如果水波纹集合为空,就绘制一个水波纹if (wList.size() == 0) {//绘制水波纹addPoint2List(x, y);// 修改状态,说明水波生成isRunning = true;//此刻发送一个消息,说明绘制了一个水波handler.sendEmptyMessage(0);} else {// 如果水波集合不为空,就去最后一个绘制的环形水波Wave w = wList.get(wList.size() - 1);if (Math.abs(w.pointX - x) > DIS_SOLP|| Math.abs(w.pointY - y) > DIS_SOLP) {addPoint2List(x, y);}};break;default:break;}return true;}/* * 定义4种色彩的水波 */private int[] colors = new int[] { Color.BLUE, Color.RED, Color.YELLOW,Color.GREEN };/** * 添加波浪 */private void addPoint2List(int x, int y) {//创建一个水波类Wave w = new Wave();//将滑动或者按下时候的坐标赋值给水波类w.pointX = x;w.pointY = y;//创建画笔Paint pa = new Paint();//画出水波(环形)设置颜色,抗锯齿,形状pa.setColor(colors[(int) (Math.random() * 4)]);pa.setAntiAlias(true);pa.setStyle(Style.STROKE);//赋值w.paint = pa;//往集合中添加一个环形水波wList.add(w);}/** * 绘制水波纹 */@Overrideprotected void onDraw(Canvas canvas) {for (int i = 0; i < wList.size(); i++) {Wave wave = wList.get(i);canvas.drawCircle(wave.pointX, wave.pointY, wave.radius, wave.paint);}}/* * 运用消息机制 */private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {//接受到发送过来的消息进行相应的操作// 刷新数据flushData();// 刷新页面invalidate();// 循环动画if (isRunning) {handler.sendEmptyMessageDelayed(0, 50);}};};/** * 刷新数据(操作环形水波的透明度以及半径变化) */private void flushData() {for (int i = 0; i < wList.size(); i++) {Wave w = wList.get(i);// 如果透明度为 0 从集合中删除int alpha = w.paint.getAlpha();if (alpha == 0) {wList.remove(i); continue;}//每次透明度值减5alpha -= 5;if (alpha < 5) {alpha = 0;}// 降低透明度w.paint.setAlpha(alpha);// 扩大半径w.radius = w.radius + 3;// 设置半径厚度w.paint.setStrokeWidth(w.radius / 3);}/* * 如果集合被清空,就停止刷新动画 */if (wList.size() == 0) {isRunning = false;}}}

---------------------------看一个简单的版本----------------------效果是逐渐变大,直到消失--------------------------------


activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <com.atguigu.myware.MyWave        android:layout_width="match_parent"        android:layout_height="match_parent" /></RelativeLayout>

MainActivity.java

package com.atguigu.myware;import android.os.Bundle;import android.app.Activity;import android.view.Menu;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}

MyWave.java

package com.atguigu.myware;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.Style;import android.os.Handler;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/** * 水波纹的效果的视图 *  */public class MyWave extends View {private Paint paint;@Overridepublic boolean onTouchEvent(MotionEvent event) {super.onTouchEvent(event);switch (event.getAction()) {/* * 当按下的时候开始绘制圆环水波纹 */case MotionEvent.ACTION_DOWN:// 1. 设置圆心startX = event.getX();startY = event.getY();// 2.根据圆心创建新的圆initView();// 3.绘制invalidate();break;default:break;}return true;}private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {// 1.透明度改变-小int alpha = paint.getAlpha();alpha -= 5;if (alpha < 0) {alpha = 0;}// 透明度:0~255之间paint.setAlpha(alpha);// 2.半径变大radius += 5;paint.setStrokeWidth(radius / 3);// 3.再次绘制一个,执行onDraw方法invalidate();};};/* * 第一步、构造器 */public MyWave(Context context, AttributeSet attrs) {super(context, attrs);initView();}/** * 初始化View */private int radius;// 半径private void initView() {paint = new Paint();// 设置颜色paint.setColor(Color.RED);// 设置抗锯齿paint.setAntiAlias(true);// 设置圆环样式paint.setStyle(Style.STROKE);// 半径为5radius = 5;paint.setStrokeWidth(radius / 3);}// 圆形坐标private float startX;private float startY;/** * 绘制环形水波纹 */@Overrideprotected void onDraw(Canvas canvas) {if (paint.getAlpha() > 0) {if (startX > 0 && startY > 0) {// 绘制一个圆环canvas.drawCircle(startX, startY, radius, paint);// 绘制的同时,发送一个延迟消息handler.sendEmptyMessageDelayed(0, 50);}}}}



0 0
原创粉丝点击