一個css效果的Android實現

標籤：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();}@Overrideprotected 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);}}@Overrideprotected 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)];}@Overridepublic 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;}@Overridepublic String toString() {return "Circle [x=" + x + ", y=" + y + ", r=" + r + ", color=" + color + "]";}}}

一個css效果的Android實現