热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android自定义View叶子旋转完整版(六)

这篇文章主要为大家详细介绍了Android自定义View叶子旋转完整版,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

上一篇实现多叶子飘动旋转,今天完成最后的功能。

1、添加右侧旋转枫叶

2、添加滑动条效果,显示百分比

3、修复叶子飘出边框问题

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 

给LeafView.java添加一个

 public void setCurrentProgress(int currentProgress) {
  this.currentProgress = currentProgress;

 }

3、修复叶子飘动范围

这个简单,就是设置叶子的rect坐标起点+边框距离

赋上所有代码

1、activity_leaf.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;>

  
    
  

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 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 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  (height - borderWidth) &#63; (height - borderWidth) : y;
  y = y  getLeafs(int leafSize) {
  List list = new LinkedList();
  for (int i=0; i

最后再看下效果

总结

看过前5篇的很好理解,用到的技术点之前都讲到了。这篇主要就是几个百分比函数的计算。

比如设置半圆时弧度如何计算,圆弧对应的百分比,滑动区域长方形的起点坐标计算,去掉边框后的坐标计算

画半圆必须要有一个完整圆形Rect,因为drawArc()从右侧半径水平起始角度,顺时针。然功能要求我们从左侧圆形开始画,所以要通过一个算法,假如当前百分比为4%,需要画30°的圆弧,那么起始角度为165°=180°-15°,画出角度30%

通过matrix.postRotate()实现旋转功能时,必须加上当前view的坐标及二分之一长宽

需要图片等信息的可以从下面的Github地址下载,不过原文比较复杂

参考 https://github.com/Ajian-studio/GALeafLoading

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • Google Play推出全新的应用内评价API,帮助开发者获取更多优质用户反馈。用户每天在Google Play上发表数百万条评论,这有助于开发者了解用户喜好和改进需求。开发者可以选择在适当的时间请求用户撰写评论,以获得全面而有用的反馈。全新应用内评价功能让用户无需返回应用详情页面即可发表评论,提升用户体验。 ... [详细]
  • 阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾
    本文介绍了阿里Treebased Deep Match(TDM)的学习笔记,同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法,再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用,并介绍了TDM的背景和优势。最后,文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]
  • 本文详细解析了JavaScript中相称性推断的知识点,包括严厉相称和宽松相称的区别,以及范例转换的规则。针对不同类型的范例值,如差别范例值、统一类的原始范例值和统一类的复合范例值,都给出了具体的比较方法。对于宽松相称的情况,也解释了原始范例值和对象之间的比较规则。通过本文的学习,读者可以更好地理解JavaScript中相称性推断的概念和应用。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 生成对抗式网络GAN及其衍生CGAN、DCGAN、WGAN、LSGAN、BEGAN介绍
    一、GAN原理介绍学习GAN的第一篇论文当然由是IanGoodfellow于2014年发表的GenerativeAdversarialNetworks(论文下载链接arxiv:[h ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 【Windows】实现微信双开或多开的方法及步骤详解
    本文介绍了在Windows系统下实现微信双开或多开的方法,通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤,实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法,本方法更简单易行,适用于任何电脑,并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
author-avatar
我只爱庄宝贝
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有