Android实现网易云音乐的旋转专辑View

本文实例为大家分享了Android实现网易云音乐的旋转专辑View,供大家参考,具体内容如下

一.前言

最近做过 类似网易云音乐专辑唱片的效果,这里记录下开发思路,仅供参考。但需求不完全与网易云音乐一样,这个只有图片会旋转(网易云是整个磁盘都会旋转),没有唱片机械臂。

二.思路

如下图,我这里是分为 圆形背景+旋转的方形图片+渐变圆环

三.关键代码

1. 圆形背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"

 android:shape="oval">
 <size
  android:width="1dp"
  android:height="1dp" />
 <solid android:color="#1AFFFFFF" />
</shape>

2.旋转的方形图片

// 设置旋转动画(属性动画)
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(10 * 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();
  }
}

3.渐变圆环

public class WidgetAlbumBgView 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 WidgetAlbumBgView(Context context) {
  this(context, null);
 }

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

 public WidgetAlbumBgView(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.WidgetAlbumBgView);
  ringWidth = (int) typedArray.getDimension(R.styleable.WidgetAlbumBgView_ring_width, getResources().getDimension(R.dimen.widget_album_ring_width));
  ringLineWidth = (int) typedArray.getDimension(R.styleable.WidgetAlbumBgView_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);
  }
 }

}

4.整体布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="@dimen/widget_album_size_vertical"
 android:layout_height="@dimen/widget_album_size_vertical"
 android:background="@drawable/rotate_album_bg">

 <ImageView
  android:id="@+id/view_pic"
  android:layout_width="@dimen/widget_album_pic_size"
  android:layout_height="@dimen/widget_album_pic_size"
  android:layout_centerInParent="true"
  android:scaleType="centerInside"
  android:src="@mipmap/ic_qifenle" />

 <com.example.musicalbumview.view.WidgetAlbumBgView
  android:layout_width="86.49dp"
  android:layout_height="86.49dp"
  android:layout_centerInParent="true" />
</RelativeLayout>

四.github地址

点击链接

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

(0)

相关推荐

  • Android应用开发之简易、大气音乐播放器实现专辑倒影效果

    今天要实现的功能是实现专辑倒影效果,这个功能已经属于图像处理方面的了,对图像处理我不怎么在行,等一下会介绍一个很实用的工具类,专门用来进行图像处理的.这个工具类不是我写的,我只是拿来用到自己的项目当中,这已经足够了,我已经完美实现我想要的效果. 效果图: < 一个很有用的工具类 /SimpleBeautyMusicPlayer/src/com/wwj/sb/utils/ImageUtil.java package com.wwj.sb.utils; import java.io.ByteArra

  • android获取音乐文件的内置专辑图片实现思路及代码

    代码和注释如下: 复制代码 代码如下: private Cursor getCursor(String filePath) { String path = null; Cursor c = getContentResolver().query( MediaStore.Audio.Media.EXTERNAL_CONTENT_URI, null, null, null, MediaStore.Audio.Media.DEFAULT_SORT_ORDER); // System.out.printl

  • Android实现网易云音乐的旋转专辑View

    本文实例为大家分享了Android实现网易云音乐的旋转专辑View,供大家参考,具体内容如下 一.前言 最近做过 类似网易云音乐专辑唱片的效果,这里记录下开发思路,仅供参考.但需求不完全与网易云音乐一样,这个只有图片会旋转(网易云是整个磁盘都会旋转),没有唱片机械臂. 二.思路 如下图,我这里是分为 圆形背景+旋转的方形图片+渐变圆环 三.关键代码 1. 圆形背景 <?xml version="1.0" encoding="utf-8"?> <sh

  • Android实现网易云音乐高仿版流程

    目录 效果图 整体分析 轮播图 布局 显示数据 按钮 布局 显示数据 推荐歌单 布局 显示数据 底部 布局 显示数据 迷你控制条 播放列表弹窗 效果图 效果图依次为发现界面顶部,包含首页轮播图,水平滚动的按钮,推荐歌单:然后是发现界面推荐单曲,点击单曲就是直接进入播放界面:最后是全局播放控制条上点击播放列表按钮显示的播放列表弹窗. 整体分析 整体使用RecycerView实现,每个不同的块是一个Item,例如:轮播图是一个Item,按钮也是,推荐歌单和下面的歌单是,推荐单曲,还有最后的自定义首页

  • Android仿网易云音乐播放界面

    现在很多的播放器的播放界面都是采用光盘的转动,下面是我仿造网易的播放界面.先上两张图: 第一张为播放前的界面,第二张为点击播放按钮的图片.布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent&quo

  • Android控件RecyclerView实现混排效果仿网易云音乐

    前言 最近在使用网易云音乐的时候,看到如下图的排版效果图,自己也想实现一个 这里采用网上用法最多的方式,而且是比较简单的方式实现的,想要做项目的同学也可以快速入手搞定首页界面,可以在最快的时间内模仿出来,且效果达到90%以上的相似 效果演示 至于图片的加载你们可以根据网上的Api获取相应的图片加载到对应的位置,这里只是采用本地图片来演示 实现分析 这里是采用RecyclerView的GridLayoutManager的一个SpanSize这么一个东西,从下图很容易知道其意思 项目结构 项目结构可

  • 漂亮的Android音乐歌词控件 仿网易云音乐滑动效果

    前言: 项目有个音乐播发器功能,实现音乐在线播放,同时需要带有歌词显示功能.网上也找过,在github找到勉强能用的控件,只是效果还是差强人意,不是特别好.于是趁有空的时间,参考了网上的部分demo,自己也写了个歌词控件. 只要demo可以拉到最底部. 一.歌词控件效果. 目前的歌词控件效果如下: 主要效果有以下: 1.实现自动滑动切换到下一句. 2.实现滑动歌词切换播放时间. 3.实现拖动歌词时仿网易云音乐显示时间线,将要选择的歌词颜色变化. 4.音乐进度跳转时,歌词跳转可以滑动切换. 二.歌

  • Android项目实战教程之高仿网易云音乐启动页实例代码

    前言 本文主要给大家介绍了关于Android高仿网易云音乐启动页的相关内容,这一节我们来讲解启动界面,效果如下: 首次创建一个SplashActivity用来做启动界面,因为创建完项目默认是MainActivity做主界面,所以需要去掉,将启动配置到同时去掉SplashActivity,并且去掉SplashActivity的标题栏,同时还要设置为全屏. Activity启动配置 在清单文件将启动配置剪贴到SplashActivity: <activity android:name=".ac

  • vue实现的网易云音乐在线播放和下载功能案例

    本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

  • Qt实现网易云音乐进度条效果

    Qt网易云音乐中的音乐进度条是一个小小的难关,今天在Android写记录步数进度条中突然想到了它.移动端和电脑端自定义写界面模块的方式大同小异,现在将其中的代码放出,供大家点评参阅.代码还是比较混乱,请各位大侠还是要多多包涵. 其中我把这个类打包出来,类的实现就是靠painevent来完成的.其中的两个自定义信号是为了快进快退而准备的,它们的实现不在本类中,大小位置也是在外部类中实现.其中的一些位置参数,大小参数属于本身创作需要,如有迷惑,还望海涵. 代码: #ifndef DOWN_PROGR

  • Android实现网易云推荐歌单界面

    目录 前言 一.实现 1.自定义一个圆角图片控件(也可直接使用第三方框架) 2.进行布局摆设 3.图片切换动画效果 二.实现效果展示 三.总结 先来看看网易云APP的效果: 前言 关于网易云音乐推荐歌单界面的实现 一.实现 1.自定义一个圆角图片控件(也可直接使用第三方框架) 由于是一些简单的绘制,就不一一介绍了,直接上代码. public class MellowImageView extends ImageView { private Paint paint; public MellowIm

  • 微信小程序实战之网易云音乐歌曲详情页实现代码

    这里记录一下做网易云小程序的音乐播放详情页面的代码. 音乐播放界面的主要的重点有几个: 1.磁盘和摇杆的旋转效果,这里运用了css的动画属性 2.音乐播放和暂停,下一首/上一首等播放效果的实现 3.进度条的样式和控制 4.和上一页音乐推荐列表页通信,利用订阅与发布Pubsub HTML代码及要点 <!--pages/songDetail/songDetail.wxml--> <view class="songDetailContainer"> <view

随机推荐