ios 图片浏览器（ios自定义图片插件）

前言

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

实现原理

通过弹出uiviewcontroller的形式来展示图片，使用uicollectionview并添加手势来实现图片浏览时图片的间隔。

首先创建一个继承于uiviewcontroller的控制器，来作为图片浏览器的控制器，并实现相应的代码如下：

示例代码

?

1 2 3 4 5

#import <uikit/uikit.h> #import "rhphotobrowser.h" @interface rhphotobrowsercontroller : uiviewcontroller - (instancetype)initwithtype:(rhphotosourcetype)type imagearr:(nsarray *)imagearr selectindex:(nsinteger)selectindex; @end

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213

#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的类来控制以上控制器的调用。如下：

?

1 2 3 4 5 6 7 8 9 10 11

#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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

#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

这样使用的时候只需要使用该类就可以了。这里大家可以将单例去掉，将对象方法直接改为类方法即可。我是习惯了，所以这样写了。

再给大家看一下使用方法一步调用：

?

1	[[rhphotobrowser shared] browseimagewithtype:rhphotosourcetypefilename imagearr:@[@"c006", @"c007", @"c008", @"c009", @"c010"] selectindex:2];

效果如下：

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。

原文链接：https://www.jianshu.com/p/336121d1280f