iOS开发教程之自定制图片浏览器
凌宏大
本文向大家介绍iOS开发教程之自定制图片浏览器，包括了iOS开发教程之自定制图片浏览器的使用技巧和注意事项，需要的朋友参考一下
前言
图片浏览器大家应该都用过，这方面的第三方也有很多，不过有时候第三方会跟我们的需求有一些出入，这就需要我们要么对第三方进行修改要么自己重新定制。我是比较喜欢自己重新定制的，在这给大家简单介绍一下我定制的图片浏览器，算是给大家提供一个思路，可以在此基础上进行修改完善。
实现原理
通过弹出UIViewController的形式来展示图片，使用UICollectionView并添加手势来实现图片浏览时图片的间隔。
首先创建一个继承于UIViewController的控制器，来作为图片浏览器的控制器，并实现相应的代码如下：
示例代码
#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的绝对值
- (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
其实到此基本已经结束了，大家实现一个相对应的cell就可以了。使用时直接通过外漏的方法创建该控制器对象并弹出该控制器即可。
为了更加方便的调用，我又增加了一个NSObject的类来控制以上控制器的调用。如下：
#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
这样使用的时候只需要使用该类就可以了。这里大家可以将单例去掉，将对象方法直接改为类方法即可。我是习惯了，所以这样写了。
再给大家看一下使用方法一步调用：
[[RHPhotoBrowser shared] browseImageWithType:RHPhotoSourceTypeFileName imageArr:@[@"c006", @"c007", @"c008", @"c009", @"c010"] selectIndex:2];
效果如下：
最后，还是希望能够帮助到有需要的朋友们，愿我们能够一起学习进步，在开发的道路上越走越顺利！！！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对小牛知识库的支持。
类似资料：
-
使用图片浏览器，你需要在 sm.js 和 sm.css 之后额外引入如下两个文件： <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-exte
-
本文向大家介绍iOS开发中使用UIScrollView实现无限循环的图片浏览器，包括了iOS开发中使用UIScrollView实现无限循环的图片浏览器的使用技巧和注意事项，需要的朋友参考一下 一、概述 UIKit框架中有大量的控件供开发者使用，在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件。在这个系列中如果每个控件都介绍一遍确实没有必要，所谓授人以鱼不如授人以
-
本文向大家介绍Android开发实现的图片浏览功能示例【放大图片】，包括了Android开发实现的图片浏览功能示例【放大图片】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android开发实现的图片浏览功能。分享给大家供大家参考，具体如下： 效果图： 布局文件： 代码实现透明度改变： 更多关于Android相关内容感兴趣的读者可查看本站专题：《Android图形与图像处理技巧总结》、《
-
本文向大家介绍IOS 开发之网络图片轮播图的实现，包括了IOS 开发之网络图片轮播图的实现的使用技巧和注意事项，需要的朋友参考一下 IOS 开发之网络图片轮播图的实现 截图 1.使用 2.源码 如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
本文向大家介绍WPF 自定义雷达图开发实例教程，包括了WPF 自定义雷达图开发实例教程的使用技巧和注意事项，需要的朋友参考一下 自定义雷达图表如下： 1、创建UserControl,名为“RadarChartControl” 前台： 后台： 2、创建标题类按钮控件，定义名称为ChartButton 前台： 后台： 3、定义数据组标题显示列表 前台： 后台： 4、界面引用控件 以上所述是小编给大家介
-
本文向大家介绍Android自定义Gallery控件实现3D图片浏览器，包括了Android自定义Gallery控件实现3D图片浏览器的使用技巧和注意事项，需要的朋友参考一下 本篇文章主要介绍如何使用自定义的Gallery控件，实现3D效果的图片浏览器的效果。 话不多说，先看效果。 上面是一个自定义的Gallery控件，实现倒影和仿3D的效果，下面是一个图片查看器，点击上面的小图片，可以在下面查看