用法簡單的圖片和視頻播放的架構Demo，視頻播放架構demo

用法簡單的圖片和視頻播放的架構Demo，視頻播放架構demo

　　最近在惡補自己不足的基礎知識,偶然在一個QQ群裡看到作為同行業的大神們在開源自己的代碼。並且在炫耀說讓我們找Bug,於是出於好奇就看了下，點開了一個關於圖片和視頻播放的Demo。也就是接下來我要說的這個Demo。

　　至於為什麼要寫說一下這個Demo,是因為最近做的項目有涉及這方面的知識。反正不管出於何種原因，多學點知識總沒有錯的。下面簡單介紹下此Demo的功能。

　　功能:

支援哪些狀態：

　　1.圖片發行（網狀圖片瀏覽、流水布局)

　　2.圖片未發布（本地圖片上傳\發布\預覽）

　　3.視頻播放

支援哪些布局：

　　流水布局 、 線性布局

支援哪些手勢：

　　單擊 、雙擊 、捏合 、旋轉、拖拽、側滑

什麼地方可以用到這個架構：

　　主要用於社交app,用於呈現一組圖片或播放一些標準的MP4檔案。

依賴哪些第三方架構：

• 圖片瀏覽依賴架構
  • MBProgressHUD
  • SDWebImage
• 視頻播放依賴架構
  • HttpServer

PYPhotosView架構的主要類PYPhotosView

@interface PYPhotosView : UIScrollView/** 代理 */@property (nonatomic, weak) id<PYPhotosViewDelegate> delegate;/** 網狀圖片相簿 */@property (nonatomic, strong) NSArray *photos;/** 本地相簿圖片數組(預設最多為九張,當傳入圖片數組長度超過九張時，取前九張) */@property (nonatomic, strong) NSMutableArray *images;/** 視頻連結(視頻來自網路) **/@property (nonatomic, copy) NSString *movieNetworkUrl;/** 本地視頻地址(帶有檔案類型尾碼) */@property (nonatomic, copy) NSString *movieLocalUrl;/** 所有圖片的狀態（預設為發行狀態） */@property (nonatomic, assign) PYPhotosViewState photosState;/** 圖片布局（預設為流水布局） */@property (nonatomic, assign) PYPhotosViewLayoutType layoutType;/** 圖片分頁指示類型(預設為pageControll。當圖片超過九張，改為label顯示) */@property (nonatomic, assign) PYPhotosViewPageType pageType;/** 圖片間距（預設為5） */@property (nonatomic, assign) CGFloat photoMargin;/** 圖片的寬 (預設為70) */@property (nonatomic, assign) CGFloat photoWidth;/** 圖片的高 (預設為70) */@property (nonatomic, assign) CGFloat photoHeight;/** 每行最多個數（預設為3）, 當圖片布局為線性布局時，此設定失效 */@property (nonatomic, assign) NSInteger photosMaxCol;/** 當圖片上傳前，最多上傳的張數，預設為9 */@property (nonatomic, assign) NSInteger imagesMaxCountWhenWillCompose;/** 快速建立photosView對象 */+ (instancetype)photosView;/** photos : 儲存圖片連結的數組 */+ (instancetype)photosViewWithPhotos:(NSArray *)photos;/** images : 儲存本地圖片的數組 */+ (instancetype)photosViewWithImages:(NSMutableArray *)images;/** * photos : 儲存圖片連結的數組 * type : 布局類型（預設為流水布局） */+ (instancetype)photosView:(NSArray *)photos layoutType:(PYPhotosViewLayoutType)type;/**  * photos : 儲存圖片連結的數組 * maxCol : 每行最多顯示圖片的個數 */+ (instancetype)photosView:(NSArray *)photos photosMaxCol:(NSInteger)maxCol;/** 根據圖片個數和圖片狀態自動計算出PYPhontosView的size */- (CGSize)sizeWithPhotoCount:(NSInteger)count photosState:(NSInteger)state;/** * 重新整理圖片(未發布) * images : 新的圖片數組 */- (void)reloadDataWithImages:(NSMutableArray *)images;@end

如何使用PYPhotosView

• 使用Cocoapods:
  • pod "PYPhotosView"
  • 匯入主標頭檔#import <PYPhotosView.h>

• 手動匯入：

  • 將PYPhotosView檔案夾中的所有檔案拽入項目中
  • 匯入主標頭檔#import "PYPhotosView.h"
  • 使用注意:如果項目本來就有依賴的第三方架構：MBProgressHUD（用於圖片瀏覽、發布）、SDWebImage（用於圖片瀏覽、發布）、HttpServer（用於視頻播放、緩衝），就不必重複匯入, 如果沒有，選擇Dependency檔案夾中，項目不存在的架構拽入項目。

  視頻播放使用注意：

  需要在AppDelegate.m匯入 HTTPServer.h、DDLog.h、DDTTYLogger.h標頭檔並實現以下這些方法（具體參考PYPhotosViewExample中的AppDelegate.m）檔案

  - (void)startServer{// Start the server (and check for problems)NSError *error;if([httpServer start:&error]){    NSLog(@"Started HTTP Server on port %hu", [httpServer listeningPort]);}else{    NSLog(@"Error starting HTTP Server: %@", error);}}// 程式啟動完畢調用- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {[DDLog addLogger:[DDTTYLogger sharedInstance]];// 建立本機伺服器httpServer = [[HTTPServer alloc] init];// 設定通訊類型為tcp[httpServer setType:@"_http._tcp."];// 設定連接埠[httpServer setPort:12345];// Serve files from our embedded Web folderNSString *webPath = [NSHomeDirectory() stringByAppendingPathComponent:@"Library/Caches/PYPhotosView/Temp"];NSFileManager *fileManager=[NSFileManager defaultManager];if(![fileManager fileExistsAtPath:webPath]){    [fileManager createDirectoryAtPath:webPath withIntermediateDirectories:YES attributes:nil error:nil];}[httpServer setDocumentRoot:webPath];[self startServer];return YES;}// 程式進入後台運行時調用- (void)applicationDidEnterBackground:(UIApplication *)application{[httpServer stop];}// 程式回到前台運行時調用- (void)applicationWillEnterForeground:(UIApplication *)application{[self startServer];}

具體使用（詳情見樣本程式PYPhotosViewExample）

• 發行（網狀圖片瀏覽）

  範例程式碼：

// 1.1 建立圖片連結數組NSMutableArray *imageUrls = [NSMutableArray array];  for (int i = 0; i < 9; i++) {      // 1.2 圖片連結      NSString *imageUrl = [NSString stringWithFormat:@"https://github.com/iphone5solo/learngit/raw/master/imagesForPhotosView/image%02d.jpg", i + 1];      // 1.3 添加圖片連結      [imageUrls addObject:imageUrl];  }  // 2. 建立一個photosView  PYPhotosView *photosView = [PYPhotosView photosViewWithPhotos:imageUrls];  // 3. 添加photosView  [self.view addSubview:photosView];

• 未發布（本地圖片上傳\發布\預覽）

  範例程式碼：

    // 1. 建立本地圖片數組    NSMutableArray *imagesM = [NSMutableArray array];    for (int i = 0; i < arc4random_uniform(4) + 1; i++) {        [imagesM addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%02d", i + 1]]];    }    // 2.1 設定本地圖片    PYPhotosView *photosView = [PYPhotosView photosViewWithImages:imagesM];    // 3. 設定代理    photosView.delegate = self;    // 4. 添加photosView    [self.view addSubview:photosView];

• 視頻播放

  範例程式碼

    // 1. 建立視頻播放的photosView    PYPhotosView *moviePhotosView = [PYPhotosView photosView];    // 2. 設定視頻的網路連結    moviePhotosView.movieNetworkUrl = @"http://static.tripbe.com/videofiles/20121214/9533522808.f4v.mp4";    // 3. 添加photosView    [self.view addSubview:moviePhotosView];

自訂photosView通過設定photosView的對象屬性值即可修改

• 設定布局類型（預設為流水布局）

// 設定布局為線性布局photosView.layoutType = PYPhotosViewLayoutTypeLine;

• 設定分頁指示類型（預設為pageControll指標）

// 設定指示類型為文本指示photosView.pageType = PYPhotosViewPageTypeLabel;

• 設定圖片間距（預設為5）

// 設定圖片間距為10photosView.photoMargin = 10;

• 設定圖片大小（預設70*70）

// 設定圖片的寬（width）photosView.photoWidth = 100;// 設定圖片的高（height）photosView.photoHeight = 60;

• 設定每行圖片最多個數（預設為3個）

// 設定圖片最多列數photosView.photosMaxCol = 6;

• 設定圖片上傳前，最多上傳的張數（預設為9）

photosView.imagesMaxCountWhenWillCompose = 15；

　　

 

　　具體介紹就這麼多使用此Demo可以極大減少工作量，但是在使用之前自己一定要明白其原理。代碼源：http://www.cnblogs.com/mobile-development/p/5720835.html