气泡随机分布界面的实现

最新推荐文章于 2023-02-16 10:49:35 发布
最新推荐文章于 2023-02-16 10:49:35 发布
阅读量4.5k 收藏 7
点赞数 6
分类专栏： 移动开发 文章标签： 界面 android 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amurocrash/article/details/45369843
版权

        废话不多说，最近需求要实现一个这样的界面，如下图：


        整体界面要求为气泡大致位置在屏幕某个区域，总数固定为8个，但圆心本身位置在该区域内随机，气泡半径，背景色也随机。然后界面展示时有一个漂浮出来的动画效果，气泡之间可以有遮挡但不可以挡住字，点击换一批的时候，重复以上所述动画效果，所有随机值刷新。

        先做一个圆形的带阴影的ImageView：代码如下

package com.amuro.ballonlayout;

import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.Animator.AnimatorListener;
import com.nineoldandroids.animation.AnimatorSet;
import com.nineoldandroids.animation.ObjectAnimator;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.RelativeLayout.LayoutParams;

public class BallonImageView extends ImageView
{
	private static final int SHADOW_RATIO = 14;
	
	private Paint paintBkg;
	private Paint paintText;
	
	public BallonImageView(Context context)
	{
		this(context, null);
	}
	
	public BallonImageView(Context context, AttributeSet attrs)
	{
		this(context, attrs, 0);
	}

	public BallonImageView(Context context, AttributeSet attrs, int defStyleAttr)
	{
		super(context, attrs, defStyleAttr);
		init();
	}
	
	private void init()
	{
		paintBkg = new Paint();
		paintText = new Paint();
		
		
        paintBkg.setStyle(Paint.Style.FILL);  
        paintBkg.setAntiAlias(true);
        
        paintText.setColor(Color.WHITE);
        paintText.setStyle(Paint.Style.STROKE);
        paintText.setAntiAlias(true);
	}

	@Override
	protected void onDraw(Canvas canvas)
	{
		super.onDraw(canvas);
		
		drawShadow(canvas);
		drawCircleBkg(canvas);
		drawText(canvas);
	}
	
	private void drawShadow(Canvas canvas)
	{
		int viewWidth = getWidth();
		int offsetX = viewWidth / SHADOW_RATIO;
		
		int cx = (viewWidth + offsetX) / 2;
		int cy = cx;
		int radius = (viewWidth - offsetX) / 2;
		
		paintBkg.setColor(Color.parseColor("#E1E1E1"));
		
        canvas.drawCircle(cx, cy, radius, paintBkg);
	}
	
	private void drawCircleBkg(Canvas canvas)
	{
		int viewWidth = getWidth();
		int offsetX = viewWidth / SHADOW_RATIO;

		
		int cx = (viewWidth - offsetX) / 2;
		int cy = cx;
		int radius = cx;
		
		paintBkg.setColor(bkgColor);
        canvas.drawCircle(cx, cy, radius, paintBkg);
		
	}

	private void drawText(Canvas canvas)
	{
		int viewWidth = getWidth();
		int offsetX = viewWidth / SHADOW_RATIO;

		int cx = (viewWidth - offsetX) / 2;
		int cy = cx;
	
		int textSize = getWidth() / 5;
		
		paintText.setTextSize(textSize);
		float textWidth = paintText.measureText(text);
		
		FontMetrics fm = paintText.getFontMetrics();
		int textHeight = (int) Math.ceil(fm.descent - fm.top) + 2;
		
		canvas.drawText(text, cx - (textWidth / 2), cy + (textHeight / 4), paintText);
		
	}

	private String text = "测试测试";
	private int bkgColor = Color.BLACK;
	
	public void setBkgColorAndText(int bkgColor, String text)
	{
		this.bkgColor = bkgColor;
		this.text = text;
		invalidate();
	}
	
	public void setRadius(int radius)
	{
		int diameter = radius * 2;
		LayoutParams params = new LayoutParams(diameter, diameter);
		setLayoutParams(params);
	}
	
	public void floatToPosition(int startX, int startY, int toX, int toY, int duration)
	{
	    AnimatorSet set = new AnimatorSet();
	    set.playTogether(
	    		ObjectAnimator.ofFloat(this, "translationX", startX, toX).setDuration(duration),
	    		ObjectAnimator.ofFloat(this, "translationY", startY, toY).setDuration(duration),
	    		ObjectAnimator.ofFloat(this, "scaleX", 0f, 1f),
	    		ObjectAnimator.ofFloat(this, "scaleY", 0f, 1f));
	    set.setDuration(duration).start();
	    set.addListener(new AnimatorListener()
		{
			
			@Override
			public void onAnimationStart(Animator arg0)
			{
				setEnabled(false);
			}
			
			@Override
			public void onAnimationRepeat(Animator arg0)
			{
				
			}
			
			@Override
			public void onAnimationEnd(Animator arg0)
			{
				setEnabled(true);
			}
			
			@Override
			public void onAnimationCancel(Animator arg0)
			{
				
			}
		});
	}

}


         BallonImageView主要做三件事 画气泡，画阴影，画字，画好之后还对外提供一个漂浮的动画的函数，本来这个函数我写在Activity里让Activity自己控制的，后来想想根据

单一职责，气泡自己的浮动效果是它自己逻辑，所以应该是它自己对外暴露方法，否则其他Activity需要这个动画效果的时候，就会产生重复代码了。

        下面设置一个BallonLayout来放置这些气泡，逻辑比较复杂，大家自己看代码吧，写得好蛋疼……

package com.amuro.ballonlayout;

import java.util.Random;

import com.amuro.balloonlayout.R;
import com.amuro.utils.DisplayUtils;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;

public class BallonLayout extends FrameLayout
{
	private static final int BALLON_COUNT = 8;
	private static final String[] ballonColors = {
		"#f29b76", "#84ccc9", "#f8b551", "#88abda", "#89c997", "#eb6877", "#f39800", "#aa89bd"
	};
	
	/***********监听器相关***************/
	private OnBallonClickListener onBallonClickListener;
	
	public interface OnBallonClickListener
	{
		public void onBallonClick(int id);
	}
	
	public void setOnBallonClickListener(OnBallonClickListener onBallonClickListener)
	{
		this.onBallonClickListener = onBallonClickListener;
	}
	
	private void notifyListener(int id)
	{
		if(this.onBallonClickListener != null)
		{
			this.onBallonClickListener.onBallonClick(id);
		}
	}
	
	/***********界面相关******************/
	private Random random;
	
	//全局值
	private int displayWidth;
	private int ballonFloatStartX;
	private int ballonFloatStartY;
	
	//过渡值
	private int imageView1NowYUsed;
	private int imageView3ToX;
	private int imageView3Radius;
	
	private BallonImageView imageView1;
	private BallonImageView imageView2;
	private BallonImageView imageView3;
	private BallonImageView imageView4;
	private BallonImageView imageView5;
	private BallonImageView imageView6;
	private BallonImageView imageView7;
	private BallonImageView imageView8;
	
	public BallonLayout(Context context, AttributeSet attrs)
	{
		super(context, attrs);
		LayoutInflater.from(context).inflate(R.layout.ballon_layout, this);
		initPoints();
		initView();
	}

	private void initPoints()
	{
		random = new Random();
		
		displayWidth = DisplayUtils.getDisplayWidth(getContext());
		ballonFloatStartX = DisplayUtils.getDisplayWidth(getContext()) / 2;
		ballonFloatStartY = DisplayUtils.getDisplayHeight(getContext());
	}

	private void initView()
	{
		imageView1 = (BallonImageView)findViewById(R.id.iv1);
		imageView2 = (BallonImageView)findViewById(R.id.iv2);
		imageView3 = (BallonImageView)findViewById(R.id.iv3);
		imageView4 = (BallonImageView)findViewById(R.id.iv4);
		imageView5 = (BallonImageView)findViewById(R.id.iv5);
		imageView6 = (BallonImageView)findViewById(R.id.iv6);
		imageView7 = (BallonImageView)findViewById(R.id.iv7);
		imageView8 = (BallonImageView)findViewById(R.id.iv8);
		
		imageView1.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(0);
				
			}
		});
		
		imageView2.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(1);
				
			}
		});
	
		imageView3.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(2);
			}
		});
	
		imageView4.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(3);
			}
		});
		
		imageView5.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(4);
			}
		});
		
		imageView6.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(5);
			}
		});
	
		imageView7.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(6);
			}
		});
		
		imageView8.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(7);
			}
		});
	}
	
	public void setView(String[] ballonNames)
	{
		getNonredundantArray();
		
		setImageView1(ballonNames[0]);
		setImageView2(ballonNames[1]);
		setImageView3(ballonNames[2]);
		setImageView4(ballonNames[3]);
		setImageView5(ballonNames[4]);
		setImageView6(ballonNames[5]);
		setImageView7(ballonNames[6]);
		setImageView8(ballonNames[7]);
	}
	
	private void setImageView1(String ballonName)
	{
		int toX = getBallonToX(displayWidth / 16, displayWidth / 8);
		int radius = getBallon1Radius(toX);
		imageView1.setRadius(radius);
		imageView1.setBkgColorAndText(getRandomColor(0), ballonName);
		imageView1.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, 100, getRandomDuration());
		
		imageView1NowYUsed = radius * 2 + 100;
	}
	
	private int getBallon1Radius(int toX)
	{	
		int maxRadius = (displayWidth / 2 - toX) / 2;
		int radius = (int) (maxRadius * getRadiusRange(0.8f, 0.85f));
		return radius;
	}
	
	private void setImageView2(String ballonName)
	{
		int toX = getBallonToX((displayWidth / 8) * 5, (displayWidth / 4) * 3);
		int radius = getBallon2Radius(toX);
		imageView2.setRadius(radius);
		imageView2.setBkgColorAndText(getRandomColor(1), ballonName);
		imageView2.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, 40, getRandomDuration());
		
	}
	
	private int getBallon2Radius(int toX)
	{
		int maxRadius = (displayWidth - toX) / 2;
		int radius = (int) (maxRadius * getRadiusRange(0.7f, 0.8f));
		return radius;
	}
	
	private void setImageView3(String ballonName)
	{
		imageView3ToX = getBallonToX((displayWidth / 16) * 5, (displayWidth / 16) * 7);
		imageView3Radius = getBallon3Radius();
		int toY = imageView1NowYUsed + 20;
		imageView3.setRadius(imageView3Radius);
		imageView3.setBkgColorAndText(getRandomColor(2), ballonName);
		imageView3.floatToPosition(ballonFloatStartX, ballonFloatStartY, imageView3ToX, toY, getRandomDuration());
		
		imageView1NowYUsed = toY + imageView3Radius * 2;
	}
	
	private int getBallon3Radius()
	{
		int maxRadius = displayWidth / 8;
		int radius = (int) (maxRadius * getRadiusRange(0.85f, 0.95f));
		return radius;
	}
	
	private void setImageView4(String ballonName)
	{
		int toX = getBallonToX(imageView3ToX + imageView3Radius * 2 + 30, (displayWidth / 4) * 3);
		int radius = getBallon4Radius();
		int toY = imageView1NowYUsed - imageView3Radius * 2;
		imageView4.setRadius(radius);
		imageView4.setBkgColorAndText(getRandomColor(3), ballonName);
		imageView4.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
	}
	
    private int getBallon4Radius()
	{
    	int maxRadius = (displayWidth / 16) * 3;
		int radius = (int) (maxRadius * getRadiusRange(0.8f, 0.95f));
		return radius;
	}

	private void setImageView5(String ballonName)
	{
		int toX = getBallonToX(displayWidth / 16, displayWidth / 8);
		int radius = getBallon3Radius();
		int toY = imageView1NowYUsed + 10;
		
		imageView5.setRadius(radius);
		imageView5.setBkgColorAndText(getRandomColor(4), ballonName);
		imageView5.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
		
		imageView1NowYUsed = imageView1NowYUsed + radius * 2;
	}

	private void setImageView6(String ballonName)
	{
		int toX = getBallonToX((displayWidth / 16) * 6, (displayWidth / 16) * 8);
		int radius = getBallon3Radius();
		int toY = imageView1NowYUsed - radius;
		
		imageView6.setRadius(radius);
		imageView6.setBkgColorAndText(getRandomColor(5), ballonName);
		imageView6.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
		
		imageView1NowYUsed = toY + radius * 2;
	}
	
	private void setImageView7(String ballonName)
	{
		int toX = getBallonToX((displayWidth / 16) * 11, (displayWidth / 16) * 12);
		int radius = getBallon3Radius();
		int toY = imageView1NowYUsed - radius;
		
		imageView7.setRadius(radius);
		imageView7.setBkgColorAndText(getRandomColor(6), ballonName);
		imageView7.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
		
		imageView1NowYUsed = toY + radius * 2;
	}
	
	private void setImageView8(String ballonName)
	{
		int toX = getBallonToX(displayWidth / 8, (displayWidth / 16) * 4);
		int radius = getBallon8Radius();
		int toY = imageView1NowYUsed - radius;
		
		imageView8.setRadius(radius);
		imageView8.setBkgColorAndText(getRandomColor(7), ballonName);
		imageView8.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
	}
	
	private int getBallon8Radius()
	{
		int maxRadius = (displayWidth / 24) * 4;
		int radius = (int) (maxRadius * getRadiusRange(0.8f, 0.95f));
		return radius;
	}
	
	private int getBallonToX(int start, int end)
	{
		int toX = random.nextInt(end);
		
		if(toX < start)
		{
			toX = start;
		}
		
		return toX;
	}
	
	private float getRadiusRange(float minRange, float maxRange)
	{
		float range = random.nextFloat();
		
		if(range <= minRange)
		{
			range = minRange;
		}
		
		if(range >= maxRange)
		{
			range = maxRange;
		}
		
		return range;
	}

	private int[] colorIndex = new int[BALLON_COUNT];
	private int getRandomColor(int index)
	{
		return Color.parseColor(ballonColors[colorIndex[index]]);
	}
	
	private int getRandomDuration()
	{
		float seconds = (random.nextInt(50) + 51) / 100f;
		return (int) (seconds * 2000);
	}
	
	private void getNonredundantArray()
	{

		// 初始化备选数组
		int[] defaultNums = new int[BALLON_COUNT];

		for (int i = 0; i < defaultNums.length; i++)
		{
			defaultNums[i] = i;
		}

		// 默认数组中可以选择的部分长度
		int canBeUsed = BALLON_COUNT;
		// 填充目标数组
		for (int i = 0; i < colorIndex.length; i++)
		{
			// 将随机选取的数字存入目标数组
			int index = random.nextInt(canBeUsed);
			colorIndex[i] = defaultNums[index];
			// 将已用过的数字扔到备选数组最后，并减小可选区域
			swap(index, canBeUsed - 1, defaultNums);
			canBeUsed--;
		}

	}
	
	private void swap(int i, int j, int[] nums)
	{
		int temp = nums[i];
		nums[i] = nums[j];
		nums[j] = temp;
	}

}


        其中的getNonredundantArray()通过洗牌算法，保证每次生成一个1-8不重复的随机数组，然后再从颜色数组中选择出不同的颜色。监听器的目的是告诉监听者哪个气泡被点击了~ 最终代码实现效果如下：

         还真是没在网上找到类似的demo或者例子，算是一次纯原创的尝试吧，谢谢各位观赏~

amurocrash
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
JS_固定区域内的不重叠随机圆，随机气泡，固定区域、不重叠、随机圆，半径固定、半径随机
小歪博客
04-07 733
关键词：js、固定区域、不重叠、随机圆，半径固定、半径随机 需求在一个固定的区域（500X500）内显示10个圆，且半径固定，而且不重叠 因为圆的个数固定，而且半径固定，那么就有可能会没有解决方案。 不过其实也没有很难，处理好半径的最大值就好了。思路： 固定半径随机半径
前端做一个简单的随机气泡（随机大小，随机颜色，随机方向，随机速度，透明度改变）的静态网页
AaronLee_1310的博客
04-05 3557
话不多说直接代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body { overf...
不重叠且分布均匀的气泡图解决方案（基于echarts）
热门推荐
qq_34295211的博客
06-17 1万+
气泡图是数据可视化需求中的一种常见图表形式。然而截至目前，像echarts，d3，higncharts都还没有直接提供一个配置来完成不重叠且分布均匀的气泡图这项工作。幸运的是，我们可以通过配置echart的关系图来完成我们的气泡图需求。 下面是完成后的气泡图效果（数据加载后有一个动画效果，而且气泡支持拖动，下方动图不和谐的地方为鼠标拖动）： 最终稳定之后的效果如下： 为了有更好的适用性，这里把绘制气泡图的操作都封装到了一个函数里面。以Vue项目为例，要完...
【VUE3+AntV-G2】数据可视化 封装antv G2 气泡图组件
qq_48468636的博客
02-16 2494
将AntV-G2气泡图引入Vue3，封装成组件
（arcade）随机泡泡
Jessicakkkkk的博客
01-16 452
from arcade import * # 设置窗体宽和高 SCREEN_WIDTH = 600 SCREEN_HEIGHT = 800 # 设置窗体标题 SCREEN_TITLE = "随机泡泡" class Bubble(): def __init__(self): self.x = 0 self.y = 0 self.radius = 0 self.color = color.SKY_BLUE class MyGam.
js实现可爱的气泡特效
10-14
在JavaScript编程中，创建动态和有趣的用户界面效果是吸引用户注意力和提升用户体验的重要方式之一。本文将详细解析如何使用JS实现可爱的气泡特效，通过这段代码我们可以了解到如何利用HTML5的Canvas API绘制并动画...
[Android实例] 水下气泡上升界面效果，和下降效果
06-15
本实例探讨的是如何实现一个独特的水下气泡上升和下降的界面效果。这个效果可以应用于各种场景，比如游戏、天气应用或者任何与水元素相关的UI设计。 首先，我们需要了解的是Android的动画系统。在Android中，有两种...
C语言实现气泡
01-17
在计算机编程中，这种效果通常是通过图形用户界面（GUI）实现的，但对于嵌入式系统，如基于S3C2440A的硬件平台，可能需要直接操作硬件接口来完成。 S3C2440A是一款由Samsung生产的ARM9微处理器，广泛应用于嵌入式...
jQuery漂亮的气泡效果 随机头像显示
12-15
本文将深入探讨如何使用jQuery实现一个漂亮的气泡效果和随机头像显示的功能，这通常用于创建现代、时尚的用户界面。 首先，我们要理解jQuery中的“气泡效果”。这种效果通常指的是在鼠标悬停或移动时，元素周围出现...
JS彩色气泡浮动动画特效
06-24
动画中的气泡随机产生和随机移动，这需要利用JavaScript的`Math.random()`函数生成随机数值。计算气泡的运动轨迹和速度也需要运用到基础的数学知识，如加减运算和向量概念。 7. **碰撞检测**： 虽然在描述中没有...
5种JS随机移动气泡效果
06-06 1051
这些5个JS随机运动气泡影响显示凉爽动画与在JavaScript / jQuery的几行代码“泡沫”的效果。 去看一下！ 1. JS泡沫效应＃1 JS泡沫效应1 来源 演示 2. JS泡沫效应＃2 JS泡沫效应＃2 来源 演示 3. jQuery.movi​​ng气泡 创建这个jQuery插件让你可以轻松让物体走动您的网页 资源 4.气泡 图片现在可以去向上和向...
01 C语言实现动态气泡碰撞和移动的效果，小球碰撞，Win7气泡壁纸，碰撞算法
qq582880551的博客
01-29 1073
想要实现多气泡相互碰撞的效果；想着这种在Win7壁纸中早就实现的效果，网上应该能找到源码的，但是，事实是我并没有找到能在实际产品中使用的，成熟的源码，没有办法，只有自己写。一开始出现一堆相互不重叠的，大小不一的气泡；或者一开始气泡从底下或者侧面出现，然后方向有一些随机的不同；自然和符合物理规律的碰撞效果；使用windows api、c语言、vsWin32 API 编程 —— 前言。
布局属性笔记
balloon flowe的博客
03-13 377
线性布局（LinearLayout） android_orientation 用于控制控件的排列方向 默认值 ： vertical 垂直 layout_height="wrap_content" horizon...
android 呼吸气泡动画,Android：会呼吸的悬浮气泡
weixin_33603963的博客
05-27 361
Android：会呼吸的悬浮气泡写在前面最早看到这个效果是 MIUI6 系统升级界面，有很多五颜六色的气泡悬浮着，觉得很好看。可惜现在找不到动态图了。而且虽然 MIUI8 更新界面也有类似的气泡，但是不过是静态的，不咋好看。再次见到这个效果是在 Pure 天气这款软件中，可惜开发者不开源。不过万能的 Github 上有类似的实现，于是果断把自定义 View 部分抽出来学习学习。怀着敬意放上原项目地...
vue 绘制气泡随机标签效果
funny_girl的博客
06-05 2164
最近遇到一种比较炫酷的效果，效果图如下： 研究了一段时间，选择使用Konva ：一个 基于 Canvas 开发的 2d js 框架库，来绘制上面的效果图。 Konva具体的API地址：https://konvajs.org/ 以下是我具体使用的方法： （1）安装 npm install vue-konva konva --save （2）引用 import Vue from 'vue'; import VueKonva from 'vue-konva' Vue.use(VueKonva) （3）绘制效果
Android 气泡上升效果
zy学无止境的专栏
03-10 3803
Android 小球 气泡 上升
cesium 实现气泡框
最新发布
08-08
要实现一个气泡框，首先需要通过Cesium创建一个场景，并在场景中添加需要显示的实体或标记。可以使用Cesium的Entity对象或Marker对象来表示这些元素。然后，可以通过为每个实体或标记添加描述信息，将气泡框链接到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值