[自定义SurfaceView] 气泡效果

最新推荐文章于 2023-03-29 14:39:17 发布
最新推荐文章于 2023-03-29 14:39:17 发布
阅读量184 收藏
点赞数
分类专栏： 安卓 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40805025/article/details/125094990
版权

这次的自定义view的要求效果为：能随机生成气泡 气泡会匀速上浮 保持屏幕始终存在n个气泡；

(一)随机生成气泡

首先要绘制一个气泡需要以下几个参数： float x, y; 气泡坐标 int radius 气泡半径 int color 气泡颜色 int speed 气泡移动速度 为了方便绘制这里建议把这几个参数分装起来成为一个气泡对象。

//定义buble 对象
public class Bubble{
//颜色
public int color;
//位置
public float point_y;
public float point_x;
//移动速度
public float speed;
//半径
public int radius;
public Bubble(){}
}

现在要做到随机生成气泡的color，x轴位置 ，移动速度，半径。y轴位置固定为view的最底部。

这里写一个Bubble_create(int width)方法 传入当前view的宽度。

private   Bubble Bubble_create(int witdh){
        Bubble bubble = new Bubble();
        Random rand = new Random();
        switch (rand.nextInt(10)){
            case 0:
                bubble.color = Color.BLUE;
                break;
            case 1:
                bubble.color = Color.BLACK;
                break;
            case 2:
                bubble.color = Color.CYAN;
                break;
            case 3:
                bubble.color = Color.DKGRAY;
                break;
            case 4:
                bubble.color = Color.GRAY;
                break;
            case 5:
                bubble.color = Color.GREEN;
                break;
            case 6:
                bubble.color = Color.YELLOW;
                break;
            case 7:
                bubble.color = Color.LTGRAY;
                break;
            case 8:
                bubble.color = Color.MAGENTA;
                break;
            case 9:
                bubble.color = Color.RED;
                break;

            default:
                bubble.color = Color.BLUE;
                break;
        }
        bubble.radius = rand.nextInt(70)+10;
        bubble.point_x = rand.nextInt(witdh);
        bubble.point_y = getHeight();
        bubble.speed = rand.nextInt(10)+1;
        return bubble;
    }
//调用方法
Bubble mbuble = Bubble_create(getWidth());

(二)气泡匀速上升

重点！重点！这里开始自定义surfaceView. 先搭自定义surfaceView的框架

第一步： 继承suerfaceview 实现它的几个构造函数。 第二步： implements SurfaceHolder.Callback与 Runnable的接口

 

//surfaceview 框架
public class BubbleView extends SurfaceView implements SurfaceHolder.Callback,Runnable {
    //surfaceHolders 这个很重要用来锁定canvas和解锁canvas
    private SurfaceHolder mSurfaceHolder;
    //程序运行标志 用来控制是否继续绘制view
    private  boolean running;
    // 画布
    private Canvas mCanvas;


    public BubbleView(Context context) {
        super(context);
        init();
    }

    public BubbleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public BubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
  //将初始化操作放到这里
    protected void init(){
        mSurfaceHolder =  getHolder();
        mSurfaceHolder.addCallback(this);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

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

    @Override
    public void surfaceCreated(@NonNull SurfaceHolder holder) {
        running = true;
        new Thread(this).start();
    }

    @Override
    public void surfaceChanged(@NonNull SurfaceHolder holder, int format, int width, int height) {
//        running = false;
    }

    @Override
    public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
        running = false;
    }

    @Override
    public void run() {
        //运行线程 循环绘制
        while(running){
            draw();
        }
        try {
            //等60毫秒绘制一次
            Thread.sleep(60);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
  //这里执行绘制方法
    public void draw(){
        try {
        mCanvas = mSurfaceHolder.lockCanvas();
      //这里很重要 每次绘制的时候绘制一个白色背景来作为刷新界面的方式
      //因为surfaceview 不会清除上次绘制的图形
        mCanvas.drawColor(Color.WHITE);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (mCanvas != null){
                mSurfaceHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }
}

第三步：实现气泡上升。

//定义
 private List<Bubble> bubbles;
 private Paint bubbles_paint;
//初始化
 bubbles = new ArrayList<>();
 bubbles_paint = new Paint();
 bubbles_paint.setStyle(Paint.Style.FILL);
//下面一部分要放到绘制里面
//这里是遍历气泡list里的所有气泡并且绘制出来
 for (Bubble temp_bubble:bubbles) {
  //这里一段是实现气泡的颜色渐变
  RadialGradient radialGradient =new RadialGradient(temp_bubble.point_x,temp_bubble.point_y,temp_bubble.radius, new int[]{Color.WHITE, 0xFFf1f2f2, temp_bubble.color },null, Shader.TileMode.CLAMP);
  bubbles_paint.setShader(radialGradient);
//这里绘制气泡圆形
  mCanvas.drawCircle(temp_bubble.point_x,temp_bubble.point_y,temp_bubble.radius,bubbles_paint);
//绘制完后把气泡的y轴坐标往上挪speed的距离
  temp_bubble.point_y -= temp_bubble.speed;
        }

(三)保持屏幕始终存在n个气泡:

1.在每次绘制的时候判断气泡list的数量是否少于n个少于n个的话就创建。 2.当气泡飞出屏幕外的时候要把它从列表中移除掉。

 

 //1.在每次绘制的时候判断气泡list的数量是否少于n个少于n个的话就创建。
   while(bubbles.size()<=10){
            Log.d(this.toString(),bubbles.size()+"");
            bubbles.add(Bubble_create(getWidth()));
        }
     
      ····
      这里绘制气泡 
      ····
   // 2.当气泡飞出屏幕外的时候要把它从列表中移除掉。
  //这里是创建一个temp气泡列表 把还在屏幕里的气泡塞到这个列表中，最后替换掉之前的气泡列表。
   List<Bubble> temp_bubbles = new ArrayList<>();
    for(Bubble temp_bubble:bubbles){
            if((int)temp_bubble.point_y+temp_bubble.radius>=0){
                temp_bubbles.add(temp_bubble);
            }
     }
     bubbles = temp_bubbles;
所有需求都实现后把它们整合到自定义view里面 最后的源码：

public class BubbleView extends SurfaceView implements SurfaceHolder.Callback,Runnable {


    private SurfaceHolder mSurfaceHolder;
    private  boolean running;
    // 画布
    private Canvas mCanvas;

    //气泡列队
    private List<Bubble> bubbles;
    private Paint bubbles_paint;


    public BubbleView(Context context) {
        super(context);
        init();
    }

    public BubbleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public BubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    protected void init(){
        mSurfaceHolder =  getHolder();
        mSurfaceHolder.addCallback(this);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);
        bubbles = new ArrayList<>();
        bubbles_paint = new Paint();
        bubbles_paint.setStyle(Paint.Style.FILL);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

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

    @Override
    public void surfaceCreated(@NonNull SurfaceHolder holder) {
        running = true;
        new Thread(this).start();
    }

    @Override
    public void surfaceChanged(@NonNull SurfaceHolder holder, int format, int width, int height) {
//        running = false;
    }

    @Override
    public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
        running = false;
    }

    @Override
    public void run() {
        while(running){
            draw();

        }
        try {
            Thread.sleep(60);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

    public void draw(){
        try {
        mCanvas = mSurfaceHolder.lockCanvas();
        mCanvas.drawColor(Color.WHITE);
        while(bubbles.size()<=10){
            Log.d(this.toString(),bubbles.size()+"");
            bubbles.add(Bubble_create(getWidth()));
        }
        for (Bubble temp_bubble:bubbles) {
            RadialGradient radialGradient =new RadialGradient(temp_bubble.point_x,temp_bubble.point_y,temp_bubble.radius, new int[]{Color.WHITE, 0xFFf1f2f2, temp_bubble.color },null, Shader.TileMode.CLAMP);
            bubbles_paint.setShader(radialGradient);
            mCanvas.drawCircle(temp_bubble.point_x,temp_bubble.point_y,temp_bubble.radius,bubbles_paint);
            temp_bubble.point_y -= temp_bubble.speed;
        }
        List<Bubble> temp_bubbles = new ArrayList<>();
        for(Bubble temp_bubble:bubbles){
            if((int)temp_bubble.point_y+temp_bubble.radius>=0){
                temp_bubbles.add(temp_bubble);
            }
        }
        bubbles = temp_bubbles;
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (mCanvas != null){
                mSurfaceHolder.unlockCanvasAndPost(mCanvas);
            }
        }


    }


    //定义buble 对象
    public class Bubble{
        //颜色
        public int color;
        //位置
        public float point_y;
        public float point_x;
        //移动速度
        public float speed;
        //半径
        public int radius;

        public Bubble(){

        }


    }

    private   Bubble Bubble_create(int witdh){
        Bubble bubble = new Bubble();
        Random rand = new Random();
        switch (rand.nextInt(10)){
            case 0:
                bubble.color = Color.BLUE;
                break;
            case 1:
                bubble.color = Color.BLACK;
                break;
            case 2:
                bubble.color = Color.CYAN;
                break;
            case 3:
                bubble.color = Color.DKGRAY;
                break;
            case 4:
                bubble.color = Color.GRAY;
                break;
            case 5:
                bubble.color = Color.GREEN;
                break;
            case 6:
                bubble.color = Color.YELLOW;
                break;
            case 7:
                bubble.color = Color.LTGRAY;
                break;
            case 8:
                bubble.color = Color.MAGENTA;
                break;
            case 9:
                bubble.color = Color.RED;
                break;

            default:
                bubble.color = Color.BLUE;
                break;
        }
        bubble.radius = rand.nextInt(70)+10;
        bubble.point_x = rand.nextInt(witdh);
        bubble.point_y = getHeight();
        bubble.speed = rand.nextInt(10)+1;

        return bubble;
    }
}

在layout布局中放入这个view就可以了。 

 

芹泽，
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 触摸屏幕产生小气泡的效果应用源码.zip
07-17
Android 触摸屏幕产生小气泡的效果应用源码
自定义surfaceVIew
07-13
自定义surfaceVIew，讲解在子线程中绘制的demo
Android 自定义surfaceview作为背景
manrao0624的博客
12-30 563
怎么才能将自定义的surfaceview作为背景放置到xml布局管理器中充当背景呢，或是还有其他的思路可以实现动画效果的背景实现。
气泡样式的自定义View
huidev的博客
05-04 298
自己学习自定义View 画了一个简单的自定义View ，做一下笔记。 public class BubbleView extends View { private Paint mPaint; private Path path; // 默认定义圆角为80 个像素点，后期可以考虑加到属性里 private int corner = 80; pub...
自定义SurfaceView通过Canvas、Path、Paint实现画板、画布
u013208026的博客
03-29 557
三个方法，一下是完整代码+注释。
【Android应用实例之三】跟随手指的小球——自定义SurfaceView应用
长弓的专栏
09-27 7142
转载请注明出处，原文网址：http://blog.csdn.net/m_changgong/article/details/6828096  作者：张燕广 实现的功能：手指在屏幕上滑动，变幻颜色的小球始终跟随手指移动。 实现的思路：1）自定义SurfaceView，在新线
android自定义View之气球碰撞效果
07-14
4、本次效果小球默认白色，通过alpha设置透明度，实际你们也可以通过随机颜色值达到五彩频繁的小球效果。 5、初始时给每个小球一个初始随机位置（不能超出屏幕）以及初始随机速度。 6、每个一段时间计算一下小球位置...
android撒花效果、类微信下落效果
04-22
2. **自定义View**：创建一个自定义的View类，继承自`View`或`SurfaceView`。在这个类中，你需要重写`onDraw()`方法来绘制每个花瓣，并在`onMeasure()`中设置视图的大小。 3. **粒子系统**：使用一个粒子系统来管理...
BubbleLiveWallPaper_java_
10-01
这款壁纸应用模仿了Windows操作系统中的气泡效果，为用户提供了生动有趣的手机屏幕背景体验。在Android平台上，开发者可以使用Java语言来创建丰富的自定义动态壁纸，为用户提供个性化的手机界面。 【描述】"仿...
Android SMS 短信内容显示在一个 泡泡 形状的窗口中.zip
最新发布
11-04
在Android中，我们可以继承View或SurfaceView类，重写onDraw()方法来绘制我们的自定义图形。在这个例子中，我们需要绘制出类似气泡的形状，可能包括一个带有箭头的圆形或椭圆形背景，以及在其中显示短信内容的文本...
自定义SurfaceView代码
06-04
SurfaceView的应用代码
Android自定义SurfaceView 拍照，删除+浏览+自动对焦
09-15
最近要搞一个项目要用到拍照功能，搞了许多项目都没有一个特别满意的，后来现在自己网上找了一个然后改进了一下，支持拍照录视频，而且连变焦都有，支持横批拍照，闪光灯功能，前后摄像头切换都有。
android自定义相机SurfaceView形式
02-04
android自定义相机SurfaceView形式，SurfaceView是一个功能强大的控件，它拥有独立的绘图表面（不与其宿主窗口共享同一个绘图表面）。由于其拥有独立的绘图表面，因此SurfaceView的UI就可以在一个独立的线程中进行绘制。又由于SurfaceView不会占用主线程资源，一方面可以实现复杂而高效的UI，另一方面又不会导致用户输入得不到及时响应
Android PopupWindow泡泡效果(有listview)
07-13
Android PopupWindow泡泡效果(有listview)
自定义surfaceview
u010015933的博客
06-14 327
自定义surfaceview： import android.content.Context; import android.content.Intent; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import
自定义SurfaceView
gushuwen0910的博客
05-17 672
四 自定义SurfaceView 为什么不直接用SurfaceView而是自定义？ 如果想实现触摸滑动事件，就必须自定义。 自定义SurfaceView需要继承SurfaceView，我们现在的需求是滑动触控。 罗列出这几种情况： 亮度手势，手指在SurfaceView左半部上下滑动时候调用 2.音量手势，手指在SurfaceView右半部上下滑动时候调用 3.快进快退手势，手指在SurfaceV...
Android应用:自定义SurfaceView
jasonhongcn的专栏
01-07 859
自定义View类，实现绘制一个随鼠标拖动的矩形。 1、创建一个MySurfaceView类 public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback, Runnable {     private Paint mPaint;     int widthPixels;     int heig...
简单实现自定义SurfaceView
10-22 1682
做自定义view时遇到的问题还有如何解决的: http://blog.csdn.net/suren__123/article/details/8065992 由于要实现联想存储器用于识别数字,所以想到做一个自定义的SurfaceView类用于输入输出 效果如下图所示,可以利用手写输入图像并转换为二位数组 也可以把二维数组的图像显示出来... 程序源代码如下: publi
SurfaceView
06-01
SurfaceView是Android中的一个视图控件，它可以在一个单独的线程中进行绘制操作，可以用来实现一些需要高性能绘制的场景，比如游戏开发、视频播放等。相比于普通的View控件，SurfaceView的优势在于它可以避免UI线程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值