iOS 简单音乐播放器 界面搭建
如图搭建一个音乐播放器界面,具备以下几个简单功能:
1,界面协调,整洁。
2,点击播放,控制进度条。
3.三收藏歌曲,点击收藏,心形收藏标志颜色加深。
4,左右按钮,切换歌曲图片和标题。
5,点击中间图片,隐藏所有按钮,仅显示蓝色背景。
设计的整体思路:
1.在搭建界面的时候,为了整洁和方便后续的功能的添加,需要将整个的界面划分为几个部分:
①:最上面的一行包括:一个返回按钮、一个歌曲名称、一个收藏按钮;
②:第二行:一个slider控件、两侧是当前的歌曲播放进度和歌曲的总时长--两个lable;
③:第三行:在正中间放一个按钮并设置图片;
④:最下面一行:三个按钮,上一曲,下一曲和暂停/播放;
2,划分好之后,就要依次进行摆放了:
①:第一行使用一个view,在其上依次是:UIButon、UILable、UIButton;
②:第二行仍是一个view:依次是:UILable、UISlider、UILable;
③:第三行是一片空白,和一个中心的UIButton.如果有特殊的图案需求,在UIButton之下可以加一个,UIImageView,并设置所需图片;
④:最后一行还是一个View:UIButton、UIButton、UIButton;
3,摆放就绪之后,寻找所要实现的功能的控件组合,寻找其之间的关联并实现功能;
①:返回按钮:添加点击事件,点击之后返回上一个状态;
②:歌曲名称:跟随左右切换歌曲和歌曲播放完毕改变相应的名称;
③:收藏按钮:点击按钮,改变显示状态,并且记忆选中状态,直至状态再次被主动改变;
④:UISlider右边的UILable显示歌曲的总时长;
⑤:左边的UILable,根据进度实时显示;
⑥:UISlider根据歌曲总时长结合自身的长度,确定定时器的执行频率和自身的步长;
⑦:点击中间的按钮,将不需显示的子视图的hidden属性设为YES,再次点击改为NO;
⑧:左右切换按钮类似:点击切换的同时,该变歌曲名,改变歌曲时长,改变中间按钮的图片;
⑨:播放/暂停按钮:要与UISlider联系起来,播放,暂停的同时,slider的进度条和显示当前进的UILable的显示内容要同步的机型;
4,差缺不漏。
经过有条不紊的执行,一个简单地音乐播放器界面就搭建完成了!
iOS 简单音乐播放器 界面搭建的更多相关文章
- iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)
代码地址如下:http://www.demodashi.com/demo/11944.html 天道酬勤 前言 作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该怎 ...
- Android实现简单音乐播放器(MediaPlayer)
Android实现简单音乐播放器(MediaPlayer) 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能 ...
- Android实现简单音乐播放器(startService和bindService后台运行程序)
Android实现简单音乐播放器(MediaPlayer) 开发工具:Andorid Studio 1.3运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能有 ...
- Android 实现简单音乐播放器(二)
在Android 实现简单音乐播放器(一)中,我介绍了MusicPlayer的页面设计. 现在,我简单总结一些功能实现过程中的要点和有趣的细节,结合MainActivity.java代码进行说明(写出 ...
- Android 实现简单音乐播放器(一)
今天掐指一算,学习Android长达近两个月了,今天开始,对过去一段时间的学习收获以及遇到的疑难杂症做一些总结. 简单音乐播放器是我自己完成的第一个功能较为完整的APP,可以说是我的Android学习 ...
- html5 简单音乐播放器
html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- Android——简单音乐播放器
使用MediaPlayer做的简单音乐播放器,更多内容请到百度经验查看 http://jingyan.baidu.com/article/60ccbceb63452364cab197f1.html ...
- Swift 3 :基于 AVAudioPlayer 的简单音乐播放器
2017.05.22 17:46* 字数 1585 阅读 5095评论 0喜欢 8赞赏 2 https://www.jianshu.com/p/4d5c257428a1 学习ios以来差不多接近两个月 ...
- Android开发6:Service的使用(简单音乐播放器的实现)
前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...
随机推荐
- jQuery validate 验证隐藏域
$.validator.setDefaults({ ignore: '' }); 不要加载jQuery ready中,什么改写changelog ,那是扯蛋
- c#根据公式进行自动计算 四个5加减乘除=4
想不出来就采用枚举法吧,代码写起来还是很简单的,当然代码写的不怎么样,也不考虑设计效率等等问题了,理论上这种类型的都可以这么拼出来,比较初级的做法,但轻松解决问题.注意Calculate(st ...
- Python capitalize()方法
Python capitalize()方法 capitalize()方法返回字符串的一个副本,只有它的第一个字母大写.对于8位的字符串,这个方法与语言环境相关. 语法 以下是capitalize()方 ...
- 《CSS3实战》读书笔记 第三章:选择器:样式实现的标记
第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...
- Mastering C# structs
http://www.developerfusion.com/article/84519/mastering-structs-in-c/
- animate实例介绍
1.animate,setInterval组合不断滚动: function Tscroll(){ $().animate(); } setInter(); //注意里面的是 Tscroll(),而不是 ...
- 处理ecshp图片上传失真
默认生成jpg缩略图或商品图的质量是80,有些时候不够满意,现提供调整生成jpg图片的质量的方法找到includes/cls_image.php,在大约250行左右 /* 生成文件 */ ...
- Intent启动一个新的页面
一,Intent(目的) 的分类 显式 Intent 构造函数重载之一: Intent intent = new Intent(FirstActivity.this,SecondActivity.cl ...
- python版本升级及pip部署方法
Python版本升级 CentOS 6.3自带的Python版本为2.6,首先需要升级到2.7版本.由于旧版本的Python已被深度依赖,所以不能卸载原有的Python,只能全新安装. 1.下载Pyt ...
- 查找“CDN、负载均衡、反向代理”等大型网络真实IP地址的方法
首先,CDN.负载均衡.反向代理还分为很多层,有时查出来的是最外层的 CDN 服务器群,真实的机器是不对外开放的,类似这样的: 用户 → CDN 网络 → 一台或多台真实机器 ↗ CDN Server ...