美文网首页iOS技术分享程序员
iOS开发-自定制图片浏览器

iOS开发-自定制图片浏览器

作者: it_hao528 | 来源:发表于2017-12-29 15:42 被阅读63次
    水墨丹青.jpg

    前言:图片浏览器大家应该都用过,这方面的第三方也有很多,不过有时候第三方会跟我们的需求有一些出入,这就需要我们要么对第三方进行修改要么自己重新定制。我是比较喜欢自己重新定制的,在这给大家简单介绍一下我定制的图片浏览器,算是给大家提供一个思路,可以在此基础上进行修改完善。

    原理:通过弹出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];
    

    效果如下:


    最后,还是希望能够帮助到有需要的朋友们,愿我们能够一起学习进步,在开发的道路上越走越顺利!!!

    相关文章

      网友评论

        本文标题:iOS开发-自定制图片浏览器

        本文链接:https://www.haomeiwen.com/subject/etiigxtx.html