您的位置:首页 > 产品设计 > UI/UE

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

2015-07-09 20:42 561 查看
//
//  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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  IOS开发 UI基础 控件