热门标签 | 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

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


推荐阅读
  • 探讨一个显示数字的故障计算器,它支持两种操作:将当前数字乘以2或减去1。本文将详细介绍如何用最少的操作次数将初始值X转换为目标值Y。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 构建基于BERT的中文NL2SQL模型:一个简明的基准
    本文探讨了将自然语言转换为SQL语句(NL2SQL)的任务,这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践,该比赛提供了金融和通用领域的表格数据,并标注了对应的自然语言与SQL语句对,旨在训练准确的NL2SQL模型。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文介绍如何使用 Sortable.js 库实现元素的拖拽和位置交换功能。Sortable.js 是一个轻量级、无依赖的 JavaScript 库,支持拖拽排序、动画效果和多种插件扩展。通过简单的配置和事件处理,可以轻松实现复杂的功能。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 本文总结了在使用Ionic 5进行Android平台APK打包时遇到的问题,特别是针对QRScanner插件的改造。通过详细分析和提供具体的解决方法,帮助开发者顺利打包并优化应用性能。 ... [详细]
  • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
    学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
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社区 版权所有