Android实现仿网易云音乐黑胶唱片效果

已于 2023-05-31 00:28:02 修改
阅读量741 收藏 2
点赞数
分类专栏： 开发实例 文章标签： android java android studio
于 2023-05-30 23:53:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012556114/article/details/130959537
版权

Android实现仿网易云音乐黑胶唱片效果

前言：

网易云音乐的黑胶唱片效果一直是很多音乐迷的最爱，之前实现过此效果，今天总结一下，直接上代码：

1.自定义圆形ImageView:

package com.example.vinylrecordplayer.view

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatImageView
import com.example.vinylrecordplayer.R

/**
 * @author: njb
 * @date: 2023/5/21 22:56
 * @desc:
 */
@Suppress("NAME_SHADOWING")
class RoundImageView : AppCompatImageView {
    private val paint: Paint by lazy { Paint() }
    private var roundWidth = 10
    private var roundHeight = 10
    private val paint2: Paint by lazy { Paint() }

    constructor(context: Context, attrs: AttributeSet?, defStyle: Int) : super(
        context,
        attrs,
        defStyle
    ) {
        init(context, attrs)
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init(context, attrs)
    }

    constructor(context: Context) : super(context) {
        init(context, null)
    }

    @SuppressLint("Recycle")
    private fun init(context: Context, attrs: AttributeSet?) {
        if (attrs != null) {
            val attrs = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView)
            roundWidth = attrs.getDimensionPixelSize(R.styleable.RoundImageView_x_radius, roundWidth)
            roundHeight = attrs.getDimensionPixelSize(R.styleable.RoundImageView_y_radius, roundHeight)
        } else {
            val density = context.resources.displayMetrics.density
            roundWidth = (roundWidth * density).toInt()
            roundHeight = (roundHeight * density).toInt()
        }
        paint.color = Color.WHITE
        paint.isAntiAlias = true
        paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
    }

    override fun draw(canvas: Canvas) {
        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        val canvas2 = Canvas(bitmap)
        super.draw(canvas2)
        drawLiftUp(canvas2)
        drawLiftDown(canvas2)
        drawRightUp(canvas2)
        drawRightDown(canvas2)
        canvas.drawBitmap(bitmap, 0f, 0f, paint2)
        bitmap.recycle()
    }

    private fun drawLiftUp(canvas: Canvas) {
        val path = Path()
        path.moveTo(0f, roundHeight.toFloat())
        path.lineTo(0f, 0f)
        path.lineTo(roundWidth.toFloat(), 0f)
        path.arcTo(
            RectF(0f, 0f, (roundWidth * 2).toFloat(), (roundHeight * 2).toFloat()),
            -90f,
            -90f
        )
        path.close()
        canvas.drawPath(path, paint)
    }

    private fun drawLiftDown(canvas: Canvas) {
        val path = Path()
        path.moveTo(0f, (height - roundHeight).toFloat())
        path.lineTo(0f, height.toFloat())
        path.lineTo(roundWidth.toFloat(), height.toFloat())
        path.arcTo(
            RectF(
                0f,
                (height - roundHeight * 2).toFloat(),
                (roundWidth * 2).toFloat(),
                height.toFloat()
            ), 90f, 90f
        )
        path.close()
        canvas.drawPath(path, paint)
    }

    private fun drawRightDown(canvas: Canvas) {
        val path = Path()
        path.moveTo((width - roundWidth).toFloat(), height.toFloat())
        path.lineTo(width.toFloat(), height.toFloat())
        path.lineTo(width.toFloat(), (height - roundHeight).toFloat())
        path.arcTo(
            RectF(
                (width - roundWidth * 2).toFloat(),
                (height - roundHeight * 2).toFloat(),
                width.toFloat(),
                height.toFloat()
            ), -0f, 90f
        )
        path.close()
        canvas.drawPath(path, paint)
    }

    private fun drawRightUp(canvas: Canvas) {
        val path = Path()
        path.moveTo(width.toFloat(), roundHeight.toFloat())
        path.lineTo(width.toFloat(), 0f)
        path.lineTo((width - roundWidth).toFloat(), 0f)
        path.arcTo(
            RectF(
                (width - roundWidth * 2).toFloat(),
                0f,
                width.toFloat(),
                (roundHeight * 2).toFloat()
            ), -90f, 90f
        )
        path.close()
        canvas.drawPath(path, paint)
    }
}

2.自定义悬浮窗按钮：

package com.example.vinylrecordplayer.view

import android.content.Context
import android.util.AttributeSet
import android.view.Gravity
import android.view.MotionEvent
import android.view.View
import android.widget.LinearLayout
import com.example.vinylrecordplayer.R
import com.example.vinylrecordplayer.utils.DisplayUtils
import com.example.vinylrecordplayer.utils.DisplayUtils.dip2px
import kotlinx.android.synthetic.main.play_music_rotate.view.*
import kotlin.math.abs


/**
 * des 自定义音乐悬浮按钮
 * @date 2020/6/28
 * @author njb
 */
class FloatPlayLayout : LinearLayout {
    /**
     * content应该展示的宽度
     */
    private val contentWidth = dip2px(context, 180f)

    constructor(context: Context) : super(context) {
        initView(context)
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        initView(context)
    }

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        initView(context)
    }

    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                moveY = ev.y
            }
            MotionEvent.ACTION_MOVE -> {
                //兼容某些机型一碰就触发滑动
                if (abs(ev.y - moveY) > 100) {
                    return true
                }
            }
        }
        return false
    }

    private var moveY = 0f
    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_MOVE -> {
                var offsetY = translationY + (event.y - moveY)
                //因为translationY不管处于ViewGroup什么位置，初始值都为0，所以要买个top
                //最小值
                if (offsetY < -top + dip2px(context, 100f)) {
                    offsetY = -top.toFloat() + dip2px(context, 100f)
                }
                //最大值
                if (offsetY > DisplayUtils.getScreenHeight(context) - top - dip2px(context, 150f)) {
                    offsetY = DisplayUtils.getScreenHeight(context) - top.toFloat() - dip2px(
                        context,
                        150f
                    )
                }
                translationY = offsetY
                return true
            }
        }
        return super.onInterceptTouchEvent(event)
    }

    private fun initView(context: Context) {
        View.inflate(context, R.layout.play_music_rotate, this)
        //居中显示
        gravity = Gravity.CENTER
        //设置阴影
        click()
    }

    /**
     * 事件
     */
    private fun click() {

    }

    /**
     * 悬浮窗点击事件
     */
    fun rootClick(onClick: (View) -> Unit) {
        anchorLiveMusic.clickNoRepeat {
            onClick.invoke(it)
        }
    }
}

/**
 * 防止重复点击
 * @param interval 重复间隔
 * @param onClick  事件响应
 */
var lastTime = 0L
fun View.clickNoRepeat(interval: Long = 400, onClick: (View) -> Unit) {
    setOnClickListener {
        val currentTime = System.currentTimeMillis()
        if (lastTime != 0L && (currentTime - lastTime < interval)) {
            return@setOnClickListener
        }
        lastTime = currentTime
        onClick(it)
    }
}

3.自定义旋转的唱片view:

package com.example.vinylrecordplayer.view;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.widget.FrameLayout;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.example.vinylrecordplayer.R;


/**
 * @author: njb
 * @date: 2021/5/25 16:34
 * @desc: 描述
 */
public class RotateAlbumView extends FrameLayout {
    private static final String TAG = "RotateAlbumView";

    private ImageView ivAlbumPic;
    private ObjectAnimator animator;

    public RotateAlbumView(@NonNull Context context) {
        this(context, null);
    }

    public RotateAlbumView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RotateAlbumView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    // 设置旋转动画(属性动画)
    private void init(Context context) {
        View.inflate(context, R.layout.view_rotate_album, this);
        ivAlbumPic = (ImageView) findViewById(R.id.view_pic);
        animator = ObjectAnimator.ofFloat(ivAlbumPic, "rotation", 0.0F, 360.0F);
        animator.setDuration(5 * 1000);
        animator.setInterpolator(new LinearInterpolator());
        animator.setRepeatCount(ObjectAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        setPlaying(true);
    }

    // 更新播放状态
    public void setPlaying(boolean isPlaying) {
        Log.d(TAG, "update RotateAlbumView: isPlaying = " + isPlaying);
        if (isPlaying) {
            if (!animator.isRunning()) {
                animator.start();
            } else {
                animator.resume();
            }
        } else {
            if (!animator.isStarted() || !animator.isRunning()) {
                animator.cancel();
            }
            animator.pause();
        }
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);

    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        Log.d(TAG, "RotateAlbumView: onDetachedFromWindow");
        animator.cancel();
    }
}

4.自定义黑胶效果：

package com.example.vinylrecordplayer.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.ColorInt;
import androidx.annotation.ColorRes;
import androidx.annotation.Nullable;

import com.example.vinylrecordplayer.R;


/**
 * @author: njb
 * @date: 2021/5/25 16:35
 * @desc: 描述
 */
public class VinylRecordView extends View {
    private Paint paint;
    // 圆环半径
    private int ringWidth;
    // 渐变色
    private int[] colors;
    private SweepGradient gradient;
    // 圆线距圆环内边的距离
    private int[] ringLinesMarginOut = {
            dp2px(3.78F),
            dp2px(7.03F),
            dp2px(10.27F),
            dp2px(12.97F)
    };
    // 圆线高度
    private int ringLineWidth;

    public VinylRecordView(Context context) {
        this(context, null);
    }

    public VinylRecordView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public VinylRecordView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeCap(Paint.Cap.ROUND);
        colors = new int[]{getColor(R.color.widget_album_ring_color1), getColor(R.color.widget_album_ring_color2),
                getColor(R.color.widget_album_ring_color1), getColor(R.color.widget_album_ring_color2),
                getColor(R.color.widget_album_ring_color1)};

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.VinylRecordView);
        ringWidth = (int) typedArray.getDimension(R.styleable.VinylRecordView_ring_width, getResources().getDimension(R.dimen.widget_album_ring_width));
        ringLineWidth = (int) typedArray.getDimension(R.styleable.VinylRecordView_ring_line_width, getResources().getDimension(R.dimen.widget_album_ring_line_width));
        typedArray.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setStrokeWidth(ringWidth);
        paint.setColor(getColor(R.color.widget_album_ring_color1));
        if (gradient == null) {
            gradient = new SweepGradient(getWidth() * 0.5F, getHeight() * 0.5F, colors, new float[]{
                    0F, 0.25F, 0.5F, 0.75F, 1F
            });
        }
        paint.setShader(gradient);
        canvas.drawCircle(getWidth() * 0.5F, getHeight() * 0.5F, (getWidth() - ringWidth) * 0.5F, paint);
        paint.setShader(null);
        paint.setStrokeWidth(ringLineWidth);
        paint.setColor(getColor(R.color.widget_album_ring_line_color));
        for (int marginOut : ringLinesMarginOut) {
            canvas.drawCircle(getWidth() * 0.5F, getHeight() * 0.5F, getWidth() * 0.5F - marginOut - ringLineWidth * 0.5F, paint);
        }
    }

    private int dp2px(float dp) {
        float scale = getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5F);
    }

    @ColorInt
    private int getColor(@ColorRes int colorId) {
        return getResources().getColor(colorId, null);
    }
}

5.MainActivity使用：

package com.example.vinylrecordplayer

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initView()
    }

    private fun initView() {
        floatMusic.rootClick {
            Toast.makeText(this@MainActivity,"点击了悬浮窗",Toast.LENGTH_SHORT).show()
        }
    }
}

6.主界面代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <com.example.vinylrecordplayer.view.FloatPlayLayout
        android:id="@+id/floatMusic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

7.实现效果如下：

在这里插入图片描述

8.源码地址：

https://gitee.com/jackning_admin/vinyl-record-demo

淡淡的香烟
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android高仿网易云音乐OkHttp+Retrofit+RxJava+Glide+MVC+MVVM
爱学啊教育的博客，ixuea.com
07-03 1235
这是一个使用Java（以后还会推出Kotlin版本）语言，从0开发一个Android平台，接近企业级的项目（我的云音乐），包含了基础内容，高级内容，项目封装，项目重构等知识；主要是使用系统功能，流行的第三方框架，第三方服务，完成接近企业级商业级项目。...
Android 仿网易云鲸云音效动效
code小生
01-04 2043
code小生,一个专注 Android 领域的技术平台公众号回复 Android 加入我的安卓技术群作者：Tyhj链接：https://www.jianshu.com/p...
仿网易云音乐 安卓版
05-08
仿网易云音乐安卓版客户端
Android史上最牛逼的音乐播放器—仿网易云音乐
09-13
前言：音乐播放器倒见过不少，做到几乎和官方网易云音乐安卓版差不多的，还是头第一回见。aa112901的这款仿网易云音乐安卓版客户端，很多地方值得我们学习。无论是下载模块，还是换肤模块，还是炫丽的UI界面。等。用心在每一个细节。
0.Android高仿网易云音乐OkHttp+Retrofit+RxJava+Glide+MVC+MVVM
Pich的博客
07-24 2218
这是一个使用Java（以后还会推出Kotlin版本）语言，从0开发一个Android平台，接近企业级的项目（我的云音乐），包含了基础内容，高级内容，项目封装，项目重构等知识；主要是使用系统功能，流行的...
Android 仿网易云音乐App
热门推荐
RikkaTheWorld
10-24 2万+
因为工作实在是有点忙，所以还没完成成品，就先挂到GitHub上。日后慢慢更新啦。
Android自定义View实现仿网易音乐唱片播放效果
01-21
本文实例为大家分享了Android实现仿网易音乐唱片播放效果的具体代码，供大家参考，具体内容如下 效果图： 在values中创建attrs.xml文件 <?xml version=1.0 encoding=utf-8?> ...
仿云音乐黑胶唱片，以及播放音乐基本功能
02-14
"仿云音乐黑胶唱片"是一个项目，旨在模仿云音乐的特色，同时具备播放音乐的基本功能，如播放、暂停、切换歌曲以及调整播放进度。在这个项目中，我们可以探讨几个关键的知识点： 1. **用户界面（UI）设计**： - **...
仿云音乐黑胶唱片，以及在线歌词搜索等功能
02-22
仿云音乐黑胶唱片，以及在线歌词搜索等功能 跟之前上传的相比，多了： 1.歌词显示（实现歌词滚动功能） 2.来电监听 3.控制音量 4.在线歌词搜索，下载功能 5.修复了当手机锁屏，解锁后歌词进度等信息还是之前一首歌...
安卓Android源码——仿唱片机音乐播放器.zip
10-12
【安卓Android源码——仿唱片机音乐播放器】 在安卓平台上开发一款仿唱片机音乐播放器，是一项结合了设计美学和技术挑战的任务。该压缩包包含了实现这一目标的源代码和相关资源，帮助开发者理解如何在Android系统上...
Android仿网易云音乐播放界面
01-05
现在很多的播放器的播放界面都是采用光盘的转动，下面是我仿造网易的播放界面。先上两张图： 第一张为播放前的界面，第二张为点击播放按钮的图片。布局文件如下： <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width=match_parent android:layout_height=match_parent android:background=#ffffff> <LinearLayout android:layou
Android仿网易云音乐播放转盘界面
09-30
Android仿网易云音乐播放转盘界面
Android stuido 仿网易云音乐播放界面
06-05
网易云音乐是一款非常优秀的音乐播放器，尤其是播放界面，使用唱盘机风格，显得格外古典优雅。笔者出于学习与挑战的想法，思考播放界面背后的实现原理，并写了一个小程序。   笔者尽可能地去模仿官方的视觉、交互效果，其中包括了唱盘与唱针切换时的细节处理、背景渐变等。本文将会分享一些视觉效果实现的方法以及设计思想，但难免有错漏之处。若读者发现有错误的地方或者更好的实现方法，请留言回复，希望与大家共同进步。
Android Tabhost高仿网易云音乐客户端的Home页面切换 源码
10-11
高仿网易云音乐客户端的Home页面切换Tabhost，并且三角形是透明的， 实现方式，自定义AnimTabsView继承 RelativeLayout 里面对当前选中的item 处理 三角形变成透明效果， 即在onDraw 里面对三角形图片经行透明度处理，AnimTabsView提供 setOnAnimTabsItemViewChangeListener 方法的onChange()用来监听点击切换tabhost.
黑胶唱片效果案例（颜色渐变）.zip
08-07
例如，开发者可能使用JavaScript和CSS的伪类（如:hover）来实现当用户鼠标悬停在某个元素上时改变其渐变色，或者使用requestAnimationFrame动画框架来创建平滑的黑胶唱片旋转效果。 总结来说，这个压缩包提供了一个...
Android 仿网易云音乐App(1)
最新发布
2401_83329718的博客
03-27 774
其实客户端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。然而Android架构学习进阶是一条漫长而艰苦的道路，不能靠一时激情，更不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。贵在坚持！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！习的习惯。贵在坚持！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，
【附源码】Java计算机毕业设计安卓仿网易云音乐客户端APP（程序+LW+部署）
wek106的博客
03-26 701
项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：java+ mybatis + Maven等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA。
android 模拟黑胶唱片,VinylTap：完美模拟黑胶碟 可翻面可调速
weixin_39801356的博客
05-31 782
【搜狐IT消息】北京时间5月22日消息，《移动新发现》今日报道，Vinyl Tap是一款制作精良、效果逼真的iPad虚拟留声机应用，它能让用户的iPad平板电脑“变身”为留声机，像播放老式黑胶唱片一样播放曲库中的专辑或单曲。Vinyl Tap虽然留声机早已成为“古董”，目前只有极少数音乐发烧友仍在使用，但黑胶唱片温润和谐、忠于原声的音质依然让很多人怀念不已，于是随着移动终端渐渐得以普及，各种各样的...
Android开源音乐播放器之高仿云音乐黑胶唱片
weixin_34384681的博客
01-10 654
系列文章 Android开源在线音乐播放器——波尼音乐 Android开源音乐播放器之播放器基本功能 Android开源音乐播放器之高仿云音乐黑胶唱片 Android开源音乐播放器之自动滚动歌词 Android开源音乐播放器之在线音乐列表自动加载更多 前言 上一节我们讨论了一个音乐播放器应该具有的功能，当我们实现了这些功能后，就该考虑如何扩展这些功能了。本节我们要讲的就是专辑封面的美化，看了市...
html加css 实现黑胶唱片播放机
06-28
要实现黑胶唱片播放机，我们需要先了解黑胶唱片播放机的外观和典型的元素，例如唱片盘、扬声器、音调控制、音量控制和播放暂停控制等。然后，我们需要用HTML创建一个类似的页面，包括所有必需的元素。 接下来，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值