Android - 自定义控件之圆形控件

import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Typeface;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.widget.ImageView;public class OptionCircle extends ImageView { private final Paint paint; private final Context context; boolean clicked = false;// 是否被点击 boolean addBackground = false; int radius = -1; // 半径值初始化为-1 int centerOffsetX = 0;// 圆圈原点的偏移量x int centerOffsetY = 0;// 偏移量y int colorCircle; // 圆圈颜色 int colorBackground; // 背景填充颜色 int colorText; // 文字颜色 String textCircle = ""; public OptionCircle(Context context) { this(context, null); } public OptionCircle(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; this.paint = new Paint(); this.paint.setAntiAlias(true); this.paint.setStyle(Paint.Style.STROKE); colorCircle = Color.argb(205, 245, 2, 51);// 默认颜色 colorText = colorCircle; // 字体颜色默认与圈圈颜色保持一致 colorBackground = colorCircle;// 设定默认参数 } // 属性设置方法 public void setRadius(int r) { this.radius = r; } public void setCenterOffset(int x, int y) { this.centerOffsetX = x; this.centerOffsetY = y; } public void setColorCircle(int c) { this.colorCircle = c; } public void setColorText(int c) { this.colorText = c; } public void setColorBackground(int c) { this.colorBackground = c; } public void setText(String s) { this.textCircle = s; } public void setClicked(boolean clicked) { this.clicked = clicked; } public void setAddBackground(boolean add) { this.addBackground = add; } @Override protected void onDraw(Canvas canvas) { int center = getWidth() / 2;// 当前宽度的一半 int innerCircle = 86; // 默认半径为86 if (radius > 0) { innerCircle = dip2px(context, radius); // 如果没有另外设置半径，取半径86 } Drawable drawable = getDrawable(); if (addBackground) { } else { // 画圈圈；被点击后会变成实心的圈圈，默认是空心的 this.paint.setStyle(clicked ? Paint.Style.FILL : Paint.Style.STROKE); this.paint.setColor(clicked ? colorBackground : colorCircle); this.paint.setStrokeWidth(1.5f); canvas.drawCircle(center + centerOffsetX, center + centerOffsetY, innerCircle, this.paint);// 画圆圈时带上偏移量 } // 绘制文字 this.paint.setStyle(Paint.Style.FILL); this.paint.setStrokeWidth(1); this.paint.setTextSize(22); this.paint.setTypeface(Typeface.MONOSPACE);// 设置一系列文字属性 this.paint.setColor(clicked ? Color.WHITE : colorText); this.paint.setTextAlign(Paint.Align.CENTER);// 文字水平居中 Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt(); canvas.drawText(textCircle, center + centerOffsetX, center + centerOffsetY - (fontMetrics.top + fontMetrics.bottom) / 2, this.paint);// 设置文字竖直方向居中 super.onDraw(canvas); } /** * convert dp to px */ public static int dip2px(Context context, float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); }}

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/top_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:text="@string/circles_top_title" android:textSize="26sp" /> <com.rust.aboutview.view.OptionCircle android:id="@+id/center_circle" android:layout_width="140dp" android:layout_height="140dp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" /> <com.rust.aboutview.view.OptionCircle android:id="@+id/circle_0" android:layout_width="200dp" android:layout_height="200dp" android:layout_marginStart="130dp" android:layout_marginTop="53dp" /> <com.rust.aboutview.view.OptionCircle android:id="@+id/circle_1" android:layout_width="210dp" android:layout_height="210dp" android:layout_below="@+id/circle_0" android:layout_toEndOf="@+id/center_circle" /> <com.rust.aboutview.view.OptionCircle android:id="@+id/circle_2" android:layout_width="210dp" android:layout_height="210dp" android:layout_below="@id/center_circle" /></RelativeLayout>

import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.view.View;import com.rust.aboutview.view.OptionCircle;public class CirclesActivity extends Activity { public static final String TAG = "CirclesActivity"; public static final int circle0_r = 88; private static final int SLEEPING_PERIOD = 100; // 刷新UI间隔时间 private static final int UPDATE_ALL_CIRCLE = 99; int circleCenter_r; int circle1_r; boolean circle0Clicked = false; boolean circle1Clicked = false; OptionCircle centerCircle; OptionCircle circle0; OptionCircle circle1; OptionCircle circle2; CircleHandler handler = new CircleHandler(this); /** * Handler : 用于更新UI */ static class CircleHandler extends Handler { CirclesActivity activity; boolean zoomDir = true; boolean circle2Shaking = false; int r = circle0_r; int moveDir = 0; // 浮动方向 int circle1_x = 0;// 偏移量的值 int circle1_y = 0; int circle2_x = 0; int circle2ShakeTime = 0; int circle2Offsets[] = {10, 15, -6, 12, 0};// 抖动偏移量坐标 CircleHandler(CirclesActivity a) { activity = a; } @Override public void handleMessage(Message msg) { switch (msg.what) { case UPDATE_ALL_CIRCLE: { if (zoomDir) {// 用简单的办法实现半径变化 r++; if (r >= 99) zoomDir = false; } else { r--; if (r <= circle0_r) zoomDir = true; } activity.circle0.invalidate(); activity.circle0.setRadius(r); calOffsetX();// 计算圆心偏移量 activity.circle1.invalidate(); activity.circle1.setCenterOffset(circle1_x, circle1_y); if (circle2Shaking) { if (circle2ShakeTime < circle2Offsets.length - 1) { circle2ShakeTime++; } else { circle2Shaking = false; circle2ShakeTime = 0; } activity.circle2.invalidate(); activity.circle2.setCenterOffset(circle2Offsets[circle2ShakeTime], 0); } } } } // 计算circle1圆心偏移量；共有4个浮动方向 private void calOffsetX() { if (moveDir == 0) { circle1_x--; circle1_y++; if (circle1_x <= -6) moveDir = 1; } if (moveDir == 1) { circle1_x++; circle1_y++; if (circle1_x >= 0) moveDir = 2; } if (moveDir == 2) { circle1_x++; circle1_y--; if (circle1_x >= 6) moveDir = 3; } if (moveDir == 3) { circle1_x--; circle1_y--; if (circle1_x <= 0) moveDir = 0; } } } class UpdateCircles implements Runnable { @Override public void run() { while (true) {// 配合Handler，循环刷新UI Message message = new Message(); message.what = UPDATE_ALL_CIRCLE; handler.sendEmptyMessage(message.what); try { Thread.sleep(SLEEPING_PERIOD); // 暂停 } catch (InterruptedException e) { Thread.currentThread().interrupt(); } } } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_circle_choose); centerCircle = (OptionCircle) findViewById(R.id.center_circle); circle0 = (OptionCircle) findViewById(R.id.circle_0); circle1 = (OptionCircle) findViewById(R.id.circle_1); circle2 = (OptionCircle) findViewById(R.id.circle_2); circleCenter_r = 38; circle1_r = 45; // 设置圈圈的属性 centerCircle.setRadius(circleCenter_r); centerCircle.setColorText(Color.BLUE); centerCircle.setColorCircle(Color.BLUE); centerCircle.setText("点击圈圈"); circle0.setColorText(Color.RED); circle0.setRadius(circle0_r); circle0.setText("RED"); circle1.setColorCircle(Color.GREEN); circle1.setColorText(Color.GREEN); circle1.setText("Green"); circle1.setRadius(circle1_r); circle2.setColorCircle(getResources().getColor(R.color.colorMagenta)); circle2.setColorText(getResources().getColor(R.color.colorMagenta)); circle2.setText("Frozen!"); // 设定点击事件，可在这里改变控件的属性 circle0.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { circle0Clicked = !circle0Clicked; // 每次点击都取反 circle0.setClicked(circle0Clicked); } }); circle1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { circle1Clicked = !circle1Clicked; circle1.setColorBackground(Color.GREEN); circle1.setClicked(circle1Clicked); } }); circle2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { handler.circle2Shaking = true;// 颤抖吧！ } }); Thread t = new Thread(new UpdateCircles()); t.start();// 开启子线程 }}