自定义View_留声机效果
(Values下)attrs.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <declare-styleable name="GramophoneView">
- <attr name="picture_radiu" format="dimension"/> //中间图片的半径
- <attr name="src" format="reference"/> //图片
- <attr name="disk_rotate_speed" format="float"/> //唱片旋转的速度
- </declare-styleable>
- </resources>
自定义View
- public class GramophoneView extends View {
- /**
- * 尺寸计算设计说明:
- * 1、唱片有两个主要尺寸:中间图片的半径、黑色圆环的宽度。
- * 黑色圆环的宽度 = 图片半径的一半。
- * 2、唱针分为“手臂”和“头”,手臂分两段,一段长的一段短的,头也是一段长的一段短的。
- * 唱针四个部分的尺寸求和 = 唱片中间图片的半径+黑色圆环的宽度
- * 唱针各部分长度 比例——长的手臂:短的手臂:长的头:短的头 = 8:4:2:1
- * 3、唱片黑色圆环顶部到唱针顶端的距离 = 唱针长的手臂的长。度
- */
- private final float DEFUALT_DISK_ROTATE_SPEED = 1f; //磁盘旋转的速度
- private final float DEFUALT_PICTURE_RAUID = 200; //中间图片默认半径
- private final float DEFUALT_PAUSE_NEEDLE_DEGREE = -45; //暂停状态时唱针的旋转角度
- private final float DEFUALT_PLAYING_NEEDLE_DEGREE = -15; //播放状态时唱针的旋转角度
- private int pictrueRadio; //中间图片的半径
- //指针
- private int smallCircleRadiu = 10; //唱针顶部小圆半径,减小了一半
- private int bigCircleRadiu = 15; //唱针顶部大圆半径,减小了一半
- private int shortArmLength;
- private int longArmleLength; // 唱针手臂,较长那段的长度
- private int shortHeadLength; // 唱针的头,较短那段的长度
- private int longHeadLength;
- private Paint needlePaint;
- //唱片
- private float halfMeasureWidth;
- private int diskRingWidth; // 黑色圆环宽度
- private float diskRotateSpeed; // 唱片旋转速度
- private Bitmap pictureBitmap;
- private Paint diskPaint;
- //状态控制
- private boolean isPlaying;
- private float currentDiskDegree; // 唱片旋转角度
- private float currentNeddleDegree = DEFUALT_PLAYING_NEEDLE_DEGREE; // 唱针旋转角度
- public GramophoneView(Context context) {
- this(context,null);
- }
- public GramophoneView(Context context, @Nullable AttributeSet attrs) {
- super(context, attrs);
- needlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿
- diskPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.GramophoneView);
- // 拿到xml中的图片和图片半径和,旋转的度数
- pictrueRadio = (int) typedArray.getDimension(R.styleable.GramophoneView_picture_radiu, DEFUALT_PICTURE_RAUID);
- diskRotateSpeed = typedArray.getFloat(R.styleable.GramophoneView_disk_rotate_speed, DEFUALT_DISK_ROTATE_SPEED);
- Drawable drawable = typedArray.getDrawable(R.styleable.GramophoneView_src);
- if (drawable == null) {
- pictureBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
- } else {
- pictureBitmap = ((BitmapDrawable)drawable).getBitmap();
- }
- //初始化唱片的变量
- diskRingWidth = pictrueRadio >> 1;
- shortHeadLength = (pictrueRadio + diskRingWidth) / 15; //图片半径和黑色圆环的和 等于 指针的总长度
- longHeadLength = shortHeadLength << 1; //左移相当于乘以2
- shortArmLength = longHeadLength << 1;
- longArmleLength = shortArmLength << 1;
- }
- /**
- * 理想的宽高是,取决于picture的 半径的
- *
- * @param widthMeasureSpec
- * @param heightMeasureSpec
- */
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- //我们想要的理想宽高
- int width = (pictrueRadio+diskRingWidth)*2;
- int hight = (pictrueRadio+diskRingWidth)*2+longArmleLength;
- //根据我们理想的宽和高 和xml中设置的宽高,按resolveSize规则做最后的取舍
- //resolveSize规则 1、精确模式,按
- int measurewidth = resolveSize(width,widthMeasureSpec);
- int measurehight = resolveSize(hight,heightMeasureSpec);
- setMeasuredDimension(measurewidth,measurehight);//设置测量的长度
- }
- @Override
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- halfMeasureWidth = getMeasuredWidth() >> 1;
- drawDisk(canvas); //画唱片
- drawNeedle(canvas);//画指针
- if (currentNeddleDegree > DEFUALT_PAUSE_NEEDLE_DEGREE) {
- invalidate();
- }
- }
- private void drawNeedle(Canvas canvas) {//指针
- canvas.save();//保存
- //移动坐标原点,画指针第一段
- canvas.translate(halfMeasureWidth, 0);
- canvas.rotate(currentNeddleDegree);
- needlePaint.setColor(Color.parseColor("#C0C0C0"));
- needlePaint.setStrokeWidth(10);
- canvas.drawLine(0, 0, 0, longArmleLength, needlePaint);
- //画指针第二段
- canvas.translate(0, longArmleLength);
- canvas.rotate(-30);//
- needlePaint.setStrokeWidth(10);
- canvas.drawLine(0, 0, 0, shortArmLength, needlePaint);
- //画指针第三段
- canvas.translate(0, shortArmLength);
- needlePaint.setStrokeWidth(15);
- canvas.drawLine(0, 0, 0, longHeadLength, needlePaint);
- //画指针的第四段
- canvas.translate(0, longHeadLength);
- needlePaint.setStrokeWidth(25);
- canvas.drawLine(0, 0, 0, shortHeadLength, needlePaint);
- canvas.restore();
- //画指针的支点
- canvas.save();
- canvas.translate(halfMeasureWidth, 0);
- needlePaint.setColor(Color.parseColor("#8A8A8A"));
- needlePaint.setStyle(Paint.Style.FILL);
- canvas.drawCircle(0, 0, bigCircleRadiu, needlePaint);
- needlePaint.setColor(Color.parseColor("#C0C0C0"));
- canvas.drawCircle(0, 0, smallCircleRadiu, needlePaint);
- canvas.restore();
- //当前如果是播放的话,就移动到播放的位置 ,因为逆时针旋转度数是负的所以,- + 需要注意
- if (isPlaying) {
- if (currentNeddleDegree < DEFUALT_PLAYING_NEEDLE_DEGREE) { //不是暂停状态,就是播放状态,或者是切换中状态
- currentNeddleDegree += 3; //切换中状态指针是要有动画效果的,所有要改变指针的度数
- }
- } else {
- if (currentNeddleDegree > DEFUALT_PAUSE_NEEDLE_DEGREE) {
- currentNeddleDegree -= 3;
- }
- }
- }
- private void drawDisk(Canvas canvas) {
- currentDiskDegree = currentDiskDegree % 360 + diskRotateSpeed;
- canvas.save();
- canvas.translate(halfMeasureWidth, longArmleLength + diskRingWidth + pictrueRadio);
- canvas.rotate(currentDiskDegree);
- diskPaint.setColor(Color.BLACK);
- diskPaint.setStyle(Paint.Style.STROKE);
- diskPaint.setStrokeWidth(pictrueRadio / 2);
- // diskPaint.setStrokeWidth(20);
- canvas.drawCircle(0, 0, pictrueRadio + diskRingWidth / 2, diskPaint);
- Path path = new Path(); // 裁剪的path路径 (为了裁剪成圆形图片,其实是将画布剪裁成了圆形)
- path.addCircle(0, 0, pictrueRadio, Path.Direction.CW);
- canvas.clipPath(path);
- Rect src = new Rect(); //将要画bitmap的那个范围
- src.set(0, 0, pictureBitmap.getWidth(), pictureBitmap.getHeight());
- Rect dst = new Rect();
- dst.set(-pictrueRadio, -pictrueRadio, pictrueRadio, pictrueRadio); //将要将bitmap画要坐标系的那个位置
- canvas.drawBitmap(pictureBitmap, src, dst, null);
- canvas.restore();
- }
- public void pauseOrstart(){
- isPlaying =!isPlaying;
- invalidate();
- }
- /**
- * 设置图片半径
- *
- * @param pictureRadius 图片半径
- */
- public void setPictureRadius(int pictureRadius) {
- this.pictrueRadio = pictureRadius;
- }
- /**
- * 设置唱片旋转速度
- *
- * @param diskRotateSpeed 旋转速度
- */
- public void setDiskRotateSpeed(float diskRotateSpeed) {
- this.diskRotateSpeed = diskRotateSpeed;
- }
- /**
- * 设置图片资源id
- *
- * @param resId 图片资源id
- */
- public void setPictureRes(int resId) {
- pictureBitmap = BitmapFactory.decodeResource(getContext().getResources(), resId);
- invalidate();
- }
- }
mainActivity.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- tools:context="com.example.jinmuyan.phonograph.MainActivity">
- <com.example.jinmuyan.phonograph.GramophoneView
- android:id="@+id/gramophone"
- app:src="@drawable/lang"
- app:picture_radiu="80dp"
- app:disk_rotate_speed="1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <Button
- android:layout_marginTop="60dp"
- android:onClick="pauseOrstart"
- android:text="切换播放状态"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content" />
- </LinearLayout>
MainActivity
- public class MainActivity extends AppCompatActivity {
- private GramophoneView gramophoneView;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- gramophoneView = (GramophoneView) findViewById(R.id.gramophone);
- }
- public void pauseOrstart(View view) {
- gramophoneView.pauseOrstart();
- }
- }
自定义View_留声机效果相关推荐
- Flutter RichText支持自定义文本溢出效果
extended text 相关文章 Flutter RichText支持图片显示和自定义图片效果 Flutter RichText支持自定义文本溢出效果 Flutter RichText支持自定义文 ...
- android 自定义刷新控件,Android开发中MJRefresh自定义刷新动画效果
有时候我们对自己开发的项目经常不满意,但是我们要达到自定义刷新动画的效果有一定的难度,别着急,下面爱站技术频道和大家分享Android开发中MJRefresh自定义刷新动画效果,一起来学习吧! [一] ...
- Android自定义类似ProgressDialog效果的Dialog
2019独角兽企业重金招聘Python工程师标准>>> Android自定义类似ProgressDialog效果的Dialog. 方法如下: 1.首先准备两张自己要定义成哪样子的效果 ...
- Android使用xml自定义软键盘效果(附源码)
Android使用xml自定义软键盘效果原理: 1,软键盘其实是个控件,使用android.inputmethodserver.KeyboardView类定义. 2,主布局中使用帧布局,当我们需要显示 ...
- android自定义控件颜色渐变,Android编程实现自定义渐变颜色效果详解
本文实例讲述了Android编程实现自定义渐变颜色效果.分享给大家供大家参考,具体如下: 你是否已经厌恶了纯色的背景呢?那好,Android提供给程序员自定义渐变颜色的接口,让我们的界面炫起来吧. x ...
- [Android]自定义View带效果的滚动数字
[Android]自定义View带效果的滚动数字 @Author GQ 2016年07月29日 一个可以让数字滚动的View,可以自定义参数,是想要的那种效果! 原文github地址 效果图 Andr ...
- Unity 实现自定义图片破碎效果-2D_Destruction
Unity 实现自定义图片破碎效果-2D_Destruction 导引 效果预览 源码下载地址 实现流程 1.添加SrpiteRenderer组件 2.添加Explodable组件 3.Polygon ...
- R语言ggplot2可视化:通过在element_text函数中设置标签字体大小列表和标签字体形式列表自定义标签可视化效果
R语言ggplot2可视化:通过在element_text函数中设置标签字体大小列表和标签字体形式列表自定义标签可视化效果 目录
- html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
最新文章
- Python 读取文本时的 read/readline/readlines
- python pyside简单布局_python – pyside显示/隐藏布局
- 解决问题:EnvironmentLocationNotFound: Not a conda environment: /anaconda3/envs/anaconda3
- Centos7安装netstat及简单使用
- halcon edges_sub_pix算子
- 栈和队列之设计一个有getMin(得到最小值)功能的栈
- POE交换机产品如何设计防雷保护?
- [Redux/Mobx] 举例说明怎么在redux中定义action?
- thinkphp Hook行为的使用案例
- ebook_7种开放式eBook格式指南
- 【华为云技术分享】在 K8S 大规模场景下 Service 性能如何优化?
- java.util.concurrent.RejectedExecutionException: event executor terminated 错误分析
- unix 网络编程总结
- STL--queue
- 小白Linux入门之:终端复用器Tmux使用参考
- python设计查询余额程序_使用Python调取任意数字资产钱包余额功能
- c++操作打印机那些事
- 第五章:项目范围管理 - (5.4 创建 WBS )
- MATLAB | 好看的配对箱线图绘制模板
- 理解Spring 容器设计理念
热门文章
- 网络故障维修顺序步骤
- JSTA:将空间转录组原始数据转换成单细胞水平空间表达谱的专用工具
- katakana.php,半角片假名 全角片假名转换器 - Hi!Penpal!
- C++ 类的成员函数
- 万豪旅享家“双十一”惊喜大促于飞猪旅行火热开启;山东山印格兰云天大酒店正式开业 | 全球旅报...
- 程序员怎样提高项目管理意识
- 解决steam vr游戏 aircar 进入游戏只能前进和后退的问题
- 会生活会编程——我的极简主义尝试
- IT职业培训尝试突围-东方标准发布《中国IT从业人员心理特征研究报告》
- Easy Paint Tool SAI 2.0+62种笔刷 超级好用的画图软件