一个css效果的Android实现

大过年的,来瞅瞅效果:

记得以前看过一个css效果,鼠标滑过圆圈,圆圈分成四个子圆圈,子圆圈和原先的圆圈占据的矩形是同一个。这个是Android的版本鼠标滑过的事件变为手指触摸事件。废话不多说,看看代码:

package com.sovnem.fabulouscircle;

import java.util.ArrayList;
import java.util.Random;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class FabulousView extends View {

	int[] colors;
	private Random rand;
	ArrayList<Circle> circles;
	boolean ismeasure;
	Paint paint;

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

	private void init() {
		Resources res = getContext().getResources();
		colors = new int[] { res.getColor(android.R.color.holo_blue_bright), res.getColor(android.R.color.holo_green_light), res.getColor(android.R.color.holo_orange_light),
				res.getColor(android.R.color.holo_blue_dark), res.getColor(android.R.color.holo_red_light), res.getColor(android.R.color.holo_red_dark),
				res.getColor(android.R.color.holo_blue_dark) };
		rand = new Random();
		circles = new ArrayList<FabulousView.Circle>();
		paint = new Paint();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		int l = circles.size();
		for (int i = 0; i < l; i++) {
			Circle c = circles.get(i);
			Log.i("info", "" + c.toString());
			paint.setColor(c.color);
			canvas.drawCircle(c.x, c.y, c.r, paint);
		}
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		if (!ismeasure) {

			int w = getResources().getDisplayMetrics().widthPixels;
			int h = getResources().getDisplayMetrics().heightPixels;
			int radius = Math.min(w, h);
			circles.add(new Circle(w / 2, h / 2, radius / 2, getRandomColor()));
			ismeasure = true;
		}
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	// 随机一个颜色
	int getRandomColor() {
		return colors[rand.nextInt(colors.length)];
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// if (event.getAction() == MotionEvent.ACTION_UP)
		handleEvent(event);
		return true;
	}

	private void handleEvent(MotionEvent event) {
		float x = event.getX();
		float y = event.getY();
		int l = circles.size();
		ArrayList<Circle> cs = new ArrayList<FabulousView.Circle>();
		boolean isIn = false;
		int remove = 0;
		for (int i = 0; i < l; i++) {
			Circle c = circles.get(i);
			if (c.isInSelf(x, y)) {
				isIn = true;
				cs.addAll(c.devide(new int[] { getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor() }));
				remove = i;
			}
		}
		if (isIn) {
			circles.remove(remove);
			circles.addAll(cs);
			invalidate();
		}
	}

	class Circle {
		float x, y;
		float r;
		int color;

		public Circle(float x, float y, float r, int color) {
			super();
			this.x = x;
			this.y = y;
			this.r = r;
			this.color = color;
		}

		ArrayList<Circle> devide(int[] colors) {
			ArrayList<Circle> cs = new ArrayList<FabulousView.Circle>();
			cs.add(new Circle(x - r / 2, y - r / 2, r / 2, colors[0]));
			cs.add(new Circle(x + r / 2, y - r / 2, r / 2, colors[1]));
			cs.add(new Circle(x - r / 2, y + r / 2, r / 2, colors[2]));
			cs.add(new Circle(x + r / 2, y + r / 2, r / 2, colors[3]));
			return cs;
		}

		boolean isInSelf(float px, float py) {
			return (this.x - px) * (this.x - px) + (this.y - py) * (this.y - py) <= this.r * this.r;
		}

		@Override
		public String toString() {
			return "Circle [x=" + x + ", y=" + y + ", r=" + r + ", color=" + color + "]";
		}

	}

}
时间: 2024-11-05 16:10:52

一个css效果的Android实现的相关文章

手把手教你打造一个心电图效果View Android自定义View

大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想,所以革命没成功,同志仍需努力. 好了废话不说了,由于布总要做一个心电图的玩意,所以做来练练手,总之拿到的UI图如下: 做好的效果如下: 拿到图,先做一些简单的分析.呃.. 背景表格的绘制 心电图的绘制 背景表格的绘制: 首先drawColor黑色,然后用循环来画线. 心电图的绘制: 看样子是path,应该没问题. 于是就大干一番,按照这俩步骤

[jQuery编程挑战]006 生成一个倒计时效果

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>生成一个倒计时效果</title> <style type="text/css"> body{ margin:0; padding:0; background: orange; width: 100%; height: 10

打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释

为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从server获取大量数据来展示在手机上面的,也就是说:必须联网,才干正常工作,于是想了一下,反正都要联网获取数据,为什么不直接用我相对熟悉一点的 html来做这个运用呢?省的花费不够用的时间去学习android界面的控制,于是就简单了:用蹩脚的手段做了一个android程序的启动欢迎界面,内页就是一个全屏的

一个CSS值转REM的Sublime Text插件

github地址 https://github.com/flashlizi/cssrem CSSREM 一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里. 重启

一个CSS中Z-index的用法

一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作. Z-index属性便属于上面所说的后面的那一组.Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上 的混乱和(开发者心理上)的挫败感.但滑稽的是,一旦你真正理解了Z-index,你会发现它却是一个非常容易使用的属性,并且会为解决很多l

一个不错效果的调光调色开关

先上效果图: 不错吧,最中间那个开关是个CheckBox,中间那个蓝色的是个圆形的拖动条,可以用来显示灯的亮度,而最外面的彩色环形也是可以拖动的,可以用来控制色彩. 彩色环形是自定义View--CirclView,onTouch事件计算如旋转的角度,然后旋转画布,那个环形是UI素材.代码如下: 1 import android.content.Context; 2 import android.graphics.Bitmap; 3 import android.graphics.Canvas;

CSS文件里引入另一个CSS文件

原文地址:https://blog.csdn.net/u013943420/article/details/71597529 1.在HTML中引入css的其中的两个方法 1.1 使用链接式 <link href="style.css" rel="stylesheet" type="text/css" /> 1.2 使用导入式 <style type="text/css"> @import "s

开源一个C#写的Android和IOS都能跑的 打击感强的RPG玩玩。

不废话直接上图 关于下载和打开 没错,我强调过很多次的,Unity3D开发的.  如果你还不懂Unity3D 的基本开发套路,如何打开Unity如何安装Unity这些问题.我建议你先不要索要源代码. 下载后,直接打开这个工程......  然后打开根目录下载ManTuLanSi这个Scence  ,如果你是用PC,就可以按  ASDW开前  来控制前后左右.痛快的打一下怪吧. 源代码齐全吗?? 因为美术资源是别人的,所以实际源代码会有部分美术资源替换了.不过,代码还是这份代码.完全没变. 能商用

一个动画效果

一个动画效果 by 伍雪颖 #define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width) @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100,