文档章节

Android仿网易云音乐播放界面

云栖运营小编
 云栖运营小编
发布于 2017/01/12 19:10
字数 575
阅读 49
收藏 1

概述

网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅。
首先来看一下网易的播放效果。 
这里写图片描述 
要实现上面的功能,我们需要对界面进行一个拆分,拆分后大概包含如下结构:

  • 主界面布局设计
  • 唱盘布局设计
  • 动态布局
  • 唱盘控件DiscView对外接口及方法
  • 音乐状态控制时序图

分析及实现

主界面布局设计

主界面布局从上到下可以划分几大区域,如图: 
这里写图片描述 
如图,由上到下主要分为:标题栏区、唱盘区域、时长显示区域、播放控制区域。 
标题栏 
使用ToolBar实现,字体可能需要自定义。 
唱盘区域 
唱盘区域包括唱盘、唱针、底盘、以及实现切换的ViewPager等控件,该布局比较复杂,本案例使用自定义控件实现唱盘区域。 
时长显示区域 
使用RelativeLayout作为根布局,进度条使用SeekBar实现。 
播放控制区域 
比较简单,使用LinearLayout作为根布局。

唱盘布局实现(难点)

唱盘区域由控件DiscView实现,以RelativeLayout为根布局,子控件包括:底盘、唱针、ViewPager等。其中,底盘和唱针均用ImageView实现,然后使用ViewPager加载ImageView实现唱片的切换。如图: 
这里写图片描述 
唱片布局如下:

 

<?ml version="1.0" encoding="utf-8"?>
<com.achillesl.neteasedisc.widget.DiscView
    mlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!--底盘-->
    <ImageView
        android:id="@+id/ivDiscBlackgound"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        />

    <!--ViewPager实现唱片切换-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vpDiscContain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        />

    <!--唱针-->
    <ImageView
        android:id="@+id/ivNeedle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_needle"/>

</com.achillesl.neteasedisc.widget.DiscView>

 

这里面涉及到一个DiscView类,这个是一个复合类,我们来看一些主要的功能。

阅读全文请点击:http://click.aliyun.com/m/9310/

© 著作权归作者所有

云栖运营小编
粉丝 7
博文 98
码字总数 52676
作品 0
朝阳
运营/编辑
私信 提问
盘点2014年不可错过的十大高仿源码

“2014你任性了吗?”央视推出街头采访第二季“你任性了吗?” ,面对这种状况我也是醉了,任性?,我还是好好敲我的代码吧。话说再过两天就要 2015年了,2014年的存货赶紧拿出来咯,DevStor...

牵着蜗牛去西藏
2015/01/07
1K
1
自制在线音乐播放平台,电脑办公者100%好评。

好久不见,简书的宝宝们。 很久没有更新文章了,其实一直在想着重整旗鼓,卷土重来。但是贫穷限制了我的梦想,但是无论如何,我还是不会放弃的,come on. 利用零碎的事件推送一个我觉得很方便...

我笑地球不太圆ORZ
2018/05/20
0
0
开源音乐播放器 - liteplayer

liteplayer是android上的一款开源音乐播放器。 特点: 播放界面仿QQ音乐 网络音乐抓取自百度音乐,所以不需要额外服务器 自动抓取音乐歌词,并多形式展示 UI简洁美观,打造最lite的音乐播放器...

亓斌哥哥
2015/03/21
0
5
WeX5 快速开发平台V3.6预览版发布(2016-9-1)

WeX5 V3.6 预览版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu
2016/09/04
4.7K
10
WeX5 快速开发平台 V3.6 正式版发布

WeX5 V3.6 正式版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu
2016/10/14
5.4K
4

没有更多内容

加载失败,请刷新页面

加载更多

从濒临解散到浴火重生,OceanBase 这十年经历了什么?

阿里妹导读:谈及国产自研数据库,就不得不提 OceanBase。与很多人想象不同的是,OceanBase 并非衔着金钥匙出生的宠儿。相反,它曾无人看好、困难重重,整个团队甚至数度濒临解散。 从危在旦...

阿里云云栖社区
17分钟前
1
0
比特币第三方API大全

在开发比特币应用时,除了使用自己搭建的节点,也可以利用第三方提供的比特币api,来获取市场行情、进行交易支付、查询账户余额等。这些第三方api不一定遵循标准的比特币rpc接口规范,但往往...

汇智网教程
29分钟前
1
0
Dozer:Dozer异常java.lang.ClassCastException

这个问题是个很难发现的问题,因为代码本身没有错误,但就是无法找到报错原因 现记录下这个报错 java.lang.ClassCastException:com.XXX.ObjectA cannot be cast to com.XXX.ObjectA 代码中并...

琴兽
今天
2
0
Feign Retryer的默认重试策略测试

1、Feign配置 @Configurationpublic class FeignConfig { @Value("${coupon_service.url:http://localhost:8081}") private String couponServiceUrl; @Bean publ......

moon888
今天
2
0
关于不同域名下的session共享问题

如果登录,首页,分类,列表,产品都在不同的二级域名下,主域名不变,一定要保证里面的版本问题,不能为了更新而更新,这样哪个下面的session都访问不了。

dragon_tech
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部