android幻灯片效果自定义,Android自定义View实现仿网易音乐唱片播放效果
本文实例为大家分享了Android实现仿网易音乐唱片播放效果的具体代码,供大家参考,具体内容如下
效果图:
在values中创建attrs.xml文件
//中间图片的半径
//图片
//唱片旋转的速度
创建GramophoneView
public class GramophoneView extends View {
/**
* 尺寸计算设计说明:
* 1、唱片有两个主要尺寸:中间图片的半径、黑色圆环的宽度。
* 黑色圆环的宽度 = 图片半径的一半。
* 2、唱针分为“手臂”和“头”,手臂分两段,一段长的一段短的,头也是一段长的一段短的。
* 唱针四个部分的尺寸求和 = 唱片中间图片的半径+黑色圆环的宽度
* 唱针各部分长度 比例——长的手臂:短的手臂:长的头:短的头 = 8:4:2:1
* 3、唱片黑色圆环顶部到唱针顶端的距离 = 唱针长的手臂的长。度
*/
private final float DEFUALT_DISK_ROTATE_SPEED = 1f;
private final float DEFAULT_PICTURE_RADIU = 200; // 中间图片默认半径
private final float DEFUALT_PAUSE_NEEDLE_DEGREE = -45; // 暂停状态时唱针的旋转角度
private final float DEFUALT_PLAYING_NEEDLE_DEGREE = -15; // 播放状态时唱针的旋转角度
private int pictureRadiu; // 中间图片的半径
//指针
private int smallCircleRadiu = 20; // 唱针顶部小圆半径
private int bigCircleRadiu = 30; // 唱针顶部大圆半径
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中的图片和图片半径和,旋转的度数
pictureRadiu = (int) typedArray.getDimension(R.styleable.GramophoneView_picture_radiu, DEFAULT_PICTURE_RADIU);
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 = pictureRadiu >> 1;
shortHeadLength = (pictureRadiu + 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 = (pictureRadiu + diskRingWidth) * 2;
int hight = (pictureRadiu + diskRingWidth) * 2 + longArmleLength;
//根据我们理想的宽和高 和xml中设置的宽高,按resolveSize规则做最后的取舍
//resolveSize规则 1、精确模式,按
int measureWidth = resolveSize(width, widthMeasureSpec);
int measureHeight = resolveSize(hight, heightMeasureSpec);
setMeasuredDimension(measureWidth, measureHeight);
}
@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 drawDisk(Canvas canvas) {
currentDiskDegree = currentDiskDegree % 360 + diskRotateSpeed;
canvas.save();
canvas.translate(halfMeasureWidth, longArmleLength + diskRingWidth + pictureRadiu);
canvas.rotate(currentDiskDegree);
diskPaint.setColor(Color.BLACK);
diskPaint.setStyle(Paint.Style.STROKE);
diskPaint.setStrokeWidth(pictureRadiu / 2);
canvas.drawCircle(0, 0, pictureRadiu + diskRingWidth / 2, diskPaint);
Path path = new Path(); // 裁剪的path路径 (为了裁剪成圆形图片,其实是将画布剪裁成了圆形)
path.addCircle(0, 0, pictureRadiu, 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(-pictureRadiu, -pictureRadiu, pictureRadiu, pictureRadiu); //将要将bitmap画要坐标系的那个位置
canvas.drawBitmap(pictureBitmap, src, dst, null);
canvas.restore();
}
private void drawNeedle(Canvas canvas) {
canvas.save();
//移动坐标原点,画指针第一段
canvas.translate(halfMeasureWidth, 0);
canvas.rotate(currentNeddleDegree);
needlePaint.setColor(Color.parseColor("#C0C0C0"));
needlePaint.setStrokeWidth(20);
canvas.drawLine(0, 0, 0, longArmleLength, needlePaint);
//画指针第二段
canvas.translate(0, longArmleLength);
canvas.rotate(-30);
canvas.drawLine(0, 0, 0, shortArmLength, needlePaint);
//画指针第三段
canvas.translate(0, shortArmLength);
needlePaint.setStrokeWidth(30);
canvas.drawLine(0, 0, 0, longHeadLength, needlePaint);
//画指针的第四段
canvas.translate(0, longHeadLength);
needlePaint.setStrokeWidth(45);
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;
}
}
}
public void pauseOrstart() {
isPlaying = !isPlaying;
invalidate();
}
/**
* 设置图片半径
*
* @param pictureRadius 图片半径
*/
public void setPictureRadius(int pictureRadius) {
this.pictureRadiu = 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();
}
}
activity_main.xml
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.customrecord.MainActivity">
android:id="@+id/gramopone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:disk_rotate_speed="1"
app:picture_radiu="80dp"
app:src="@drawable/land" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:onClick="pauseOrstart"
android:text="切换播放状态" />
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.gramopone);
}
public void pauseOrstart(View view) {
gramophoneView.pauseOrstart();
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android幻灯片效果自定义,Android自定义View实现仿网易音乐唱片播放效果相关推荐
- axure源文件_Axure教程:实现网易云音乐有声播放效果
为了方便讲解,我们首先在桌面新建一个文件夹,命名为音乐.1.将自己想要演示播放的MP3音乐文件放在这个文件夹里面.2.给播放页添加一个中继器,随便命名,我给它命名为[音乐地址链接器],用来链接播放本地 ...
- Android自定义View之仿QQ运动步数进度效果
文章目录 前言 先看效果图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6e4ddec17933496ea4830fa08d8ffbe5.png?x-oss-pr ...
- android 自定义view实现仿QQ运动步数进度效果
最近公司在策划一个新的项目,原型还没出来,再说这公司人都要走没了,估计又要找工作了,所以必须要学习,争取每个写个关于自定义view方面的,这样几个月积累下来,也能学习到东西,今天就带来简单的效果,就是 ...
- 自定义View之仿QQ运动步数进度效果
前言 今天接着上一篇来写关于自定义View方面的东西,我是近期在学习整理这方面的知识点,所以把相关的笔记都放到这个Android自定义View的专栏里了,方便自己下次忘记的时候能回来翻翻,今天的内容是 ...
- 自定义 View 之仿 QQ 步数变动动画效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此 博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
- android 仿QQ音乐歌单效果
最新的项目里面,有一个需求比较好玩,就是要仿造下QQ音乐里面的歌单上下切换效果,如下 先做一个类似的效果,测试效果如下: 而为了快速开发,不花时间在制造轮子上面,我选用是的zhy大神的一个自定义lay ...
- android usb dac,使用USB DAC来提升红米Note的音频播放效果
本人红米Note(移动4G单卡版)用户,外加320KBps MP3党一枚,喜欢听欧美流行,偶尔听听无损.最爱用的是网易云音乐和美乐时光,歌曲丰富,使用方便. 大多数Android手机播放音频的质量都一 ...
- 实现 酷狗音乐 歌词播放效果
今天将为大家带来 粗略版 酷狗音乐 歌词播放的效果.我们一步一步来.首先做这个是因为有一次公司项目中需要做一个汽车扫描效果的时候,想到来做这个歌词播放效果的.那么我们这次先上效果图: 好的上面的文字是 ...
- 高仿网易新闻栏目动画效果
tyktfj0910 的博客地址:http://blog.csdn.net/tyk0910 效果预览 今天准备用RecyclerView来实现网易新闻Tabs的动态效果.先看效果图: 点击下面的Rec ...
最新文章
- python 删除列表中的指定元素
- Linux_NFS/Samba服务器
- js判断浏览器\屏幕分辨率(转载)
- java---24点游戏 :从扑克中每次取出4张牌,使用加减乘除,第一个能得出24者为赢。
- 读WAF与IPS的区别总结之摘抄
- 魅蓝android底层是什么,魅蓝E2的手机系统是什么
- android 进程管理机制,Android的进程管理机制
- 手写一切(updating...)
- mysql 系统变量_MySQL系统变量(查看和修改)
- 金3银4面试前,把自己弄成卷王
- html语言中alt,html中alt的用法
- defineExpose暴露
- 基于Tofino2的64X100GE高性能可编程交换机MX7636-64X
- CDH主机网络接口似乎未以全速运行
- C++ POCO库(访问数据库,版本问题,本人配置失败)
- 【5G系列】MICO学习总结(2)
- 基于Java的网络编程实践
- 2008年中国电子商务十大时刻
- 前端学习笔记之流程控制语句和数组(六)
- 指数的计算方法介绍!