您好,登录后才能下订单哦!
本篇文章为大家展示了怎么在Android应用中利用View实现一个旋转功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
1、添加右侧旋转
Bitmap turnBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.fengshan, null)).getBitmap(); int turnLeafAngle = 0; private void setTurnLeaf(Canvas canvas) { Matrix matrix = new Matrix(); turnLeafAngle = turnLeafAngle + 3; matrix.postTranslate((width - rightCircleWidth/2 - turnBitmap.getWidth()/2), (height - rightCircleWidth/2 - turnBitmap.getHeight()/2)); matrix.postRotate(turnLeafAngle, width - rightCircleWidth/2 - turnBitmap.getWidth()/2 + turnBitmap.getWidth()/2, height - rightCircleWidth/2 - turnBitmap.getHeight()/2 + turnBitmap.getHeight()/2); canvas.drawBitmap(turnBitmap, matrix, new Paint()); }
代码很明确,首先通过Matrix.postTranslate(float dx, float dy)把turnBitMap定位到最右侧圆圈
再通过Matrix.postRotate(float degress, float dx, float dy);设置旋转角度,每次角度+3°
其中degress为旋转角度,(dx,dy)为旋转中心点坐标
2、添加滑动效果
a、定义一个圆形Rectf(为什么不是半圆?因为画圆弧的其实角度从水平线右侧开始)
progressArcRectf = new RectF(0, 0, height, height);
b、定义一个长方形Rectf,长方形x坐标起点即时圆形半径
progressRectf = new RectF(height/2, 0, width, height);
c、画出圆弧Canvas.drawArc(Rectf rectf, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
startAngle:起始角度,默认从右侧水平线开始
sweepAngle:为旋转的角度,顺时针旋转
useCenter:true只画出弧线,false则画出圆心到弧线的区域
//画滑动后的背景条 int currentProgressWidht = currentProgress * (width - borderWidth)/100; if(currentProgressWidht < leftCircleWidth/2) { //angle取值范围0~90 int angle = 90 * currentProgressWidht / (leftCircleWidth/2); // 起始的位置 int startAngle = 180 - angle; // 扫过的角度 int sweepAngle = 2 * angle; canvas.drawArc(progressArcRectf, startAngle, sweepAngle, false, progressBgPaint); }else { //画左边半圆形滑过部分 canvas.drawArc(progressArcRectf, 90, 180, false, progressBgPaint); progressRectf.left = borderWidth + leftCircleWidth/2; progressRectf.right = borderWidth + currentProgressWidht; //画中间滑过部分 canvas.drawRect(progressRectf, progressBgPaint); }
给LeafView.java添加一个
public void setCurrentProgress(int currentProgress) { this.currentProgress = currentProgress; }
3、修复叶子飘动范围
这个简单,就是设置叶子的rect坐标起点+边框距离
赋上所有代码
1、activity_leaf.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/content_leaf" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="226dp" android:layout_height="45dp"> <com.zjcpo.t170313_countdowntimer.LeafView android:id="@+id/leafView" android:layout_width="226dp" android:layout_height="45dp" android:layout_centerHorizontal="true" /> </RelativeLayout> </RelativeLayout>
2、LeafView.java
import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Rect; import android.graphics.RectF; import android.graphics.drawable.BitmapDrawable; import android.util.AttributeSet; import android.util.Log; import android.view.View; import java.util.LinkedList; import java.util.List; import java.util.Random; import java.util.jar.Attributes; /** * Created by jiemiao.zhang on 2017-3-15. */ public class LeafView extends View { private String TAG = "--------LeafView"; private Resources mResources; //背景图、叶子 private Bitmap mLeafBitmap, bgBitmap, turnBitmap; //整个控件的宽度和高度 private int width, height; //最外层边框宽度 private int borderWidth; //右侧圆形直径 private int rightCircleWidth; //左侧圆形直径 private int leftCircleWidth; private Paint bgPaint; private RectF bgRect; private Rect bgDestRect; //进度条实时背景 private Paint progressBgPaint; //进度条左侧半圆,进度条中间长方形部分Rect private RectF progressArcRectf, progressRectf; //当前百分比0~100 private int currentProgress = 0; //存放叶子lsit private List<Leaf> leafList; //叶子的宽和高 private int mLeafWidth, mLeafHeight; //叶子滑动一周的时间5秒 private final static long cycleTime = 5000; //叶子数量 private final static int leafNumber = 6; public LeafView(Context context, AttributeSet attrs) { super(context, attrs); mResources = getResources(); mLeafBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf, null)).getBitmap(); mLeafWidth = mLeafBitmap.getWidth(); mLeafHeight = mLeafBitmap.getHeight(); turnBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.fengshan, null)).getBitmap(); bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap(); bgPaint = new Paint(); bgPaint.setColor(mResources.getColor(R.color.bg_color)); //进度条实时背景 progressBgPaint = new Paint(); progressBgPaint.setColor(mResources.getColor(R.color.progress_bg_color)); //获取所有叶子的信息,放入list leafList = getLeafs(leafNumber); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); width = w; height = h; borderWidth = height * 10/64; rightCircleWidth = width * 62/303; leftCircleWidth = height - 2 * borderWidth; bgDestRect = new Rect(0, 0 , width, height); bgRect = new RectF(0, 0 , width, height); progressArcRectf = new RectF(borderWidth, borderWidth, height - borderWidth, height - borderWidth); progressRectf = new RectF(borderWidth+(height-2*borderWidth)/2, borderWidth, width-rightCircleWidth/2, height-borderWidth); Log.i("leftMarginWidth", (borderWidth + leftCircleWidth/2) + ""); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //画背景颜色到画布 canvas.drawRect(bgRect, bgPaint); if(currentProgress <= 100) { //画叶子 int size = leafList.size(); for (int i=0; i<size; i++) { Leaf leaf = leafList.get(i); //获取叶子坐标 getLocation(leaf); //获取叶子旋转角度 getRotate(leaf); canvas.save(); Matrix matrix = new Matrix(); //设置滑动 matrix.postTranslate(leaf.x, leaf.y); //设置旋转 matrix.postRotate(leaf.rotateAngle, leaf.x + mLeafWidth / 2, leaf.y + mLeafHeight / 2); //添加叶子到画布 canvas.drawBitmap(mLeafBitmap, matrix, new Paint()); canvas.restore(); //画滑动后的背景条 int currentProgressWidht = currentProgress * (width - borderWidth - rightCircleWidth/2)/100; if(currentProgressWidht < leftCircleWidth/2) { //angle取值范围0~90 int angle = 90 * currentProgressWidht / (leftCircleWidth/2); Log.i(TAG, "angle :" + angle); // 起始的位置 int startAngle = 180 - angle; // 扫过的角度 int sweepAngle = 2 * angle; canvas.drawArc(progressArcRectf, startAngle, sweepAngle, false, progressBgPaint); }else { //画左边半圆形滑过部分 canvas.drawArc(progressArcRectf, 90, 180, false, progressBgPaint); progressRectf.left = borderWidth + leftCircleWidth/2; progressRectf.right = borderWidth + currentProgressWidht; //画中间滑过部分 canvas.drawRect(progressRectf, progressBgPaint); } } //调用onDraw()重复滑动 if(currentProgress < 100) { postInvalidate(); } } //画背景图片到画布 canvas.drawBitmap(bgBitmap, null, bgDestRect, null); //画右边选择风叶 setTurnLeaf(canvas); //画百分比 setText(canvas); } int turnLeafAngle = 0; private void setTurnLeaf(Canvas canvas) { Matrix matrix = new Matrix(); turnLeafAngle = turnLeafAngle + 3; matrix.postTranslate((width - rightCircleWidth/2 - turnBitmap.getWidth()/2), (height - rightCircleWidth/2 - turnBitmap.getHeight()/2)); matrix.postRotate(turnLeafAngle, width - rightCircleWidth/2 - turnBitmap.getWidth()/2 + turnBitmap.getWidth()/2, height - rightCircleWidth/2 - turnBitmap.getHeight()/2 + turnBitmap.getHeight()/2); canvas.drawBitmap(turnBitmap, matrix, new Paint()); } //显示百分比数字,大于3%开始显示,到50%停止滑动 private void setText(Canvas canvas) { Paint paintText = new Paint(); paintText.setColor(Color.WHITE); paintText.setTextSize(30); int textX = currentProgress * width / 100; textX = currentProgress < 50 ? (currentProgress * width / 100) : (width/2); if(currentProgress > 3) { canvas.drawText(currentProgress + "%", textX, height/2 + 10,paintText); } } //获取每片叶子在XY轴上的滑动值 private void getLocation(Leaf leaf) { float betweenTime = leaf.startTime - System.currentTimeMillis(); //周期结束再加一个cycleTime if(betweenTime < 0) { leaf.startTime = System.currentTimeMillis() + cycleTime + new Random().nextInt((int) (cycleTime)); betweenTime = cycleTime; } //通过时间差计算出叶子的坐标 float fraction = (float) betweenTime / cycleTime; float x = (int)(width * fraction); //防止叶子飘出边框 leaf.x = x < borderWidth ? borderWidth : x; float w = (float) ((float) 2 * Math.PI / width); int y = (int) (18 * Math.sin(w * x)) + (height-mLeafHeight)/2; //防止叶子飘出边框 y = y > (height - borderWidth) ? (height - borderWidth) : y; y = y < borderWidth ? borderWidth : y; leaf.y = y; } //获取每片叶子的旋转角度 private void getRotate(Leaf leaf) { float scale = ((leaf.startTime - System.currentTimeMillis())%cycleTime)/ (float)cycleTime; int rotate = (int)(scale * 360); leaf.rotateAngle = rotate; } private class Leaf { // 叶子的坐标 float x, y; // 旋转角度 int rotateAngle; // 起始时间(ms) long startTime; } private List<Leaf> getLeafs(int leafSize) { List<Leaf> list = new LinkedList<Leaf>(); for (int i=0; i<leafSize; i++) { list.add(getLeaf()); } return list; } //使叶子初始时间有间隔 int addTime; private Leaf getLeaf() { Random random = new Random(); Leaf leaf = new Leaf(); leaf.rotateAngle = random.nextInt(360); addTime += random.nextInt((int) (cycleTime)); leaf.startTime = System.currentTimeMillis() + cycleTime + addTime; return leaf; } public void setCurrentProgress(int currentProgress) { this.currentProgress = currentProgress; } } 3、LeafActivity.java public class LeafActivity extends Activity { private LeafView leafView; private int mProgress = 0; Handler mHandler = new Handler() { public void handleMessage(Message msg) { if (mProgress < 40) { mProgress += 1; // 随机800ms以内刷新一次 mHandler.sendEmptyMessageDelayed(1, new Random().nextInt(800)); leafView.setCurrentProgress(mProgress); } else { mProgress += 1; // 随机1200ms以内刷新一次 mHandler.sendEmptyMessageDelayed(1, new Random().nextInt(100)); leafView.setCurrentProgress(mProgress); } }; }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_leaf); leafView = (LeafView) findViewById(R.id.leafView); mHandler.sendEmptyMessageDelayed(1, 3000); } }
上述内容就是怎么在Android应用中利用View实现一个旋转功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。