iOS開(kāi)發(fā)教程之自定制圖片瀏覽器
更新時(shí)間：2017年12月30日 10:58:06 作者：Abner_G
最近發(fā)現(xiàn)許多常用的APP都有圖片瀏覽器，于是想仿照著自己寫(xiě)一個(gè)，下面這篇文章主要給大家介紹了關(guān)于iOS開(kāi)發(fā)教程之自定制圖片瀏覽器的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
前言
圖片瀏覽器大家應(yīng)該都用過(guò)，這方面的第三方也有很多，不過(guò)有時(shí)候第三方會(huì)跟我們的需求有一些出入，這就需要我們要么對(duì)第三方進(jìn)行修改要么自己重新定制。我是比較喜歡自己重新定制的，在這給大家簡(jiǎn)單介紹一下我定制的圖片瀏覽器，算是給大家提供一個(gè)思路，可以在此基礎(chǔ)上進(jìn)行修改完善。
實(shí)現(xiàn)原理
通過(guò)彈出UIViewController的形式來(lái)展示圖片，使用UICollectionView并添加手勢(shì)來(lái)實(shí)現(xiàn)圖片瀏覽時(shí)圖片的間隔。
首先創(chuàng)建一個(gè)繼承于UIViewController的控制器，來(lái)作為圖片瀏覽器的控制器，并實(shí)現(xiàn)相應(yīng)的代碼如下：
示例代碼
#import <UIKit/UIKit.h> #import "RHPhotoBrowser.h" @interface RHPhotoBrowserController : UIViewController - (instancetype)initWithType:(RHPhotoSourceType)type imageArr:(NSArray *)imageArr selectIndex:(NSInteger)selectIndex; @end
#import "RHPhotoBrowserController.h"
#import "RHPhotoBrowserCell.h"
#define Cell_PhotoBrowser @"Cell_PhotoBrowser"
#define PhotoSpace 10 // 圖片間距
@interface RHPhotoBrowserController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@property (nonatomic, strong) UICollectionView * collection;
@property (nonatomic, strong) UIPageControl * pageControl;
@property (nonatomic, strong) NSMutableArray * dataArr;
@property (nonatomic, assign) RHPhotoSourceType type;
@property (nonatomic, assign) NSInteger selectIndex;
@property (nonatomic, assign) CGFloat panCenterX;
@property (nonatomic, assign) CGFloat startOffsetX;
@property (nonatomic, assign) CGFloat offsetX;
@property (nonatomic, assign) CGFloat panX;
@end
@implementation RHPhotoBrowserController
- (instancetype)initWithType:(RHPhotoSourceType)type imageArr:(NSArray *)imageArr selectIndex:(NSInteger)selectIndex {
self = [super init];
if (self) {
[self.dataArr removeAllObjects];
[self.dataArr addObjectsFromArray:imageArr];
_type = type;
_selectIndex = selectIndex;
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self addSubviews];
[self makeConstraintsForUI];
}
#pragma mark - add subviews
- (void)addSubviews {
self.view.backgroundColor = [UIColor blackColor];
[self.view addSubview:self.collection];
[self.view addSubview:self.pageControl];
}
- (void)makeConstraintsForUI {
[_collection mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.right.bottom.mas_equalTo(0);
}];
[_pageControl mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(0);
make.bottom.mas_equalTo(-SS(50));
make.height.mas_equalTo(20);
}];
[self performSelector:@selector(setCollectionContentOffset) withObject:nil afterDelay:0.1];
}
- (void)setCollectionContentOffset {
RHWeakSelf;
dispatch_async(dispatch_get_main_queue(), ^{
[weakSelf.collection setContentOffset:CGPointMake((Screen_Width + PhotoSpace) * _selectIndex, 0) animated:NO];
weakSelf.pageControl.numberOfPages = weakSelf.dataArr.count;
weakSelf.pageControl.currentPage = _selectIndex;
});
_startOffsetX = _collection.contentOffset.x;
}
#pragma mark - GestureRecognizer event
- (void)panCollection:(UIPanGestureRecognizer *)pan {
_panCenterX = [pan translationInView:self.collection].x;
if (pan.state == UIGestureRecognizerStateBegan) {
_startOffsetX = _collection.contentOffset.x;
_offsetX = 0;
_panX = 0;
}
if (_selectIndex == 0) {
if (_panCenterX > 0) {
CGFloat s = (Screen_Width - _panCenterX) / Screen_Width;
_offsetX += (_panCenterX - _panX) * s;
_panX = _panCenterX;
[self.collection setContentOffset:CGPointMake(-_offsetX, 0) animated:NO];
} else {
if (self.dataArr.count == 1) {
CGFloat s = (Screen_Width + _panCenterX) / Screen_Width;
_offsetX += (_panCenterX - _panX) * s;
_panX = _panCenterX;
[self.collection setContentOffset:CGPointMake(-_offsetX, 0) animated:NO];
} else {
[self.collection setContentOffset:CGPointMake(_startOffsetX - _panCenterX, 0) animated:NO];
}
}
} else if (_selectIndex == self.dataArr.count - 1) {
if (_panCenterX < 0) {
CGFloat s = (Screen_Width + _panCenterX) / Screen_Width;
_offsetX += (_panCenterX - _panX) * s;
_panX = _panCenterX;
[self.collection setContentOffset:CGPointMake(_startOffsetX - _offsetX, 0) animated:NO];
} else {
[self.collection setContentOffset:CGPointMake(_startOffsetX - _panCenterX, 0) animated:NO];
}
} else {
[self.collection setContentOffset:CGPointMake(_startOffsetX - _panCenterX, 0) animated:NO];
}
if (pan.state == UIGestureRecognizerStateEnded) {
if ([self absoluteValue:_panCenterX] > Screen_Width/3) {
if (_panCenterX < 0) {
_selectIndex += 1;
} else {
_selectIndex -= 1;
}
if (_selectIndex == self.dataArr.count) {
_selectIndex = self.dataArr.count - 1;
} else if (_selectIndex == -1) {
_selectIndex = 0;
}
[self.collection setContentOffset:CGPointMake((Screen_Width + PhotoSpace) * _selectIndex, 0) animated:YES];
self.pageControl.currentPage = _selectIndex;
} else {
[self.collection setContentOffset:CGPointMake(_startOffsetX, 0) animated:YES];
}
}
}
- (void)swipeCollection:(UISwipeGestureRecognizer *)swipe {
if (swipe.direction == UISwipeGestureRecognizerDirectionLeft) {
_selectIndex += 1;
} else if (swipe.direction == UISwipeGestureRecognizerDirectionRight) {
_selectIndex -= 1;
}
if (_selectIndex == self.dataArr.count) {
_selectIndex = self.dataArr.count - 1;
} else if (_selectIndex == -1) {
_selectIndex = 0;
}
self.pageControl.currentPage = _selectIndex;
[self.collection setContentOffset:CGPointMake((Screen_Width + PhotoSpace) * _selectIndex, 0) animated:YES];
}
// 返回value的絕對(duì)值
- (CGFloat)absoluteValue:(CGFloat)value {
if (value < 0) {
return -value;
}
return value;
}
#pragma mark - collection delegate
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.dataArr.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
RHPhotoBrowserCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:Cell_PhotoBrowser forIndexPath:indexPath];
if (indexPath.row < self.dataArr.count) {
if (_type == RHPhotoSourceTypeImage) {
UIImage * image = [self.dataArr objectAtIndex:indexPath.row];
[cell configCellWithImage:image];
} else if (_type == RHPhotoSourceTypeUrl) {
NSString * url = [self.dataArr objectAtIndex:indexPath.row];
[cell configCellWithUrl:url];
} else if (_type == RHPhotoSourceTypeFilePath) {
NSString * filePath = [self.dataArr objectAtIndex:indexPath.row];
[cell configCellWithFilePath:filePath];
} else if (_type == RHPhotoSourceTypeFileName) {
NSString * fileName = [self.dataArr objectAtIndex:indexPath.row];
[cell configCellWithFileName:fileName];
}
}
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake(Screen_Width, Screen_Height);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return PhotoSpace;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 0;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
[self dismissViewControllerAnimated:YES completion:nil];
}
#pragma mark - setter and getter
- (UICollectionView *)collection {
if (!_collection) {
UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
UICollectionView * cv = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
cv.backgroundColor = [UIColor blackColor];
cv.delegate = self;
cv.dataSource = self;
cv.showsHorizontalScrollIndicator = NO;
[cv registerClass:[RHPhotoBrowserCell class] forCellWithReuseIdentifier:Cell_PhotoBrowser];
UIPanGestureRecognizer * pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panCollection:)];
[cv addGestureRecognizer:pan];
UISwipeGestureRecognizer * swipeL = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeCollection:)];
swipeL.direction = UISwipeGestureRecognizerDirectionLeft;
[cv addGestureRecognizer:swipeL];
UISwipeGestureRecognizer * swipeR = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeCollection:)];
swipeR.direction = UISwipeGestureRecognizerDirectionRight;
[cv addGestureRecognizer:swipeR];
_collection = cv;
}
return _collection;
}
- (UIPageControl *)pageControl {
if (!_pageControl) {
UIPageControl * pageControl = [[UIPageControl alloc] init];
pageControl.pageIndicatorTintColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.9];
pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
pageControl.userInteractionEnabled = NO;
_pageControl = pageControl;
}
return _pageControl;
}
- (NSMutableArray *)dataArr {
if (!_dataArr) {
_dataArr = [NSMutableArray array];
}
return _dataArr;
}
@end
其實(shí)到此基本已經(jīng)結(jié)束了，大家實(shí)現(xiàn)一個(gè)相對(duì)應(yīng)的cell就可以了。使用時(shí)直接通過(guò)外漏的方法創(chuàng)建該控制器對(duì)象并彈出該控制器即可。
為了更加方便的調(diào)用，我又增加了一個(gè)NSObject的類(lèi)來(lái)控制以上控制器的調(diào)用。如下：
#import <Foundation/Foundation.h>
typedef NS_ENUM(NSUInteger, RHPhotoSourceType) {
RHPhotoSourceTypeImage = 0,
RHPhotoSourceTypeUrl = 1,
RHPhotoSourceTypeFilePath = 2,
RHPhotoSourceTypeFileName = 3
};
@interface RHPhotoBrowser : NSObject
+ (RHPhotoBrowser *)shared;
- (void)browseImageWithType:(RHPhotoSourceType)type imageArr:(NSArray *)imageArr selectIndex:(NSInteger)selectIndex;
@end
#import "RHPhotoBrowser.h"
#import "RHPhotoBrowserController.h"
@implementation RHPhotoBrowser
+ (RHPhotoBrowser *)shared {
static RHPhotoBrowser * helper = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
helper = [[RHPhotoBrowser alloc] init];
});
return helper;
}
- (void)browseImageWithType:(RHPhotoSourceType)type imageArr:(NSArray *)imageArr selectIndex:(NSInteger)selectIndex {
if (selectIndex > imageArr.count - 1) {
selectIndex = 0;
}
UIViewController * rootVC = [UIApplication sharedApplication].delegate.window.rootViewController;
RHPhotoBrowserController * browser = [[RHPhotoBrowserController alloc] initWithType:type imageArr:imageArr selectIndex:selectIndex];
[rootVC presentViewController:browser animated:YES completion:nil];
}
@end
這樣使用的時(shí)候只需要使用該類(lèi)就可以了。這里大家可以將單例去掉，將對(duì)象方法直接改為類(lèi)方法即可。我是習(xí)慣了，所以這樣寫(xiě)了。
再給大家看一下使用方法一步調(diào)用：
[[RHPhotoBrowser shared] browseImageWithType:RHPhotoSourceTypeFileName imageArr:@[@"c006", @"c007", @"c008", @"c009", @"c010"] selectIndex:2];
效果如下：
最后，還是希望能夠幫助到有需要的朋友們，愿我們能夠一起學(xué)習(xí)進(jìn)步，在開(kāi)發(fā)的道路上越走越順利?。?！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
ios7中UIViewControllerBasedStatusBarAppearance作用詳解
這篇文章主要介紹了 ios7中UIViewControllerBasedStatusBarAppearance作用詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了IOS 中UIApplication詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
CocoaPods是OS X和iOS下的一個(gè)第三類(lèi)庫(kù)管理工具，這篇文章主要介紹了CocoaPods1.9.0 安裝使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
ios scrollview嵌套tableview同向滑動(dòng)的示例
本篇文章主要介紹了ios scrollview嵌套tableview同向滑動(dòng)的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
本文講解如何使用原生框架實(shí)現(xiàn)二維碼掃描功能，并且進(jìn)行掃描后的項(xiàng)目跳轉(zhuǎn)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了iOS微信支付開(kāi)發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了iOS9提示框的正確使用方式,iOS8升級(jí)到iOS9的過(guò)程，彈出提示框的方式有了很大的改變,感興趣的小伙伴們可以參考一下2016-05-05
阿里數(shù)據(jù)iOS端啟動(dòng)速度優(yōu)化心得
本篇文章給大家詳細(xì)分析了阿里數(shù)據(jù)iOS端啟動(dòng)速度優(yōu)化的知識(shí)點(diǎn)以及心得，對(duì)此有興趣的朋友參考學(xué)習(xí)下吧。2018-02-02
iOS實(shí)現(xiàn)去除html標(biāo)簽的方法匯總
相信大家在做網(wǎng)站的時(shí)候，經(jīng)常會(huì)遇到去除html標(biāo)簽的問(wèn)題，下面這篇文章主要給大家總結(jié)介紹了關(guān)于iOS如何實(shí)現(xiàn)去除html標(biāo)簽的一些方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-10-10
iOS開(kāi)發(fā)之路--微博“更多”頁(yè)面
本文是IOS開(kāi)發(fā)之路系列文章第五篇，主要講訴了，如何制作微博的更多頁(yè)面，并附上效果圖及源碼，需要的朋友可以參考下，希望能有所幫助2014-08-08