QQ音乐界面以及基本功能的实现（代码）

最近完善了QQ音乐的界面搭建以及基本功能得实现，还没学到高级的能容，还不能联网。基本更能如下：

1.歌曲可以顺序自动播放，

2.可以暂停，可以拉动slider滑动条，加快各的播放速度，

3.因为不能提供界面的素材，如果想要，可以留言，私下联系

4.点击图片时能隐藏上下view，只显示图片，

5.能点击红心收藏

6.效果图在我上面一篇的文章里面

代码如下：

//

//  ViewController.m

//  QQ音乐

//

//  Created by mac on 15/8/13.

//  Copyright (c) 2015年人生随风，刀剑无影. All rights reserved.

//

#import "ViewController.h"

#import <AVFoundation/AVFoundation.h>

#define   screnWidth   self.view.frame.size.width

#define   screnHight    self.view.frame.size.height

@interfaceViewController ()

//这两个声明很重要

@property(nonatomic,strong)NSArray *Music;

@property(nonatomic,assign)int index;//监控图片

@property(nonatomic,strong)UIImageView *imageView;

@property (nonatomic,strong)UIView *upView;

@property(nonatomic,strong)UIView *downView;

@property(nonatomic,strong)UIButton *downCenterBUttonRightFirst;

@property(nonatomic,strong)UIButton *downCenterBUttonLeftFirst;

@property(nonatomic,strong)UILabel *centerLable;

@property(nonatomic,strong)UILabel *nameLable;

@property(nonatomic,strong)UIButton *downCenterButton;

@property(nonatomic,strong)UISlider *slider;

@property(nonatomic,strong)NSTimer *timer;

@property(nonatomic,strong)UILabel *leftLable;

@property(nonatomic,strong)UILabel *rightLable;

@property(nonatomic,strong) AVAudioPlayer *player;

@property(nonatomic,assign)BOOL isHidem;

@property(nonatomic,assign) int   count;

/**

 注意当设置为全局变量的时候，要记得不要在声明局部变量

 会出现不能调用的问题，用strong，就这样

 */

@end

@implementation ViewController

# pragma mark - 隐藏手机最上面的提示框

-(BOOL)prefersStatusBarHidden{

    returnYES;

}

#pragma mark - 里面判断是否是最后一首歌，控制按钮是否能被点击

- (void)viewDidLoad {

  

    [superviewDidLoad];

    

    self.index = -1;

    self.downCenterBUttonLeftFirst.enabled=NO;

    [ self  downCenterBUttonRightFirstClick];

}

#pragma mark     -  隐藏部分

-(void)HidenVIEW

{

          //2 .隐藏的按钮

        //    UIButton *hidenButton = [[UIButton  alloc]initWithFrame:CGRectMake(0, 0, screnWidth, screnHight)];

        UIButton *hidenButton = [[UIButton  alloc]initWithFrame:CGRectMake(0,0 , screnWidth, screnHight)];

        //[hidenButton setBackgroundImage:[UIImage imageNamed:@"playing_btn_in_myfavor"] forState:UIControlStateNormal];

        // hidenButton.backgroundColor = [UIColor redColor];

        hidenButton.alpha=0.1 ;

    

        [hidenButton  addTarget:selfaction:@selector(hideenClick) forControlEvents:UIControlEventTouchUpInside];

        [self.viewaddSubview:hidenButton];

        

        

}

#pragma  mark    -  背景图片

-(void)setBackImage{

    //1.创建背景图

    _imageView = [[UIImageViewalloc]initWithFrame:self.view.frame];

    //    imageView.backgroundColor=[UIColor redColor];

    //注意图片文件的格式

    

    NSDictionary *musicDic = self.Music[self.index];

    

        _imageView.image = [UIImageimageNamed:musicDic[@"image"]];

//

//    UIImage  *imaGe  = [UIImage imageNamed:@"gem.jpeg"];

//    _imageView.image  = imaGe;

    [self.view  addSubview:_imageView];

    

    

}

#pragma  mark    -  上面的VIEW

-(void)UpVIEW{

    //3. 上半部分

    //大的View

    /**

     这里注意引用的的时候要注意是weak还是strong，取决于变量的设置

     还有，注意循环调用，以及内催泄露等问题

     */

    self.upView = [[UIViewalloc]init];

    self.upView.frame = CGRectMake(0, 0, screnWidth, 60);

    self.upView.backgroundColor = [UIColorblackColor ];

    self.upView.alpha = 0.8;

    [self.viewaddSubview:self.upView];

    

    

    //左面的按钮

    UIButton *upButtonLeft = [[UIButtonalloc]init];

    upButtonLeft.frame = CGRectMake(10, 10, 44, 44);

    //    UIImage *imageLeftNomral= [UIImage imageNamed:@"top_back_white"];

    //    UIImage *imageLeftHight =[UIImage imageNamed:]

    [upButtonLeft  setImage: [UIImageimageNamed:@"top_back_white"]

                   forState:UIControlStateNormal];

    upButtonLeft.backgroundColor = [UIColorblackColor];

    [self.upViewaddSubview:upButtonLeft];

    

    

    //右面的按钮

    UIButton *upButtonRight = [[UIButtonalloc]init];

    upButtonRight.frame = CGRectMake(320,10, 44, 44);

    [upButtonRight setImage:[UIImageimageNamed:@"playing_list"] forState:UIControlStateNormal];

    [upButtonRight setImage:[UIImageimageNamed:@"playing_list_h"] forState:UIControlStateHighlighted];

    upButtonRight.backgroundColor = [UIColorblackColor];

    [self.upViewaddSubview:upButtonRight];

    

    

    //心形

    UIButton *upButtonRightSecond = [[UIButtonalloc]init];

    upButtonRightSecond.frame = CGRectMake(270,10, 44, 44);

    [upButtonRightSecond setImage:[UIImageimageNamed:@"playing_btn_love"] forState:UIControlStateNormal];

    [upButtonRightSecond setImage:[UIImageimageNamed:@"playing_btn_love_disable"] forState:UIControlStateHighlighted];

    upButtonRightSecond.backgroundColor = [UIColor blackColor];

    [self.upViewaddSubview:upButtonRightSecond];

    

    

    //心形点击事件

    

    [upButtonRightSecond  addTarget:self action:@selector(upButtonRightSecondClick:) forControlEvents:UIControlEventTouchUpInside];

    //中间名字

    

    NSDictionary *musicDic = self.Music[self.index];

    

        _centerLable = [[UILabelalloc]initWithFrame:CGRectMake(85, 5, screnWidth-170, 30)];

    _centerLable.text =  musicDic[@"singer"];

    _centerLable.textColor = [UIColorwhiteColor];

    _centerLable.textAlignment =NSTextAlignmentCenter;

    _centerLable.font = [UIFontsystemFontOfSize:20];

//    [_centerLable sizeToFit];

    [self.upViewaddSubview:_centerLable];

    

    _nameLable = [[UILabelalloc]initWithFrame:CGRectMake(85, 30, screnWidth-170, 30)];

    _nameLable.text = musicDic[@"song"];

    _nameLable.textAlignment =NSTextAlignmentCenter;

    _nameLable.textColor = [UIColorwhiteColor];

    _nameLable.font = [UIFont  systemFontOfSize:20];

    _nameLable.textAlignment = NSTextAlignmentCenter;

//    [_nameLable sizeToFit];

    [self.upViewaddSubview:_nameLable];

    

    

    

}

#pragma  mark    -  下半部分VIEW

-(void)downVIEW

{

    

    //4.下半部分

    //大的VIew

    _downView = [[UIViewalloc]init];

    _downView.frame = CGRectMake(0, 547, screnWidth, 120);

    _downView.backgroundColor = [UIColorblackColor];

    _downView.alpha = 0.7;

    [self.viewaddSubview:_downView];

    

    //中间的按钮

    _downCenterButton = [[UIButtonalloc]init];

    _downCenterButton.frame = CGRectMake(145, 10, 100, 100);

    [_downCenterButtonsetImage:[UIImageimageNamed:@"playing_btn_play_n"] forState:UIControlStateNormal];

    [_downCenterButtonsetImage:[UIImageimageNamed:@"playing_btn_play_h"] forState:UIControlStateHighlighted];

    //downCenterButton.backgroundColor = [UIColor blackColor];

    

    //点击事件

    [_downCenterButtonaddTarget:self action:@selector(downCenterButtonClick:) forControlEvents:UIControlEventTouchUpInside];

    [_downViewaddSubview:_downCenterButton];

    

    

    //右面的按钮

    _downCenterBUttonRightFirst = [[UIButtonalloc]init];

    _downCenterBUttonRightFirst.frame = CGRectMake(249, 20, 80, 80);

    [_downCenterBUttonRightFirstsetImage:[UIImageimageNamed:@"playing_btn_next_n"] forState:UIControlStateNormal];

    [_downCenterBUttonRightFirstsetImage:[UIImageimageNamed:@"playing_btn_next_h"] forState:UIControlStateHighlighted];

    // downCenterBUttonRightFirst.backgroundColor = [UIColor blackColor];

    [_downView  addSubview:_downCenterBUttonRightFirst];

    

    //右键的点击事件

    [_downCenterBUttonRightFirstaddTarget:self action:@selector(downCenterBUttonRightFirstClick) forControlEvents:UIControlEventTouchUpInside];

    

    

    //左面的按钮

    _downCenterBUttonLeftFirst = [[UIButtonalloc]init];

    _downCenterBUttonLeftFirst.frame = CGRectMake(60, 20, 80, 80);

    [_downCenterBUttonLeftFirstsetImage:[UIImageimageNamed:@"playing_btn_pre_n"] forState:UIControlStateNormal];

    [_downCenterBUttonLeftFirstsetImage:[UIImageimageNamed:@"playing_btn_pre_h"] forState:UIControlStateHighlighted];

    //downCenterBUttonRightFirst.backgroundColor = [UIColor blackColor];

    [_downViewaddSubview:_downCenterBUttonLeftFirst];

    

    

    //左键的点击事件

    [_downCenterBUttonLeftFirstaddTarget:self action:@selector(downCenterBUttonLeftFirstClick) forControlEvents:UIControlEventTouchUpInside];

    

    

#pragma  mark  slider 时间

    //滑动按钮以及时间

    

    UISlider  *slider = [[UISlideralloc]initWithFrame:CGRectMake(0, -5, screnWidth, 10)];

    self.slider = slider;

    [slider  setMinimumTrackImage:[UIImageimageNamed:@"playing_slider_play_left"] forState:UIControlStateNormal];

    [slider setMaximumTrackImage:[UIImageimageNamed:@"playing_slider_play_right"] forState:UIControlStateNormal];

    [slider setThumbImage:[UIImageimageNamed:@"playing_slider_thumb"] forState:UIControlStateNormal];

    [_downViewaddSubview:slider];

    

    //滑条的属性

    slider.maximumValue = 300;

    slider.minimumValue = 0;

    slider.value = 0;

    slider.tag = 2000;

    

    

    //滑动的时候会变值，此方法没有实现语歌曲的结合

    [slider addTarget:selfaction:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];

    

#pragma  mark  - 左边时间lable

    UILabel *leftLable = [[UILabelalloc]initWithFrame:CGRectMake(5, 5, 0, 0)];

    self.leftLable = leftLable;

     leftLable.text = @"00:00";

    leftLable.textColor = [UIColorwhiteColor];

    //leftLable.backgroundColor = [UIColor greenColor];

    leftLable.font = [UIFontsystemFontOfSize:15];

    [leftLable   sizeToFit];

    [_downViewaddSubview:leftLable];

    

    //时间的tag值

    leftLable.tag = 2001;

    

#pragma  mark  - 右边时间lable

    

    UILabel *rightLable = [[UILabelalloc]initWithFrame:CGRectMake(335, 5, 0, 0)];

    self.rightLable = rightLable;

    

    

    //加载时间(歌曲的总时间)

    float timeR= (float )self.player.duration;

    self.slider.maximumValue = timeR;

   _rightLable.text = [selfsccndChangeString:self.slider.maximumValue];

    

    //属性

    rightLable.textColor = [UIColorwhiteColor];

    // rightLable.backgroundColor = [UIColor greenColor];

    rightLable.font = [UIFontsystemFontOfSize:15];

    [rightLable   sizeToFit];

    [_downViewaddSubview:rightLable];

    

    

    //右面时间的tag值

    rightLable.tag = 2002;

}

#pragma  mark     -  隐藏点击事件

//上下View的隐藏

-(void)hideenClick{

      

    //动画隐藏

        [UIViewanimateWithDuration:0.5animations:^{

            if(_isHidem == NO)

            {

            self.upView.alpha = 0;

        _downView.alpha = 0;

            

            }

            elseif(_isHidem == YES){

                self.upView.alpha = 0.7;

                _downView.alpha = 0.7;

            }

            

            //取反

            _isHidem = !_isHidem;

        }];

}

//收藏事件（红心）

-(void)upButtonRightSecondClick:(UIButton *)sender

{

    

    if(sender.selected == NO)

    {

        [sender  setImage:[UIImageimageNamed:@"playing_btn_in_myfavor"] forState:UIControlStateNormal];

    }

    else{

           [sender  setImage:[UIImageimageNamed:@"playing_btn_love"] forState:UIControlStateNormal];

    }

    //取反

    sender.selected = !sender.selected;

}

#pragma  mark   -   音乐播放

-(void)downCenterButtonClick:(UIButton *)sender

{

    //播放，暂停

    if(sender.selected==NO)

    {

        [sender setImage:[UIImageimageNamed:@"playing_btn_pause_n"] forState:UIControlStateNormal];

        //计时器

         _timer =   [NSTimer  scheduledTimerWithTimeInterval:1target:selfselector:@selector(timerAction:) userInfo:nilrepeats:YES];

        [self.playerplay];

        self.timer = _timer;

        

    }

    else

    {

       [sender setImage:[UIImageimageNamed:@"playing_btn_play_n"] forState:UIControlStateNormal];

      //暂停

        [self.playerpause];

        [_timer   invalidate];

        

    }

    //取反

    sender.selected = ! sender.selected;

     }

#pragma  mark    -  计时器

 //计时器的方法

-(void)timerAction:(NSTimer *)timer

{

    

    _count++;

    self.slider.value = _count;

    self.leftLable.text = [selfsccndChangeString:_count];

    //如果slider的数值等于最大值，提转下一曲

    if(self.slider.value==self.slider.maximumValue)

    {

        

        if(self.index<self.Music.count)

        {

        //调用下一首

        [self  downCenterBUttonRightFirstClick];

        

        //调用点击播放按钮

        [self  downCenterButtonClick:_downCenterButton ];

        }

        else

        {

            [self.playerstop];

            self.downCenterButton.selected = NO;

            self.slider.value = 0;

            self.leftLable.text = @"00:00";

            

        }       

    }    

}

#pragma  mark  - 滑动的时候值会变化得方法（已经与歌曲结合）

-(void)sliderAction:(UISlider *)sender

{

    _count= sender.value;

    //控制当前时间，可以拖动滑条

    self.player.currentTime = _count;

    

    

}

    

    

    

#pragma  mark  -  秒数的改变

-(NSString *)sccndChangeString:(float )sender

{

    int   min = (int)sender/60;

    int  max = (int)sender%60;

    

    NSString *string = [NSStringstringWithFormat:@"%02d:%02d",min,max];

    return string;

    

}

#pragma  mark  -  加载数据

-(NSArray *)Music

{

    if(_Music == nil)

    {

        NSString *ptt = [[NSBundlemainBundle]pathForResource:@"music.plist"ofType:nil];

        NSArray *ayyayy = [NSArrayarrayWithContentsOfFile:ptt];

        _Music =ayyayy;

    }

    return_Music;

}

#pragma  mark 右键的点击事件

-(void)downCenterBUttonRightFirstClick

{

    self.index++;

    

    NSDictionary *musicDic = self.Music[self.index];

    

     self.centerLable.text = musicDic[@"singer"];

    self.nameLable.text = musicDic[@"song"];

    self.imageView.image = [UIImageimageNamed:musicDic[@"image"]];

    NSString *path = [[NSBundlemainBundle]pathForResource:musicDic[@"url"] ofType:nil];

         NSURL*url = [NSURLfileURLWithPath:path];

    self.player = [[AVAudioPlayeralloc]initWithContentsOfURL:url error:nil];

    

    

    //加载时间

    _count = 0;

    self.slider.value =0;

    self.leftLable.text = [self  sccndChangeString:self.slider.value];

    

     //重新启用计时器

    [_timerinvalidate];

    

    

#pragma  mark   -  每次点击下一首的时候刷新界面

    //隐藏

    [selfHidenVIEW];

    //调用背景

    [selfsetBackImage];

    

    //调用上半部分的VIEW

    [self  UpVIEW];

    

    // /调用下半部分

    [self  downVIEW];

    //[self HidenVIEW];

    

    //判断是否是最后一首

    _downCenterBUttonRightFirst.enabled = self.index != self.Music.count -1;

    _downCenterBUttonLeftFirst.enabled = self.index != 0;

}

#pragma  mark    -  左键的点击事件

-(void)downCenterBUttonLeftFirstClick

{

    self.index --;

  

    NSDictionary *musicDic = self.Music[self.index];

    

    self.centerLable.text = musicDic[@"singer"];

    self.nameLable.text = musicDic[@"song"];

    self.imageView.image = [UIImageimageNamed:musicDic[@"image"]];

  

   //加载音频

    NSString *path = [[NSBundlemainBundle]pathForResource:musicDic[@"url"] ofType:nil];

    NSURL*url = [NSURLfileURLWithPath:path];

    self.player = [[AVAudioPlayeralloc]initWithContentsOfURL:url error:nil];

    //加载时间

    _count = 0;

    self.slider.value =0;

    self.leftLable.text = [self  sccndChangeString:self.slider.value];

    

    

   #pragma  mark   -  每次点击下一首的时候刷新界面

    [_timerinvalidate];

    

    [selfHidenVIEW];

    

    //调用背景

    [selfsetBackImage];

    

    //调用上半部分的VIEW

    [self  UpVIEW];

    

    //调用下半部分

  [self  downVIEW];

    

    //判断是否是最后一首

    _downCenterBUttonLeftFirst.enabled = self.index != 0;

    _downCenterBUttonRightFirst.enabled = self.index != self.Music.count -1;

    

}

- (void)didReceiveMemoryWarning {

    [superdidReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

时间： 2024-10-13 16:16:46

QQ音乐界面以及基本功能的实现（代码）的相关文章

QQ音乐界面搭建以及部分功能的实现（纯代码）

这两天自己在试着做一个QQ音乐的界面搭建,以及部分功能的实现,因为还没学系线程等高级的内容,现在只是简单的搭建一些构架,也算是为以后做准备. 界面完成后能够实现收藏事件的发生,图片的切换,但是还不能够播放多首歌曲,正在完善中,现在只能播放一首歌曲,能够点击中间图片时,让上下两个VIEW实现动画状态的隐藏和显现,点击下一首歌曲时,能够实现图片以及歌名,歌手的切换,还有滚动条也能够实现.左边的时间能够准确计数,而右边的还没有实现,,点击播放暂停按钮时能够实现按钮形态的改变,暂时功能就这么多. 接下来

QQ音乐产品经理黄楚雄：产品与用户的情感联系

QQ 音乐产品经理关于产品的一些感悟. 2014 年是 QQ 音乐的第十个产品年度,这十年我们跟用户一起见证了整个互联网音乐的发展.2011 年的 3 月 QQ 音乐公布了第一个 iPhone 平台的版本号,在这三年多的时间里,QQ 音乐一共公布了 44 个版本号,这之中有非常多值得讲的故事和产品的情怀. 简单与复杂 为什么要把程序弄得这么复杂? 这样对用户来说,是否简单了! 这是 QQ 音乐开发的同学与产品经理间非经常见的一段对话.最初 QQ 音乐的版本号的时候,我们经常接到用户这种反馈:睡觉

QQ音乐/酷狗音乐锁屏控制实现原理

我实现的效果 混乱的锁屏控制 Android自4.0版本, 也就是API level 14开始, 加入了锁屏控制的功能, 相关的类是RemoteControlClient, 这个类在API level 21中被标记为deprecated, 被新的类MediaSession所替代. 我们的音乐App中最开始使用的是原生锁屏控制API, 说实话这个API不好用, 遇到了一些小坑, 最要命的是不同品牌的手机, 锁屏界面长的还不一样, 就连我自己都没见过原生4.0的锁屏控制界面是什么样的. 国内的手机厂

使用网易云音乐，丢掉QQ音乐吧

我是一个听音乐的重度用户,基本上每天大约有三分之一的时间里我在使用网易云音乐去听音乐.包括工作写代码的时候,跑步的时候,去上班的途中我都去听.首先需要声明的是,在这里我不是故意的去抹黑其他的音乐产品,我只是谈谈我一个真实用户的真切感受. 由于喜欢听音乐的原因,自从开始接触互联网后,我便开始接触了很多音乐播放类产品,从早期的千千静听,酷我音乐,酷狗音乐,QQ音乐,豆瓣FM,虾米音乐,JingFM, 多米音乐,落网等等,有太多的音乐产品,我都数不过来.其实不难看出,网易做音乐类产品还是近两年才发力,

音乐app的分析（例：QQ音乐）

<一>QQ?乐最核心的功能就是歌曲的播放. 播放音频,首先想到可以用AVFoundation框架,来完成播放音乐的主要功能.但是AVFoundation只能播放本地的音乐,不能在线播放.虽然可以先从网络下载资源到本地再播放,但是必须要整首歌都下载完成后才能播放,这样效果并不好. ! 如果想在线播放,可以选择AudioToolbox框架中的音频队列服务Audio Queue Services.音频队列服务可以完成音频的录制和播放. 一个?频服务队列Audio Queue有三部分组成: 三个缓冲器

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

Android UI之自定义--最简单的仿QQ音乐歌词颜色渐变 记得刚开始做android的时候,就发现QQ音乐歌词颜色渐变的效果,就在网上搜索过,但是就是没有找到满意的.今天突然用QQ音乐听歌的时候,看到歌词颜色渐变,决定来分析看看,没想到实现原来如此简单.这篇只是将最简单的歌词颜色渐变功能,不包括歌词滚动等效果. 首先来看下QQ音乐歌词界面 实现步骤 从界面上可以看出,是通过不同颜色的文本叠加所形成的视觉效果.那么android文本一般使用TextView实现,那就来试试用TextView在

将 QQ 音乐、网易云音乐和虾米音乐资源「整合」一起的Chrome 扩展Listen 1

原文地址:http://whosmall.com/?post=418 本文标签: Chrome扩展 Chrome浏览器 Chrome扩展Listen1 音乐资源整合 Listen1安装方法 在 Chrome 上安装了这款名为 Listen 1 的插件,妈妈可是再也不用担心你找不到想听的歌了.它将 QQ 音乐.网易云音乐以及虾米音乐的音乐资源「整合」在了一起,你只需要输入音乐关键词,就可以方便地三大曲库中跳转搜索. 安装方法 Listen 1 的安装方法与一般的 Chrome Extension

轻仿QQ音乐之音频歌词播放、锁屏歌词-b

先上效果图 歌词播放界面 音乐播放界面 锁屏歌词界面 一. 项目概述 前面内容实在是太基础..只想看知识点的同学可以直接跳到第三部分的干货 项目播放的mp3文件及lrc文件均来自QQ音乐 本文主要主要讲解锁屏歌词的实现,音频.歌词的播放网上资源略多,因此不做重点讲解,项目也是采取最简单的MVC+storyboard方式 项目GitHub地址: https://github.com/PengfeiWang666/WPFMusicPlayer 音乐模型-->WPFMusic /** 图片 */ @p

swift版QQ音乐播放器(二)

一 完善部分的QQ音乐效果图 二 需要完善点 1 歌曲的切换和暂停播放 2 歌曲当前播放时间和歌曲总时间的更新 3 进度条的处理 4 歌手头像处理 5 头像动画效果 6 歌词的进度显示 8 完善细节 三 添加歌曲展示页面中的动画效果 1 代码书写位置 : 由于展示歌词的控制器的UITableViewController,那么我们可以使用代理方法.当用户拖动tableView的时候,会调用一个方法,在该方法中实现动画效果 2 思路 : 通过拿到第一个cell和最后一个cell来计算中间cell的索