移动小球和彩色波纹

来源：互联网发布：vue.js基础教程编辑：程序博客网时间：2024/06/05 00:22

移动小球

1.Value

加attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyCircle">
        <attr name="radius" format="integer"/>
        <attr name="mycolor" format="reference|color"/>
    </declare-styleable>
</resources>

2自定义View

package com.ch.myviews;

import com.ch.myviewattr.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class MyCircle extends View {
   private Paint paint;
   private int radius;

   private float currentx = 50;
   private float currenty = 50;
//   private final static String NAMESPACE = "aaa1407a";
   public MyCircle(Context context, AttributeSet attrs) {
       super(context, attrs);
       // TODO Auto-generated constructor stub
       //获得自定义的属性，即获得自定义的半径
       TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyCircle);
       radius = ta.getInt(R.styleable.MyCircle_radius, 0);
       ta.recycle();

//       radius = attrs.getAttributeIntValue(NAMESPACE, "radius", 0);
   }
   //绘制的方法
   @Override
   protected void onDraw(Canvas canvas) {
       // TODO Auto-generated method stub
       paint = new Paint();
       paint.setColor(Color.RED);

//       canvas.drawColor(Color.BLUE);
//       canvas.drawCircle(getWidth()/2, getHeight()/2, radius, paint);
       Log.d("TAG","onDraw............."+getWidth()/2+","+getHeight()/2);
       Log.d("TAG","onDraw.....Measured........"+getMeasuredWidth()/2+","+getMeasuredHeight()/2);
       //配合拖拽移动
       canvas.drawCircle(currentx, currenty, radius, paint);

       super.onDraw(canvas);
   }


   @Override
   public boolean onTouchEvent(MotionEvent event) {
       // TODO Auto-generated method stub
       Log.d("TAG", "圆被拖动了....");
       currentx = event.getX();
       currenty = event.getY();
       invalidate();//重新绘制此view
       return true;
   }
//   @Override
//   public void layout(int l, int t, int r, int b) {
//       // TODO Auto-generated method stub
//       super.layout(10, 10, 500, 700);
//   }

}

3布局

彩色波纹

如图

自定义View

代码

package com.itheima.ring;

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.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
* 水波纹效果
* @author leo
*
*/
public class MyRingWave extends View{

   /**
   * 二个相临波浪中心点的最小距离
   */
   private static final int DIS_SOLP = 13;

   protected boolean isRunning = false;

   private ArrayList<Wave> wList;

   public MyRingWave(Context context, AttributeSet attrs) {
       super(context, attrs);
       wList = new ArrayList<MyRingWave.Wave>();
   }

   private Handler handler = new Handler(){
       public void handleMessage(android.os.Message msg) {

           //刷新数据
           flushData();
           //刷新页面
           invalidate();
           //循环动画
           if (isRunning) {
               handler.sendEmptyMessageDelayed(0, 50);
           }

       };
   };

   @Override
   protected void onDraw(Canvas canvas) {
       for (int i = 0; i < wList.size(); i++) {
           Wave wave = wList.get(i);
           canvas.drawCircle(wave.cx, wave.cy, wave.r, wave.p);
       }
   }

   @Override
   public boolean onTouchEvent(MotionEvent event) {
       super.onTouchEvent(event);

       switch (event.getAction()) {
       case MotionEvent.ACTION_DOWN:
       case MotionEvent.ACTION_MOVE:

           int x = (int) event.getX();
           int y = (int) event.getY();

           addPoint(x,y);

           break;

       default:
           break;
       }

       return true;

   }

   /**
   * 添加新的波浪中心点
   * @param x
   * @param y
   */
   private void addPoint(int x, int y) {
       if(wList.size() == 0){
           addPoint2List(x,y);
           /*
           * 第一次启动动画
           */
           isRunning = true;
           handler.sendEmptyMessage(0);
       }else{
           Wave w = wList.get(wList.size()-1);

           if(Math.abs(w.cx - x)>DIS_SOLP || Math.abs(w.cy-y)>DIS_SOLP){
               addPoint2List(x,y);
           }

       };

   }

   /**
   * 添加新的波浪
   * @param x
   * @param y
   */
   private void addPoint2List(int x, int y) {
       Wave w = new Wave();
       w.cx = x;
       w.cy=y;
       Paint pa=new Paint();
       pa.setColor(colors[(int)(Math.random()*4)]);
       pa.setAntiAlias(true);
       pa.setStyle(Style.STROKE);

       w.p = pa;

       wList.add(w);
   }

   private int [] colors = new int[]{Color.BLUE,Color.RED,Color.YELLOW,Color.GREEN};
   /**
   * 刷新数据
   */
   private void flushData() {

       for (int i = 0; i < wList.size(); i++) {

           Wave w = wList.get(i);

           //如果透明度为 0 从集合中删除
           int alpha = w.p.getAlpha();
           if(alpha == 0){
               wList.remove(i);   //删除i 以后，i的值应该再减1 否则会漏掉一个对象，不过，在此处影响不大，效果上看不出来。
               continue;
           }

           alpha-=5;
           if(alpha<5){
               alpha =0;
           }
           //降低透明度
           w.p.setAlpha(alpha);

           //扩大半径
           w.r = w.r+3;
           //设置半径厚度
           w.p.setStrokeWidth(w.r/3);
       }

       /*
       * 如果集合被清空，就停止刷新动画
       */
       if(wList.size() == 0){
           isRunning = false;
       }
   }

   /**
   * 定义一个波浪
   * @author leo
   */
   private class Wave {
       //圆心
       int cx;
       int cy;

       //画笔
       Paint p;
       //半径
       int r;
   }
}
布局

    <com.itheima.ring.MyRingSimple
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />

0 0