基于Android的音乐播放软件的设计与实现.docx

基于Android的音乐播放软件的设计与实现.docx

《基于Android的音乐播放软件的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于Android的音乐播放软件的设计与实现.docx（32页珍藏版）》请在冰豆网上搜索。

基于Android的音乐播放软件的设计与实现

基于Android的音乐播放软件的设计与实现

摘要

随着社会的发展以及人们生活水平的提高，音乐文化逐渐成为当今社会主流文化之一，走进了每个人的生活，让人们得到了更好的放松、享受以及娱乐。

与之崛起的就是音乐播放软件，它不仅可以让人们具有随时随地享受音乐，还能根据用户习惯推荐歌曲和歌单、评论互动等，营造了良好的音乐氛围。

本文所设计的音乐播放软件共分五个功能模块页面，“发现”页和“我的”页可以保存用户收藏的音乐，并根据用户的音乐风格偏好推荐歌曲。

同时规划出“视频”页、“动态”页两个功能页面丰富用户的娱乐内容，“动态”页面会从本地服务端获取图片。

“账号”页会保存用户的基本信息。

界面风格会以黑色和红色混搭为主。

本文主要通过本地音乐和视频的播放控制的功能实现，介绍MediaPlayer和Service的搭配使。

借助BroadCastReceiver、Intent等实现不同软件页面间的信息交互。

同时，将会使用自定义View美化控件外观。

关键词：

音频播放控制、界面风格、移动开发、服务端

ThedesignandrealizationofmusicplayersoftwarebasedonAndroid

Abstract

Withthedevelopmentofthesocietyandtheimprovementofpeople'slivingstandard,musicculturehasgraduallybecomeoneofthemainstreamcultureintoday'ssociety,whichhasenteredeveryone'slifeandmadepeoplegetbetterrelaxation,enjoymentandentertainment.Withitsriseisthemusicplayingsoftware,whichnotonlyenablespeopletoenjoymusicanytimeandanywhere,butalsocanrecommendsongsandplaylists,commentsandinteractionsaccordingtousers'habits,creatingagoodmusicatmosphere.

Thisworkisdividedintofivefunctionalpages,"discover"pageand"my"pagecansavetheuser'smusiccollection,andaccordingtotheuser'smusicstylepreferencetorecommendsongs.Atthesametime,twofunctionalpagesof"video"pageand"dynamic"pageareplannedtoenrichtheentertainmentcontentofusers.The"dynamic"pagewillgetpicturesfromthelocalserver.Theaccountpageholdstheuser'sbasicinformation.Theinterfacewillbeamixofblackandred.Thisarticlemainlythroughthelocalmusicandvideoplaybackcontrolfunctiontoachieve,introducedtheMediaPlayerandServicecollocation.WiththehelpofBroadCastReceiver,Intent,etc.,informationinteractionbetweendifferentsoftwarepagescanberealized.Also,acustomViewwillbeusedtobeautifytheappearanceofthecontrol.

Keywords:

Audioplaybackcontrol,interfacestyle,mobiledevelopment,server

2开发和运行的环境7

1前言

音乐播放软件是一种用于播放各种音乐文件的多媒体播放软件，它涵盖了各种音乐的播放工具，界面美观，操作简单，是如今听音乐的必备软件。

1.1本设计的目的、意义

在移动端市场里，智能手机是用户的第一选择，据IDC的最新报告，2019年Android智能手机占全球手机市场份额的87%。

Android软件借助着发达移动通信技术和计算机网络技术的功能，使其自身功能上更加丰富强大，加上美观且人性化UI界面满足了用户的基本需求，提供了用户体验感。

本文通过对基于Android平台的音乐播放软件的研究、设计，展示Android的基本布局、网络操作、数据存储、数据通信以及多媒体开发等基本技术，体现当前受欢迎的音乐播放软件的风格设计以及基本功能。

小巧且功能强大的音乐播放软件是当下及未来的一种必然趋势，作为一名音乐爱好者能设计一款Android音乐播放器，为人们空闲之时带来良好的音乐享受体验，是一件非常有荣誉感的事情。

1.2国内流行的音乐播放软件简介

目前，国内比较流行的音乐播放软件有网易云音乐播放器、QQ音乐播放器、酷狗音乐播放器等，它们都具备各自的特点，吸引了一批自己的音乐爱好者粉丝，并在这一方面占有了各自的市场。

在这里简单地介绍一下现在国内流行的音乐播放软件。

1）网易云音乐播放器

网易云音乐播放器是一款网易公司打造的音乐播放器，由网易杭州研究院的开发，

与专业音乐人、DJ、自由音乐创造者、主播等合作，开发了好友推荐、动态评论以及社交等功能。

网易云音乐播放器是一款很“体贴”的音乐播放器，它的“个性化推荐”、“私人FM”功能会根据用户的爱好自动匹配歌曲，也是国内音乐播放软件中拥有海量“歌单”的音乐播放器，让用户更容易遇见优质音乐。

2）QQ音乐播放器

QQ音乐播放器是腾讯公司开发的音乐播放平台，是国内正版数字音乐服务的音乐平台领航者，有着独特个性的主题风格，以大数据和互联网为推动力，始终走在音乐潮流的最前端，同时支持在线播放和本地播放，有着千万量级的正版乐库。

3）酷狗音乐播放器

酷狗音乐播放器是中国领先的数字音乐交互提供商，互联网技术创新的领军企业。

酷狗音乐主打“听”、“看”“唱”三大功能，“听”模块以丰富的曲库为基石，“看”模块配合MV和直播打造，“唱”模块实现在线K歌版块。

1.3本设计中的主要功能模块

在这音乐播放软件的设计中，实现的主要功能如下：

1.本地音乐的播放控制；

2.本地视频的播放控制；

3.从搭建本地的服务端中获取网络图片；

4.美观的UI布局。

2开发和运行的环境

2.1开发软件的工具

该音乐播放软件是基于谷歌的Android系统，早前技术人员使用Eclipse开发软件，后来谷歌宣布停止对搭载Eclipse的开发软件的工具更新，并推出了功能更加强大、使用更加方便的AndroidStudio[1]，故本音乐播放软件的开发工具选择AndroidStudio。

AndroidStudio是谷歌推出的基于IntelliJIDEA的Android应用开发集成开发环境，并且赋予了很多提升Android应用的构建效率的功能,如基于Gradle可以灵活地构建系统、IntantRun可以实时将变更传入到运行中软件中等，当前播放软件的编译版本、环境，如图2.1所示：

图2.1当前软件编译环境

2.2软件运行的环境

夜神android模拟器是一款国产手机模拟器，采用类手机界面视觉设计的PC端桌面软件，采用内核技术（基于Android4.4.2版本内核针在电脑上运行深度开发），具有同类模拟器中领先运行速度和稳定的性能。

相对Genymotion它更接近真机，能够安装一些应用市场的手机软件，如果在genymotion安装应用需要安装相应的包，操作繁杂，容易出错。

当然夜神模拟器也有不足的地方，即每次启动AndroidStudio和夜神模拟器，需要在Windows命令界面中做一些操作，如图2.2所示：

图2.2连接夜神模拟器的cmd界面命令

3软件功能的实现

3.1UI布局模块

3.1.1五大页面之间的跳转

该音乐播放软件有五大页面，分别是“发现”、“视频”、“我的”、“视频”、“账号”，为了提高代码的可复用性以及可扩展性，创建了五个Fragment,分别对应DiscoveryFragment、VideoFragment、MineFragment、DynamicsFragment、AccountFragment。

将这五个Fragment加载入MainActivity中的id为container_content的相对布局中。

当点击MainActivity中的导航栏中的某个页面的图标时，container_content会加载相应的Fragment[2]。

点击切换Fragment的效果的原理是通过FragmentManager调用方法add将五个Frament对象加入id为container_content的RelativeLayout中，当点击导航栏中其中一个图标的时候，FragmentManger调用hide方法隐藏其它四个Fragment，从而显示出导航栏图标对应的Fragment。

导航逻辑设计如图3.1所示：

图3.1FragmentManager将Fragment加入Activity

一般情况下，Fragment作为Activity界面的一部分，我们可以向一个Activity中添加多个Fragment，也可以想多个Activity添加同一个Fragment,Fragment成功实现了模块化，它具有自己的生命周期和布局文件，但它的生命周期会受到Activity的生命周期的影响。

Fragment不能独立存在，必须依赖在Activity之上，并且Fragment中不能嵌套使用Fragment。

当Activity被销毁时，Activity中的Fragment随之销毁。

而要在Activity中添加、替换、移除Fragment,则需要借助FragmentManager对Fragment的管理。

FragmentManager向Activity提交对Fragment的每组更改成为事务（Transition）。

你也可以将提交的事务加入返回栈，让用户点击返回键时能够回退到上一个事务。

每个事务中调用add（）、replace（）、remove（）、show（）、hide（）等方法实现Activity对Fragment的管理，并且最后一定要调用commit（）方法提交事务。

3.1.2“发现”页面----DicoveryFragment的布局

DiscoveryFragment主要组成部分如图3.2所示：

图3.2“发现”页面的主要组成部分

1）搜索栏

“发现”页头部的搜索栏的中间是圆角搜索框，右边是圆形音乐播放进度条。

这两个控件都属于自定义View[3]，分别是MySearchView、MusicProgressView。

搜索栏整体效果如图3.3所示：

图3.3“发现”页面头部的搜索栏

在实际开发过程中，基本控件并不能满足我们的功能和UI界面的需求。

因此，Android提供了自定义View的方法，步骤如下：

1.在res/values/attrs.xml文件里，声明自定义控件的的属性；

2.创建自定义View的类，名称应与attrs.xml声明的自定义View的名称相同。

在构造方法中，获取属性值且设定默认值；

3.在OnMeasure方法中，定义测量自定义搜索框的宽和高方式；

4.在OnDraw方法中，绘制自定义View的图形。

Android绘图基础一般会涉及到Canvas、Paint等[4]。

复杂的操作一般不在OnDraw方法中实现，建议另外创建方法或者在方法OnSizeChanged中实现。

画布遍及整个控件的宽、高,画布的x、y轴坐标图如图3.4所示：

图3.4画布的坐标轴

5.根据实际功能需求，定义自定义View的成员方法。

2）广告栏

由控件ViewPager[4]和底部提示栏组成，底部提示栏的作用是提示ViewPager目前正显示的是ViewPager中的第某个图片。

广告栏图整体效果如图3.5所示：

图3.5广告栏

在此处的ViewPager实现了四个重要效果：

左右切换无限循环、自动切换、切换的动画效果以及底部提示。

实现步骤如下：

1、左右切换无限循环

ViewPager可以让用左右滑动切换它的当前View。

在此处，View是ImageView控件。

ViewPager往往需要与适配器PagerAdapter搭配使用，适配器PagerAdapter给ViewPager提供View的相关数据，类似于ListView的Adapter。

实现PagerAdapter抽象类，需要重写方法getCount（）、instantiateItem（）、isViewFromObject（）、destroyItem（）ViewPager。

ViewPager要实现无限循环，则需要关注如何实现ViewPager在第一个View时右滑切换至最后一个View、ViewPager在最后一个View时左滑切换至第一个View。

假定ViewPager要显示的View有3个，分别是ViewA、ViewB和ViewC。

为了在滑动时UI上给用户一种左右无限循环的感觉，分别在ViewA前面放一个ViewC,ViewC后面放一个ViewA，作为页面快速切换时的缓冲。

当ViewPager显示的是索引为1的ViewA时，用户左滑至索引为0的ViewC，随后迅速且无动画效果地切换到索引为4的ViewA；当ViewPager显示的是索引为3的ViewC时，用户右滑至索引为4的ViewA,随后迅速且无动画效果地切换至索引为1的ViewA。

ViewPager的左右切

换无限循环的逻辑设计如图3.4所示：

图3.6ViewPager实现无限循环的原理图

为了实现ViewPager无限循环,需要实时获取ViewPager切换View时的信息，则需要给ViewPager设置监听器，即调用方法addOnPageChangeListener，实现OnPageChangeListener抽象类则需要重写方法onPageSelected和方法onPageScrollStateChanged。

在方法OnPageSelected中，查看当前position（View的索引值）并且在符合条件时及时更改索引值，从而实现ViewPager的无限循环效果。

2、自动切换

在此，借助Handler的定时发送信息实现ViewPager每隔1秒能够自动切换View的效果，同时需要在OnPageChangeListener接口中重写方法onPageScrolled、onPageSelected和方法onPageScrollStateChanged。

方法onPageScrolled时ViewPager切换过程中调用的方法，在此过程中移除MessageQuee中的Message,这是为了实现每切换完一个View时刚好只接收且处理一个Message。

方法onPageSelected是ViewPager切换View后会调用到的，用全局变量p实时获取当前View的索引。

方法onPageScrollStateChanged能检测到ViewPager切换View的三种状态：

0（end）、1（press）、2（up）。

ViewPager切换View完成时会返回0（end）,当用手指摁下拖动View的时候会返回1（press），当用户手指从ViewPager松开时会返回2（up）。

故为实现ViewPager自动切换View,需要在ViewPager切换View完成时，用Handler定时发送一次消息。

在DiscoveryFragment中的方法onActivityCreted第一次调用Handler发送信息，然后，在整个设计体系中Handler会自动循环定时发送消息。

3、切换的动画效果

为ViewPager切换View时添加添加动画效果，即调用方法setPageTransformer，实现抽象类PageTransformer需要重写PageTranformer对象的方法transformPage。

在方法transformPage中，我们要着重关注当我们滑动View的时候，它的位置参数position的变化[5]，它反映着View的切换时的状态。

假设有三个View，分别是View1、View2、View3，逻辑截图如下：

图3.7ViewPager右滑切换View时参数position的变化

图3.8ViewPager左滑切换View时参数position的变化

4、底部提示

在底部提示栏中，第n个小方格为红色代表当前量p来表示当前显示的是第n个View。

实现底部提示栏实时更新，需要全局变量p表示当前View的索引。

当设置好ViewPager的无限循环和动画效果后，我们将它直接加入DiscoveryFragment中时,会出现UI界面卡顿的效果，并会有UI界面工作繁忙的警告。

出现这种情况的原因是ViewPager自动或手动切换View时，描绘ImageView太过频繁，同时加上一些动画效果，导致UI线程工作量太大，从而使UI界面卡顿。

解决方法是用Picasso框架加载图片，降低主线程绘制图片的工作量。

3）歌单导航栏

由三个NavIconView组成，NavIconView中包含了圆形图标和图标名称。

歌单导航栏整体效果如图3.9所示：

图3.9歌单导航栏

NavIconView也是自定义View,它的自定义View的步骤如下：

1.在res/values/attrs.xml中声明NavIconView的属性NavIconView的属性：

图标（nav_icon）、图标的圆形背景半径大小（nav_bg_radius）、图标的圆形背景的颜色（nav_bg_color）、图标名称的颜色（nav_name_color）、图标名称（nav_name）、图标名称的文本大小（nav_name_size）、图标与图标名称之间的距离（nav_distance）、图标是否被选中。

2.创建NavIconView类，在构造方法中获取属性值以及设定默认值。

3.在方法onMeasure中，测量NavIconView的宽、高值。

在方法measureWidth中，取图标圆形背景的直径和图标名称宽度之间的最大值为NavIconView的宽，取图标圆形背景的直径、图标与图标名称之间的距离和图标名称的文本高的值之和为NavIconView的高。

4.方法onDraw绘制NavIconView,该控件上方是图标，图标有一个圆形背景，可给该背景设定颜色，下方则是图标对应的名称，图标与图标名称的距离可调节。

MainActivity布局中的导航栏上的五个页面图标引用的就是NavIconView，当点击某一个图标时，该图标的属性“nav_checked”设为true,其它图标的nav_checked设为false，所以当点击某一图标时它的圆形背景颜色和图标名称颜色会变为红色。

导航栏整体效果如图3.10所示：

图3.10导航栏中的NavIconView

4）推荐歌单栏

由两个TextView和一个HorizontalScrollView组成，HorizontalScrollView是横向滚动栏，HorizontalView中包含了6个由CoverView和TextView组成的LinearLayout,控件CoverView是自定义控件，它是圆角矩形的图片。

推荐歌单栏整体效果如图3.11所示：

图3.11导航栏中的NavIconView

CoverView的自定义View步骤：

1.在res/values/attrs.xml中声明CoverView的属性CoverView的相关属性：

歌单封面的图片（cover_icon）、矩形圆角半径（cover_radius）、歌单被播放的次数（cover_play_time）、歌单被选中（cover_tip_checked）；

2.创建CoverView类，在构造方法中获取属性值，设定默认值；

3.在方法onMeasure中，获取该控件的宽、高值。

此处，方法measureWidth、measureHeight简单地返回200（单位px），即默认给定了控件的宽和高，故在布局文件中调用此控件时需要指明CoverView的宽、高属性值均为“wrap_content”；

4.方法onDraw绘制CoverView的图样，该控件整体上是圆角矩形，用图片填充整个控件，然后在右上角绘制播放图标以及播放次数（文本）。

5）“风格推荐”栏

由两个TextView和一个HorizontalScrollView组成，HorizontalScrollView是横向滚动栏，HorizontalView包含了三个ListView，可以横向拖动切换这三个ListView。

每个ListView包含3个item，每个item的内容有歌曲封面、歌曲名称、歌手、歌曲信息、播放图标。

DiscoveryFragment整体效果如图3.12所示：

图3.12DiscoveryFragment整体效果

3.1.3“视频”页面----VideoFragment的布局

VideoFragment主要有以下部分组成：

1）视频播放区域

视频播放区域中有有两种呈现形式：

一、在播放过程点击屏幕，会呈现播放/暂停键（ImageView）、可拖动进度条（Seekbar）；二、第一次进入“视频”页面时，未播放时页面上的一些信息提示,包含了视频播放总时长提示（一个ImageView和一个TextView）、视频被播放的次数提示（一个ImageView和一个TextView）、播放键图标。

视频播放区域整体效果如图3.13所示：

图3.13“视频”页面播放区域初始化界面

点击播放/暂停后的效果如图3.14和3.15所示：

图3.14“视频”页面播放区域播放时的界面

图3.15“视频”页面播放区域播放时的界面

2）视频标题栏及视频的发布者基本信息等

这部分由视频的标题基本信息（一个TextView）、视频发布者的基本信息（头像和昵称，即一个ImageView和一个TextView）、一个评论图标和一个点赞图标（两个ImageView）组成。

整体效果如图3.16所示：

图3.16“视频”页面视频的相关信息

3.1.4“我的”页面----MineFragment的布局

在MineFragment中，大量运用了布局管理器[6]，将Android基本控件组合在一起形成一个新的控件。

MineFragment页面内容主要有以下部分组成：

1）页面头部的功能栏

此部分由圆形音乐进度条（MusicProgress,自定义View）、圆形用户头像框（MusicPlayCoverView，自定义View）、用户名（TextView）