主要是最近项目有个用到一个圆环的自定义控件菜单动画,就大概说明下简单的布局, 直接贴代码:
import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.RectF; import android.util.AttributeSet; import android.view.View; /** * Created by admin on 2017/4/12. * 扇形每次在圆环上转动角度的weight */ public class CustomView extends View { /** * 圆圈画笔 */ private Paint mCirclePaint; /** * 大扇形画笔 */ private Paint mBigSectorPaint; /** * 小扇形画笔 */ private Paint mSmoolSectorPaint; public CustomView(Context context) { super(context); initPaint(); } public CustomView(Context context, AttributeSet attrs) { super(context, attrs); initPaint(); } private void initPaint() { mCirclePaint = new Paint(); mCirclePaint.setAntiAlias(true); mCirclePaint.setColor(getResources().getColor(R.color.circlr)); mCirclePaint.setStyle(Paint.Style.STROKE); mCirclePaint.setStrokeWidth(1); mBigSectorPaint = new Paint(); mBigSectorPaint.setAntiAlias(true); mBigSectorPaint.setColor(getResources().getColor(R.color.bigsector)); mBigSectorPaint.setStyle(Paint.Style.FILL); mBigSectorPaint.setStrokeWidth(1); mSmoolSectorPaint = new Paint(); mSmoolSectorPaint.setAntiAlias(true); mSmoolSectorPaint.setColor(getResources().getColor(R.color.smoolSector)); mSmoolSectorPaint.setStyle(Paint.Style.FILL); mSmoolSectorPaint.setStrokeWidth(1); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); /** * 圆中心点的坐标为(getWidth() / 2,getHeight() / 2) * 半径为 getWidth() *2/ 5 */ int xCenter = getWidth() / 2; int yCenter = (getHeight() - 136) / 2; int rCircleSmoll = 80; int rCircleBig = getWidth() / 2-10; //外切大圆半径 int rExcircleBig; rExcircleBig = (int) Math.round(rCircleBig / Math.sin(Math.toRadians(45))); canvas.drawCircle(xCenter, yCenter, rCircleSmoll, mCirclePaint); canvas.drawCircle(xCenter, yCenter, rCircleBig, mCirclePaint); //大圆外切正方形左上角坐标 (正方向的左上角为圆上-135度角) int xb, yb; //大圆外切正方形右下角坐标 (正方形的右下角为圆上45度角) int Xb, Yb; xb = (int) Math.round(rExcircleBig * Math.cos(Math.toRadians(-135))) + xCenter; yb = (int) Math.round(rExcircleBig * Math.sin(Math.toRadians(-135))) + yCenter; Xb = (int) Math.round(rExcircleBig * Math.cos(Math.toRadians(45))) + xCenter; Yb = (int) Math.round(rExcircleBig * Math.sin(Math.toRadians(45))) + yCenter; RectF ovalB = new RectF(xb, yb, Xb, Yb); canvas.drawArc(ovalB, mStartAngle, 60, true, mBigSectorPaint); //外切小圆半径 int rExcircleSmoll; rExcircleSmoll = (int) Math.round(rCircleSmoll / Math.sin(Math.toRadians(45))); //小圆外切正方形左上角坐标 int xs, ys; //小圆外切正方形右下角坐标 int Xs, Ys; xs = (int) Math.round(rExcircleSmoll * Math.cos(Math.toRadians(-135))) + xCenter; ys = (int) Math.round(rExcircleSmoll * Math.sin(Math.toRadians(-135))) + yCenter; Xs = (int) Math.round(rExcircleSmoll * Math.cos(Math.toRadians(45))) + xCenter; Ys = (int) Math.round(rExcircleSmoll * Math.sin(Math.toRadians(45))) + yCenter; RectF ovalS = new RectF(xs, ys, Xs, Ys); canvas.drawArc(ovalS, mStartAngle, 360, true, mSmoolSectorPaint); } private float mStartAngle = -120; /** * 每次旋转的角度 * @param angle */ public void setStartAngle(int angle) { this.mStartAngle = angle; //重新绘制 postInvalidate(); } }大概就是这样的一个代码;都是很简单的 我主要是为了记忆下,就写出来 有什么不好的地方可以回复;
中间有些旋转角度问题;因为在手机屏幕上左上角为(0,0)坐标,往下为Y正方向,所以0度为X轴正方向,Y轴负方向为-90度,以此类推,
还有就是边的计算问题,这都属于一些简单的数学三角函数,sinA = 对边/斜边 cosA = 邻边/斜边,根据自己需要计算
因为我做的是属于智能家居遥控器方面的app,所以需要硬件控制
activity代码是通过onkeyUp事件处理;
@Override public boolean onKeyUp(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_PAGE_UP) { mStartAngle = mStartAngle + 60; mCustomView.setStartAngle(mStartAngle); } else if (keyCode == KeyEvent.KEYCODE_PAGE_DOWN) { mStartAngle = mStartAngle - 60; mCustomView.setStartAngle(mStartAngle); } else { return false; } return true; }
xml直接饮用该布局就ok,没有什么难度就不贴代码了
加载出来默认图片
通过事件处理转动后图片