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

//
//  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 ];
   
  
    NSString *path=[[ NSBundle mainBundle ] pathForResource : @"music.plist" ofType : nil ];
   
    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

效果：