[iOS 多线程 & 网络 - 3.0] - 在线动画Demo

A.需求

• 所有数据都从服务器下载
• 动画列表包含：图片、动画名标题、时长副标题
• 点击打开动画观看

 

code source: https://github.com/hellovoidworld/VideoOnlineDemo

server source:  https://github.com/hellovoidworld/MyOnlineVideoDemoServer

 

B.实现

1.显示图片和基本信息

 

服务器端的json信息：

{ "videos": [

{

  "name":"驯龙高手1",

  "length":"16秒",

  "image":"images/[20150124-180852-0].PNG",

  "video":"videos/1.MP4"

},

{

  "name":"驯龙高手2",

  "length":"21秒",

  "image":"images/[20150124-180905-1].PNG",

  "video":"videos/2.MP4"

},

{

  "name":"驯龙高手3",

  "length":"14秒",

  "image":"images/[20150124-180908-2].PNG",

  "video":"videos/3.MP4"

},

...

]

}

 

 

（1）使用tableView来布置界面

 

（2）创建一个模型，用来装载录像信息

 //
 //  HVWVideo.h
 //  VideoOnlineDemo
 //
 //  Created by hellovoidworld on 15/1/24.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <Foundation/Foundation.h>

 @interface HVWVideo : NSObject

 @property(nonatomic, strong) NSString *name;
 @property(nonatomic, strong) NSString *length;
 @property(nonatomic, strong) NSString *image;
 @property(nonatomic, strong) NSString *video;

 + (instancetype) videoWithDict:(NSDictionary *) dict;

 @end

 

 

（3）发送请求 & 接收服务器信息

• 使用代理方法发送请求，接收json数据
• 解析json数据，封装到模型中
• 使用SDWebImage框架加载服务器图片

 //
 //  HVWVideoViewController.m
 //  VideoOnlineDemo
 //
 //  Created by hellovoidworld on 15/1/25.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWVideoViewController.h"
 #import "HVWVideo.h"
 #import "UIImageView+WebCache.h"

 #define ServerIP @"http://192.168.0.21:8080/MyTestServer"

 @interface HVWVideoViewController () <UITableViewDataSource, UITableViewDelegate, NSURLConnectionDataDelegate>

 /** 接收到的二进制数据 */
 @property(nonatomic, strong) NSMutableData *data;

 /** 所有的录像模型数据 */
 @property(nonatomic, strong) NSArray *videos;

 @end

 @implementation HVWVideoViewController

 - (void)viewDidLoad {
     [super viewDidLoad];

     self.tableView.dataSource = self;
     self.tableView.delegate = self;

     // 读取服务器数据
     [self acceptDataFromServer];
 }

 - (void)didReceiveMemoryWarning {
     [super didReceiveMemoryWarning];
     // Dispose of any resources that can be recreated.
 }

 /** 读取服务器数据 */
 - (void) acceptDataFromServer {
     NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"%@/video", ServerIP]];
     NSURLRequest *request = [NSURLRequest requestWithURL:url];
     NSURLConnection *connection = [NSURLConnection connectionWithRequest:request delegate:self];
     [connection start];
 }

 #pragma mark - UITableViewDataSource
 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
     return ;
 }

 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
     return self.videos.count;
 }

 - (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
     static NSString *ID = @"VideoCell";

     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
     if (nil == cell) {
         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:ID];
     }

     HVWVideo *video = self.videos[indexPath.row];
     // 设置标题 & 副标题
     cell.textLabel.text = video.name;
     cell.detailTextLabel.text = video.length;

     // 下载图片
     NSString *imageUrlStr = [NSString stringWithFormat:@"%@/%@", ServerIP, video.image];
     NSURL *imageUrl = [NSURL URLWithString:imageUrlStr];
     [cell.imageView setImageWithURL:imageUrl placeholderImage:[UIImage imageNamed:@"placeholder"]];

     // 下载录像

     return cell;
 }

 #pragma mark - UITableViewDelegate

 #pragma mark - NSURLConnectionDataDelegate 代理方法
 - (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
     NSLog(@"开始接收数据");
     self.data = [NSMutableData data];
 }

 - (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
     NSLog(@"接收数据中...");
     [self.data appendData:data];
 }

 - (void)connectionDidFinishLoading:(NSURLConnection *)connection {
     NSLog(@"接收数据完毕");

     if (self.data) {
         // 加载录像资料
         NSDictionary *jsonDict = [NSJSONSerialization JSONObjectWithData:self.data options:NSJSONReadingMutableLeaves error:nil];

         //        NSLog(@"%@", jsonDict);
         NSArray *jsonArray = jsonDict[@"videos"];
         //        NSLog(@"%@", jsonArray);

         NSMutableArray *videoArray = [NSMutableArray array];
         for (NSDictionary *dict in jsonArray) {
             NSLog(@"%@", dict);
             HVWVideo *video = [HVWVideo videoWithDict:dict];
             [videoArray addObject:video];
         }
         self.videos = videoArray;

         [self.tableView reloadData];
     }

 }

 @end

 

（4）调整cell高度，创建自定义cell类，调整尺寸、分割线

 //
 //  HVWVideoCell.m
 //  VideoOnlineDemo
 //
 //  Created by hellovoidworld on 15/1/25.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWVideoCell.h"
 #import "UIImageView+WebCache.h"

 #define ServerIP @"http://192.168.0.21:8080/MyTestServer"

 @interface HVWVideoCell()

 /** 分割线 */
 @property(nonatomic, strong) UIView *separatorLine;

 @end

 @implementation HVWVideoCell

 + (instancetype) cellWithTableView:(UITableView *) tableView {
     static NSString *ID = @"VideoCell";

     HVWVideoCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
     if (nil == cell) {
         cell = [[HVWVideoCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
     }

     return cell;
 }

 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
     if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
         // 重写样式
         // 自定义分割写
         UIView *separatorLine = [[UIView alloc] init];
         separatorLine.backgroundColor = [UIColor lightGrayColor];
         separatorLine.alpha = 0.3;
         [self.contentView addSubview:separatorLine];

         self.separatorLine = separatorLine;
     }

     return self;
 }

 /** 重写内部子控件的位置尺寸 */
 - (void)layoutSubviews {
     [super layoutSubviews];

     // 设置图片
     CGFloat imageWidth = ;
     CGFloat imageHeight = ;
     CGFloat imageX = ;
     CGFloat imageY = (self.frame.size.height - imageHeight) / ;
     CGRect imageFrame = CGRectMake(imageX, imageY, imageWidth, imageHeight);
     self.imageView.frame = imageFrame;

     // 设置标题
     CGRect textFrame = self.textLabel.frame;
     textFrame.origin.x = imageX + imageWidth + ;
     self.textLabel.frame = textFrame;

     // 设置副标题
     CGRect detailFrame = self.detailTextLabel.frame;
     detailFrame.origin.x = self.textLabel.frame.origin.x;
     self.detailTextLabel.frame = detailFrame;

     // 设置分割线
     CGFloat separatorLineY = self.frame.size.height - ;
     self.separatorLine.frame = CGRectMake(, separatorLineY, self.frame.size.width, );
 }

 /** 设置数据 */
 - (void)setVideo:(HVWVideo *)video {
     _video = video;

     // 设置标题 & 副标题
     self.textLabel.text = video.name;
     self.detailTextLabel.text = video.length;

     // 下载图片
     NSString *imageUrlStr = [NSString stringWithFormat:@"%@/%@", ServerIP, video.image];
     NSURL *imageUrl = [NSURL URLWithString:imageUrlStr];
     [self.imageView setImageWithURL:imageUrl placeholderImage:[UIImage imageNamed:@"placeholder"]];
 }

 @end

 

2.播放视频

 

（1）引入MediaPlayer类

 #import <MediaPlayer/MediaPlayer.h>

 

（2）使用MPMoviePlayerViewController 播放视频

 - (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
     // 加载视频
     HVWVideo *video = self.videos[indexPath.row];
     NSString *videoUrlStr = [NSString stringWithFormat:@"%@/%@", ServerIP, video.video];
     NSURL *videoUrl = [NSURL URLWithString:videoUrlStr];

     NSLog(@"%@", videoUrlStr);

     // 使用MediaPlayer框架播放视频
     MPMoviePlayerViewController *mvController = [[MPMoviePlayerViewController alloc] initWithContentURL:videoUrl];
     [self presentMoviePlayerViewControllerAnimated:mvController];
 }

 

（3）阻止app进入后台之后退出视频

a.默认app进入后台之后，会自动把视频播放的view缩回去

 

b.自定义一个集成MPMoviePlayerViewController的类，通过取消接收“进入后台”消息来阻止此操作

 //
 //  HVWMoviePlayerViewController.m
 //  VideoOnlineDemo
 //
 //  Created by hellovoidworld on 15/1/25.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWMoviePlayerViewController.h"

 @interface HVWMoviePlayerViewController ()

 @end

 @implementation HVWMoviePlayerViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view.

     // 取消接收程序进入后台的通知
     [[NSNotificationCenter defaultCenter] removeObserver:self name:UIApplicationDidEnterBackgroundNotification object:nil];
 }

 /** 重写屏幕方向方法 */
 - (NSUInteger)supportedInterfaceOrientations {
     // 横屏，向左/右
     return UIInterfaceOrientationMaskLandscape;
 }

 @end

 

 

 

 

（4）强制使用横屏播放

(默认是3个方向都可以播放)

 /** 重写屏幕方向方法 */
 - (NSUInteger)supportedInterfaceOrientations {
     // 横屏，向左/右
     return UIInterfaceOrientationMaskLandscape;
 }