14-UI控件练习示例QQ音乐

原创 2015年07月09日 20:42:29
//
//  MyViewController.m
//  QQMusic
//
//  Created by imac on 15/5/29.
//  Copyright (c) 2015 yang. All rights reserved.
//

#import "MyViewController.h"
#import
"UIView+Blur.h"
#import
<AVFoundation/AVFoundation.h>
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
@interface MyViewController ()
{
   
   
UIView *topView;//导航栏
   
   
UIView *downView;//工具栏
   
   
UISlider *slider;//进度条
   
   
NSArray *data;
   
   
UIImageView *backgroundImageView;//背景视图
   
   
AVAudioPlayer *player;//播放器对象
   
   
UIButton *playButton;//播放按钮
   
   
NSTimer *timer;
   
   
NSInteger index;
}
@end

@implementation MyViewController

- (
void)viewDidLoad {
    [
super viewDidLoad];

//    创建背景视图
    [
self creatBackground];
   
//    创建上面的导航栏
    [
self topView];
   
//    创建控制区按钮
    [
self downView];
   
//    创建滑动条
    [
self creatProgressView];
   
   //1.获取到plist文件
    NSString *path=[[NSBundle mainBundle]pathForResource:@"music.plist" ofType:nil];
    //2.将plist文件里面的数据拿出去存到数组里面
    data=[NSArray arrayWithContentsOfFile:path];
   

   
   
NSDictionary *firstDic=[data objectAtIndex:0];
   
    [
self loadData:firstDic];
}

#pragma mark--------------------载入数据-实现播放----------------------------

-(
void)loadData:(NSDictionary*)dic{
   
   
//1.取出所有键所对应的值
   
NSString *songName=[dic objectForKey:@"song"];
   
   
NSString *singerName=[dic objectForKey:@"singer"];
   
   
NSString *mp3=[dic objectForKey:@"url"];
   
   
NSString *image=[dic objectForKey:@"image"];
   
   
//2.获取顶部歌手和歌名lable
   
UILabel *songLabel=(UILabel*)[topView viewWithTag:100];
   
   
UILabel *singerLabel=(UILabel*)[topView viewWithTag:101];
   
   
//3.lable和背景图赋值
    songLabel.
text=songName;
    singerLabel.
text=singerName;
   
backgroundImageView.image=[UIImage imageNamed:image];
   
   
//4.根据MP3名称获取到mp3路径,并转换成NSURL
   
NSString *path=[[NSBundle mainBundle]pathForResource:mp3 ofType:nil];
   
NSURL *mp3Url=[NSURL fileURLWithPath:path];
   
   
//    [player stop];
//    player=nil;
   
   
//5.创建音乐播放器对象通过初始化方法传入一个MP3
   
player=[[AVAudioPlayer alloc]initWithContentsOfURL:mp3Url error:nil];
   
   
//    播放器播放
    [
player play];
   
   
//    滑动条当前值
   
slider.value=0;
   
   
//    滑动条最大值
   
slider.maximumValue=player.duration;
   
   
playButton.selected=YES;
   
   
//获取底部总时间lable
   
UILabel *timeLabel=(UILabel*)[downView viewWithTag:104];
   
   
//计算出歌曲总时长并显示到lable
    timeLabel.
text=[self coverTime:slider.maximumValue];
   
    [
timer invalidate];
   
 
timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timerAction:) userInfo:nil repeats:YES];
   
}

//计算歌曲总时长的方法
-(
NSString*)coverTime:(float)value{
   
int m=value/60;
   
   
int s = (int)value%60;
   
   
NSString *time=[NSString stringWithFormat:@"%.2d:%.2d",m,s];
   
   
return time;
}
#pragma mark --------------------------背景大视图--------------------------------------

-(
void)creatBackground{
   
//1.初见大背景view并添加一张图片做背景
   
UIImage *backImage=[UIImage imageNamed:@"joy.jpg"];
   
   
backgroundImageView=[[UIImageView alloc]initWithImage:backImage];
   
   
backgroundImageView.frame=self.view.bounds;
   
    [
self.view addSubview:backgroundImageView];
   
   
//2.创建隐藏按钮
   
UIButton *button=[UIButton buttonWithType:UIButtonTypeSystem];
   
    button.
frame=backgroundImageView.frame;
   
   
//3.添加按钮触发隐藏事件
    [button
addTarget:self action:@selector(hiddenAction) forControlEvents:UIControlEventTouchUpInside];
   
    [
self.view addSubview:button];
   
}

#pragma mark - -----------------------------状态栏----------------------------------
-(UIStatusBarStyle)preferredStatusBarStyle{
   
   
return UIStatusBarStyleLightContent;
}

#pragma mark ----------------------------- 创建顶部视图------------------------------

-(
void)topView{
   
   
   
   
//1.创建顶部视图---导航栏高度64
   
topView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 64)];
   
    [
self.view addSubview:topView];
   
   
//2.设置毛玻璃效果
   
topView.blurStyle=UIViewBlurDarkStyle;
   
    [
topView enableBlur:YES];
   
   
topView.blurTintColor=[UIColor colorWithWhite:.1 alpha:1];
   
   
//3.创建左方返回按钮
   
UIButton *leftButton=[UIButton buttonWithType:UIButtonTypeCustom];
   
    leftButton.
frame=CGRectMake(10, 15, 44, 44);
   
    [leftButton
setImage:[UIImage imageNamed:@"top_back_white@2x.png"] forState:UIControlStateNormal];
   
    [
topView addSubview:leftButton];
  
   
//4.添加返回按钮点击事件
    [leftButton
addTarget:self action:@selector(backAction) forControlEvents:UIControlEventTouchUpInside];
   
   
//5.创建右方收藏按钮
   
UIButton *rightButton=[UIButton buttonWithType:UIButtonTypeCustom];
   
    rightButton.
frame=CGRectMake(kScreenWidth-60, 15, 40, 40);
   
    [rightButton
setImage:[UIImage imageNamed:@"playing_btn_love_disable@2x.png"] forState:UIControlStateNormal];
   
    [rightButton
setImage:[UIImage imageNamed:@"playing_btn_in_myfavor@2x.png"] forState:UIControlStateSelected];
   
    [
topView addSubview:rightButton];
   
   
//6.添加红心点击事件
    [rightButton
addTarget:self action:@selector(loveAction:) forControlEvents:UIControlEventTouchUpInside];
   
   
//7.创建歌曲label
   
UILabel *songLabel=[[UILabel alloc]initWithFrame:CGRectMake((kScreenWidth-150)/2, 10, 150, 40)];
   
    songLabel.
text=@"安静";
   
    songLabel.
tag=100;
   
    [
topView addSubview:songLabel];
   
    songLabel.
textColor=[UIColor whiteColor];
   
    songLabel.
textAlignment=NSTextAlignmentCenter;
   
   
//8.创建歌手label
   
UILabel *singerLabel=[[UILabel alloc]initWithFrame:CGRectMake((kScreenWidth-150)/2, 30, 150, 40)];
   
    singerLabel.
text=@"周杰伦";
   
    singerLabel.
tag=101;
   
    singerLabel.
font=[UIFont systemFontOfSize:14];
   
    [
topView addSubview:singerLabel];
   
    singerLabel.
textColor=[UIColor whiteColor];
   
    singerLabel.
textAlignment=NSTextAlignmentCenter;
   
   
   
}
#pragma mark----------------------------底部视图----------------------------------------
-(void)downView{
   
//1.创建底部大view
   
downView=[[UIView alloc]initWithFrame:CGRectMake(0, kScreenHeight-100, kScreenWidth, 100)];
   
   
//2.设置毛玻璃效果
   
downView.blurStyle=UIViewBlurDarkStyle;
   
    [
downView enableBlur:YES];
   
   
downView.blurTintColor=[UIColor colorWithWhite:.1 alpha:1];
   
    [
self.view addSubview:downView];
   
   
//3.添加上一首按钮
   
UIButton *leftButton=[UIButton buttonWithType:UIButtonTypeCustom];
   
    leftButton.
tag=200;
   
    leftButton.
frame=CGRectMake(60, (100-40)/2, 40, 40);
   
    [leftButton
setImage:[UIImage imageNamed:@"playing_btn_pre_n@2x.png"] forState:UIControlStateNormal];
   
    [leftButton
setImage:[UIImage imageNamed:@"playing_btn_pre_h@2x.png"] forState:UIControlStateNormal];
   
    [
downView addSubview:leftButton];
   
   
//4.添加上一首点击事件
    [leftButton
addTarget:self action:@selector(leftAction:) forControlEvents:UIControlEventTouchUpInside];
   
//    创建下一首按钮
   
UIButton *nextButton=[UIButton buttonWithType:UIButtonTypeCustom];
   
    nextButton.
tag=201;
   
    nextButton.
frame=CGRectMake(225, (100-40)/2, 40, 40);
   
    [nextButton
setImage:[UIImage imageNamed:@"playing_btn_next_n"] forState:UIControlStateNormal];
   
    [nextButton
setImage:[UIImage imageNamed:@"playing_btn_next_h"] forState:UIControlStateNormal];

   
    [
downView addSubview:nextButton];
   
    [nextButton
addTarget:self action:@selector(leftAction:) forControlEvents:UIControlEventTouchUpInside];
   
   
//    创建播放按钮
   
playButton=[UIButton buttonWithType:UIButtonTypeCustom];
   
   
playButton.frame=CGRectMake(130, (100-65)/2, 65, 65);
   
    [
playButton setImage:[UIImage imageNamed:@"playing_btn_play_n@2x.png"] forState:UIControlStateNormal];
   
    [
playButton setImage:[UIImage imageNamed:@"playing_btn_play_h@2x.png"] forState:UIControlStateNormal];
   
    [
playButton setImage:[UIImage imageNamed:@"playing_btn_pause_n@2x.png"] forState:UIControlStateSelected];
   
   
    [
downView addSubview:playButton];
   
    [
playButton addTarget:self action:@selector(playAction:) forControlEvents:UIControlEventTouchUpInside];
   
   
   
}

#pragma mark----------------------------底部视图-------------------------------------------
-(void)creatProgressView{
   
//    创建进度label
   
UILabel *progressLabel=[[UILabel alloc]initWithFrame:CGRectMake(10, 10, 0, 0)];
   
    [
downView addSubview:progressLabel];
   
    progressLabel.
text=@"00:00";
   
    progressLabel.
textColor=[UIColor whiteColor];
   
    progressLabel.
textAlignment=NSTextAlignmentCenter;
   
    progressLabel.
tag=103;
   
//    尺寸自适应
    [progressLabel
sizeToFit];
   
   
//    创建总长度label
   
UILabel *timerLabel=[[UILabel alloc]initWithFrame:CGRectMake(270, 10, 0, 0)];
   
    [
downView addSubview:timerLabel];
   
    timerLabel.
text=@"00:00";
   
    timerLabel.
textColor=[UIColor whiteColor];
   
    timerLabel.
textAlignment=NSTextAlignmentCenter;
   
    timerLabel.
tag=104;
   
   
//    尺寸自适应
    [timerLabel
sizeToFit];
   
//    创建滑动条需要设置高度
   
slider=[[UISlider alloc]initWithFrame:CGRectMake(0, kScreenHeight-100-20, kScreenWidth, 40)];
   
//    设置滑钮图片
    [
slider setThumbImage:[UIImage imageNamed:@"playing_slider_thumb@2x.png"] forState:UIControlStateNormal];
   
    [
slider setMaximumTrackImage:[UIImage imageNamed:@"playing_slider_play_right@2x.png"] forState:UIControlStateNormal];
   
   
UIImage *minImage=[UIImage imageNamed:@"playing_slider_play_left@2x.png"];
   
    minImage=[minImage
stretchableImageWithLeftCapWidth:5 topCapHeight:0];
   
    [
slider setMinimumTrackImage:minImage forState:UIControlStateNormal];
   
    [
self.view addSubview:slider];
   
    [
slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
   
}

#pragma mark - ----------------------------------事件方法-------------------------------------

-(
void)timerAction:(NSTimer*)timer{
   
   
slider.value++;
   
   
UILabel *progressLabel=(UILabel*)[downView viewWithTag:103];
   
    progressLabel.
text=[self coverTime:slider.value];
}

-(
void)leftAction:(UIButton*)button{
   
   
if (button.tag==200) {
       
       
NSLog(@"上一首");
       
       
index--;
       
    }
else if (button.tag==201){
       
NSLog(@"下一首");
       
       
index++;
    }
   
   
if (index<0) {
       
index=data.count-1;
    }
   
   
if (index>=data.count) {
       
index=0;
    }
   
   
NSDictionary *infoDic=[data objectAtIndex:index];
   
    [
self loadData:infoDic];
}


-(
void)playAction:(UIButton*)button{
   
   
if (button.selected) {
       
//        停止定时器
        [
timer invalidate];
       
        [
player pause];//播放器暂停
       
    }
else{
        [
player play];
       
       
timer=[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timerAction:) userInfo:nil repeats:YES];
    }
   
    button.
selected=!button.selected;
}

-(
void)loveAction:(UIButton*)button{
   
NSLog(@"收藏");
   
    button.
selected=!button.selected;
}

-(
void)backAction{
   
   
NSLog(@"返回");
}


-(
void)hiddenAction{
   
   
topView.hidden=!topView.hidden;
   
   
downView.hidden=!downView.hidden;
   
   
slider.hidden=!slider.hidden;
   
}

-(
void)sliderAction:(UISlider*)slider{
   
   
UILabel *progressLabel=(UILabel*)[downView viewWithTag:103];
   
    progressLabel.
text=[self coverTime:slider.value];
   
   
player.currentTime=slider.value;
   
}


@end
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

微信开发接口以及资源收集整理

1、百度地图API 车联网API网址:http://developer.baidu.com/map/carhome.htm 登录http://lbsyun.baidu.com/apicon...

Android VLC播放器二次开发3——音乐播放(歌曲列表+歌词同步滚动)

今天讲一下对VLC播放器音频播放功能进行二次开发,讲解如何改造音乐播放相关功能。最近一直在忙着优化视频解码部分代码,因为我的视频播放器需要在一台主频比较低的机器上跑(800M主频),所以视频解码能力受...

iOS开发UI基础—10常用UI控件综合示例之QQ音乐

// //  MyViewController.m //  QQMusic // //  Created by imac on 15/5/29. //  Copyright (c) 2015...

Android自定义View,高仿QQ音乐歌词滚动控件!

最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出。今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果。OK,废话不多说,先来看看效果图:好...

IOS_UI_控件总结+九宫格+仿QQ好友列表+小图片拉伸

H:/0718/00_UIKit_控件总结.m一、UIView常见属性 1.frame 位置和尺寸(以父控件的左上角为原点(0,0)) 2.center 中点(以父控件的左上角为原点(0,0)) 3...

QQ音乐播放列表控件

  • 2014年10月22日 08:19
  • 1.1MB
  • 下载

仿QQ音乐播放器文件List控件

  • 2011年05月15日 12:16
  • 342KB
  • 下载

cocos2dx3.10-lua_使用官方示例的方式获取UI控件

以下是在cocos2dx-3.10-lua中 1.概述 cocosstudio的MainScene.csb中 Scene --bg --Btn_1 --Check_1 2.实例 (1)传统...

随风仿QQ2009按钮控件(附示例)

  • 2009年09月15日 18:47
  • 155KB
  • 下载

Android UI之自定义——最简单的仿QQ音乐歌词颜色渐变

转载请注明本文出自JFlex的博客http://blog.csdn.net/jflex/article/details/46550849,请尊重他人的辛勤劳动成果,谢谢!Android UI之自定义—...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:14-UI控件练习示例QQ音乐
举报原因:
原因补充:

(最多只允许输入30个字)