An example to analyze the basic points of application development of music player in IOS _ios

Source: Internet
Author: User
Tags reserved uikit

First, adjust the structure of the project, import the necessary material
The restructured project structure is as follows:

Two, new two controller
(1) Create a new controller to display the music file list interface, which inherits from Uitableviewcontroller

(2) Create a new controller to display the playback interface, which inherits from Uiviewcontroller

(3) in storyboard, remove the previous controller, replace it with a navigation controller, and set the Tableviewcontroller to associate with the previously created Controller class

Third, the music file list Controller Basic interface constructs
(1) New model of a music file
Build the model according to the plist file:


The code for the music model is as follows:
YYMusicModel.h file

Copy Code code as follows:

//
YYMusicModel.h
20-Audio Processing (music player 1)
//
Created by Apple on 14-8-13.
Copyright (c) 2014 Yangyong. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface Yymusicmodel:nsobject
/**
* Song name
*/
@property (copy, nonatomic) NSString *name;
/**
* Song Big picture
*/
@property (copy, nonatomic) NSString *icon;
/**
* The name of the song
*/
@property (copy, nonatomic) NSString *filename;
/**
* The name of the lyrics
*/
@property (copy, nonatomic) NSString *lrcname;
/**
* Singer
*/
@property (copy, nonatomic) NSString *singer;
/**
* Singer Icon
*/
@property (copy, nonatomic) NSString *singericon;
@end


(2) Third-party framework using a dictionary-rotating model

Some of the relevant code is as follows:

The interface at this point shows the following effect:

(3) Add a uiimageview category, adjust the singer's avatar (square--> round)
The implementation code for the classification is as follows:
Uiimage+yy.h file

Copy Code code as follows:

#import <UIKit/UIKit.h>

@interface UIImage (YY)
+ (Instancetype) Circleimagewithname: (NSString *) name BorderWidth: (cgfloat) borderwidth bordercolor: (UIColor *) bordercolor;
@end

UIIMAGE+YY.M file
Copy Code code as follows:

#import "Uiimage+yy.h"
#import <objc/message.h>

@implementation UIImage (YY)
+ (Instancetype) Circleimagewithname: (NSString *) name BorderWidth: (cgfloat) borderwidth bordercolor: (UIColor *) BorderColor
{
1. Loading original artwork
UIImage *oldimage = [UIImage imagenamed:name];

2. Open context
CGFloat Imagew = oldImage.size.width + 2 * borderwidth;
CGFloat Imageh = oldImage.size.height + 2 * borderwidth;
Cgsize imagesize = Cgsizemake (Imagew, Imageh);
Uigraphicsbeginimagecontextwithoptions (ImageSize, NO, 0.0);

3. Get the current context
Cgcontextref CTX = Uigraphicsgetcurrentcontext ();

4. Draw a border (big circle)
[BorderColor set];
CGFloat Bigradius = Imagew * 0.5; Circle radius
CGFloat CenterX = Bigradius; Center
CGFloat centery = Bigradius;
Cgcontextaddarc (CTX, CenterX, CenterY, Bigradius, 0, M_PI * 2, 0);
Cgcontextfillpath (CTX); Draw a Circle

5. Small round
CGFloat Smallradius = bigradius-borderwidth;
Cgcontextaddarc (CTX, CenterX, CenterY, Smallradius, 0, M_PI * 2, 0);
Cropping (what is behind the drawing will be affected by the cropping)
Cgcontextclip (CTX);

6. Drawing
[Oldimage Drawinrect:cgrectmake (BorderWidth, BorderWidth, OldImage.size.width, OldImage.size.height)];

7. Take pictures
UIImage *newimage = Uigraphicsgetimagefromcurrentimagecontext ();

8. End Context
Uigraphicsendimagecontext ();

return newimage;
}
@end


Use of categories:

Effect of implementation:

(4) It is recommended to use a third party framework to handle color

The code involved:

Iv. Implementation Code
yymusicsviewcontroller.m File

Copy Code code as follows:

//
Yymusicsviewcontroller.m
20-Audio Processing (music player 1)
//
Created by Apple on 14-8-13.
Copyright (c) 2014 Yangyong. All rights reserved.
//

#import "YYMusicsViewController.h"
#import "YYMusicModel.h"
#import "MJExtension.h"
#import "Uiimage+yy.h"
#import "Colours.h"

@interface Yymusicsviewcontroller ()
@property (Nonatomic,strong) Nsarray *musics;
@end


Copy Code code as follows:

@implementation Yymusicsviewcontroller
#pragma mark-lazy Load
-(Nsarray *) musics
{
if (_musics==nil) {
_musics=[yymusicmodel objectarraywithfilename:@ "Musics.plist"];
}
return _musics;
}


-(void) viewdidload
{
[Super Viewdidload];

}

#pragma mark-table View data source
/**
* How many groups are there altogether?
*/
-(Nsinteger) Numberofsectionsintableview: (UITableView *) TableView
{
return 1;
}
/**
* How many lines per group
*/
-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) Section
{
return self.musics.count;
}
/**
* Every cell in each group.
*/
-(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) IndexPath
{
Static NSString *id=@ "ID";
UITableViewCell *cell=[tableview Dequeuereusablecellwithidentifier:id];
if (Cell==nil) {
Cell=[[uitableviewcell Alloc]initwithstyle:uitableviewcellstylesubtitle Reuseidentifier:id];
}
To remove a data model
Yymusicmodel *model=self.musics[indexpath.row];
Cell.textlabel.text=model.name;
Cell.detailtextlabel.text=model.singer;
Cell.imageview.image=[uiimage CircleImageWithName:model.singerIcon borderwidth:1 Bordercolor:[uicolor skybluecolor ]];
return cell;
}
/**
* Set the height of each cell
*/
-(CGFloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) Indexpath
{
return 70;
}

/**
* Click event for cell
*/
-(void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) Indexpath
{
Uncheck the line that was clicked
[TableView Deselectrowatindexpath:indexpath Animated:yes];

}
@end


v. Improvement
To encapsulate the Tableviewcell code:
Implementation: Create a new Yymusiccell class, inherited from UITableViewCell.
The package code is as follows:
YYMusicCell.h file
Copy Code code as follows:

//
YYMusicCell.h
20-Audio Processing (music player 1)
//
Created by Apple on 14-8-13.
Copyright (c) 2014 Yangyong. All rights reserved.
//

#import <UIKit/UIKit.h>
@class Yymusicmodel;
@interface Yymusiccell:uitableviewcell
+ (Instancetype) Cellwithtableview: (UITableView *) TableView;
@property (Nonatomic,strong) Yymusicmodel *music;
@end


YYMUSICCELL.M file
Copy Code code as follows:

//
yymusiccell.m
20-Audio Processing (music player 1)
//
Created by Apple on 14-8-13.
Copyright (c) 2014 Yangyong. All rights reserved.
//

#import "YYMusicCell.h"
#import "YYMusicModel.h"
#import "Colours.h"
#import "Uiimage+yy.h"

@implementation Yymusiccell
Returns a cell
+ (Instancetype) Cellwithtableview: (UITableView *) TableView
{
Static NSString *id=@ "ID";
Yymusiccell *cell=[tableview Dequeuereusablecellwithidentifier:id];
if (Cell==nil) {
Cell=[[yymusiccell Alloc]initwithstyle:uitableviewcellstylesubtitle Reuseidentifier:id];
}
return cell;
}

-(void) Setmusic: (Yymusicmodel *) Music
{
_music=music;
Self.textlabel.text=music.name;
Self.detailtextlabel.text=music.singer;
Self.imageview.image=[uiimage CircleImageWithName:music.singerIcon borderwidth:1 Bordercolor:[uicolor skybluecolor ]];
}
@end


YYMUSICSVIEWCONTROLLER.M file
Copy Code code as follows:

//
Yymusicsviewcontroller.m
20-Audio Processing (music player 1)
//
Created by Apple on 14-8-13.
Copyright (c) 2014 Yangyong. All rights reserved.
//

#import "YYMusicsViewController.h"
#import "YYMusicModel.h"
#import "MJExtension.h"
#import "YYMusicCell.h"

@interface Yymusicsviewcontroller ()
@property (Nonatomic,strong) Nsarray *musics;
@end


Copy Code code as follows:

@implementation Yymusicsviewcontroller
#pragma mark-lazy Load
-(Nsarray *) musics
{
if (_musics==nil) {
_musics=[yymusicmodel objectarraywithfilename:@ "Musics.plist"];
}
return _musics;
}

-(void) viewdidload
{
[Super Viewdidload];
}

#pragma mark-table View data source
/**
 * Total number of groups
 */
-(Nsinteger) Numberofsectionsintableview: (UITableView *) TableView
{
    return 1;
}
/**
 * How many rows per group
 */
-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: ( Nsinteger) Section
{
    return Self.musics.count
}
/**
 * the cell
 */
per row for each group-(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) Indexpath
{
    Yymusiccell *cell=[yymusiccell Cellwithtableview:tableview];
    Cell.music=self.musics[indexpath.row];
    return cell;
}
/**
 *  Setting the height of each cell
 */
-(CGFloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) Indexpath
{
    return;
}

/**
* Click event for cell
*/
-(void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) Indexpath
{
Uncheck the line that was clicked
[TableView Deselectrowatindexpath:indexpath Animated:yes];

}
@end


Implementation effect:

Vi. Supplementary Notes

Attention to the details of the processing

(1) Uiimageview classification, square picture cut to round

(2) Color processing, the recommended color processing framework in the article provides a large number of colors.

(3) Uncheck the line cell that is clicked.

Copy Code code as follows:

[TableView Deselectrowatindexpath:indexpath Animated:yes];

(4) Encapsulation of Tableviewcell

Seven, jump
1. Jump to the Music playback interface method selection
(1) Using modal jumps (also divided into manual and automatic)
(2) Use Xib and set jump
2. Analysis of two methods
You can use modal methods to add a controller to associate the controller with the music playback controller class, to get out of line, to set the identifier, and to perform segue in the cell's click event.
Step Description:
(1) A new controller is dragged into the storyboard and then associated with the playing controller class.

(2) Set up manual jump

(3) Set the identifier of the segue

(3) Jump code processing

The reasons for not recommending using modal are as follows:
If you want to jump back to the music list interface when you select a piece of music to jump to the playback screen, the most common practice is to add a button to the music playback controller.
When clicked, destroy the controller (dismissed). But the controller destroys the music that is playing.
And because the layout of the playback interface controller is fixed, the method chosen here is to create using Xib.
3. Method of Selection
Create a new xib that corresponds to the music playback controller.
The structure of the xib is shown in the following illustration:

Details: The controller only needs to be created once, so it is recommended to use lazy load, of course, but also to set the player as a single example

Copy Code code as follows:

//
Yymusicsviewcontroller.m
//

#import "YYMusicsViewController.h"
#import "YYMusicModel.h"
#import "MJExtension.h"
#import "YYMusicCell.h"
#import "YYPlayingViewController.h"

@interface Yymusicsviewcontroller ()
@property (Nonatomic,strong) Nsarray *musics;
@property (Nonatomic,strong) Yyplayingviewcontroller *playingviewcontroller;
@end


Copy Code code as follows:

@implementation Yymusicsviewcontroller
#pragma mark-lazy Load
-(Nsarray *) musics
{
if (_musics==nil) {
_musics=[yymusicmodel objectarraywithfilename:@ "Musics.plist"];
}
return _musics;
}
-(Yyplayingviewcontroller *) Playingviewcontroller
{
if (_playingviewcontroller==nil) {
_playingviewcontroller=[[yyplayingviewcontroller Alloc]init];
}
return _playingviewcontroller;
}

4.xib Internal details:
(1) The constraint has been implemented to fit IOS6 and iOS7.
(2) Set the music name and the singer's view set to translucent, set the method as follows:

Set to 30%

Note: Do not set transparency on the property panel of the control in storyboard (so that the child controls in this control are equally transparent).
Not recommended Practices:

(3) button click to Glow

(4) Setting view hiding can save some performance. (Reference code)
(5) in the process of switching the controller, the Settings window can not be clicked (this is done to prevent users repeatedly click on the song name will appear problems).

5. Add:
The UIView classification is dragged into the project code to facilitate the calculation of the frame

6. The code involved
Provides a common object method interface in the. h file of the playback controller
YYPlayingViewController.h file

Copy Code code as follows:

YYPlayingViewController.h

#import <UIKit/UIKit.h>

@interface Yyplayingviewcontroller:uiviewcontroller
Display Controller
-(void) show;
@end


YYPLAYINGVIEWCONTROLLER.M file
Copy Code code as follows:

//
Yyplayingviewcontroller.m
//

#import "YYPlayingViewController.h"

@interface Yyplayingviewcontroller ()
-(ibaction) exit;

@end


Copy Code code as follows:

@implementation Yyplayingviewcontroller
Public methods of #pragma mark-
-(void) show
{
1. Disable click events for the entire app
UIWindow *window=[uiapplication Sharedapplication].keywindow;
Window.userinteractionenabled=no;

2. Add Playback interface
Sets the size of the view to cover the entire window
Self.view.frame=window.bounds;
Set view display
Self.view.hidden=no;
Add a view to the window
[Window AddSubview:self.view];

3. Use animation to show view
Self.view.y=self.view.height;
[UIView animatewithduration:0.25 animations:^{
self.view.y=0;
} completion:^ (BOOL finished) {
Window.userinteractionenabled=yes;
}];
}
#pragma mark-Internal Button-monitoring method
Back button
-(ibaction) Exit {
1. Disable click events for the entire app
UIWindow *window=[uiapplication Sharedapplication].keywindow;
Window.userinteractionenabled=no;

2. Animated hidden View
[UIView animatewithduration:0.25 animations:^{
Self.view.y=window.height;
} completion:^ (BOOL finished) {
Window.userinteractionenabled=yes;
Setting view hiding can save you some performance
Self.view.hidden=yes;
}];
}
@end

The processing code in the Click event of the cell:
Copy Code code as follows:

/**
* Click event for cell
*/
-(void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) Indexpath
{
Uncheck the line that was clicked
[TableView Deselectrowatindexpath:indexpath Animated:yes];

Calling public methods
[Self.playingviewcontroller show];

Perform segue jump
[Self performseguewithidentifier:@ "music2playing" sender:nil];
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.