iOS之MWPhotoBrowser照片浏览器框架的原理与使用

 

 

https://github.com/mwaterfall/MWPhotoBrowser

=========下面这个类是继承自MWPhotoBrowser,

 

#import "MyMWCaptionView.h"

@interface MyMWCaptionView()

@property(nonatomic,strong)   UILabel *label;

@property(nonatomic,strong)MWPhoto *photo;

@end

 

static constCGFloat labelPadding = 10;

 

//重写下列方法,用于自定义底部的说明标题

 

@implementation MyMWCaptionView

- (id)initWithPhoto:(id<MWPhoto>)photo {

    self = [superinitWithFrame:CGRectMake(0,0, 320,44)]; // Random initial frame

    if (self) {

        self.userInteractionEnabled =NO;

        _photo = photo;

        self.barStyle =UIBarStyleBlackTranslucent;

        self.tintColor =nil;

        self.barTintColor =nil;

        self.barStyle =UIBarStyleBlackTranslucent;

        [selfsetBackgroundImage:nilforToolbarPosition:UIBarPositionAnybarMetrics:UIBarMetricsDefault];

        self.autoresizingMask =UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleRightMargin;

        [selfsetupCaption];

    }

    returnself;

}

 

- (void)setupCaption {

    _label = [[UILabelalloc] initWithFrame:CGRectIntegral(CGRectMake(labelPadding,0,

                                                                     self.bounds.size.width-labelPadding*2,

                                                                     self.bounds.size.height))];

    _label.autoresizingMask =UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;

    _label.opaque =NO;

    _label.backgroundColor = [UIColorclearColor];

    _label.textAlignment =NSTextAlignmentCenter;

    _label.lineBreakMode =NSLineBreakByWordWrapping;

    

    _label.numberOfLines =0;

    _label.textColor = [UIColorblueColor];

    _label.font = [UIFontsystemFontOfSize:17];

    if ([_photorespondsToSelector:@selector(caption)]) {

        _label.text = [_photocaption] ? [_photocaption] : @" ";

    }

    [selfaddSubview:_label];

}

 

- (CGSize)sizeThatFits:(CGSize)size {

    CGFloat maxHeight =9999;

    if (_label.numberOfLines >0) maxHeight =_label.font.leading*_label.numberOfLines;

    CGSize textSize = [_label.textboundingRectWithSize:CGSizeMake(size.width -labelPadding*2, maxHeight)

                                                options:NSStringDrawingUsesLineFragmentOrigin

                                             attributes:@{NSFontAttributeName:_label.font}

                                                context:nil].size;

    returnCGSizeMake(size.width, textSize.height +labelPadding * 2);

}

 

 

@end

 

===================

 

#import "ViewController.h"

#import "MWPhotoBrowser.h"

#import "MyMWCaptionView.h"

 

@interface ViewController ()<MWPhotoBrowserDelegate>

@property(nonatomic,strong)NSMutableArray *photos;

@property(nonatomic,strong)NSMutableArray *thumbs;

@property(nonatomic,strong)MWPhotoBrowser *browser;

@property(nonatomic,strong)NSMutableArray *selections;

 

@end

 

@implementation ViewController

 

- (void)viewDidLoad {

    [superviewDidLoad];

 

    NSMutableArray *photos = [[NSMutableArrayalloc] init];

    NSMutableArray *thumbs = [[NSMutableArrayalloc] init];

    MWPhoto *photo;

    

    // Photos

    photo = [MWPhotophotoWithImage:[UIImageimageNamed:@"6"]];

    

    // caption图片的描述,在图片的底部

    photo.caption =@"Fireworks";

    [photos addObject:photo];

    

    photo = [MWPhotophotoWithImage:[UIImageimageNamed:@"6"]];

    photo.caption =@"The London Eye is a giant Ferris wheel situated on the banks of the River Thames, in London, England.";

    [photos addObject:photo];

    photo =  [MWPhotophotoWithImage:[UIImageimageNamed:@"7"]];

    photo.caption =@"York Floods";

    [photos addObject:photo];

    photo =  [MWPhotophotoWithImage:[UIImageimageNamed:@"8"]];

    photo.caption =@"Campervan";

    

    [photos addObject:photo];

    photo = [MWPhotophotoWithImage:[UIImageimageNamed:@"6"]];

    

    // caption图片的描述,在图片的底部

    photo.caption =@"Fireworks0001";

    [photos addObject:photo];

    photo = [MWPhotophotoWithImage:[UIImageimageNamed:@"6"]];

    photo.caption =@"The London Eye 0002.";

    [photos addObject:photo];

    photo =  [MWPhotophotoWithImage:[UIImageimageNamed:@"7"]];

    photo.caption =@"York Floods0002";

    [photos addObject:photo];

    photo =  [MWPhotophotoWithImage:[UIImageimageNamed:@"8"]];

    photo.caption =@"Campervan0002";

    [photos addObject:photo];

 

    

    // Options

    self.photos = photos;

    self.thumbs = thumbs;

    

    

    //

    // 创建图片浏览器,并设置代理

    MWPhotoBrowser *browser = [[MWPhotoBrowseralloc] initWithDelegate:self];

    browser.displayActionButton =YES;//分享按钮,默认是

    browser.displayNavArrows =YES;//左右分页切换,默认否

    browser.displaySelectionButtons =YES;//是否显示选择按钮(右上方的按钮)在图片上,默认否

    browser.alwaysShowControls =YES;//控制条件控件是否显示,默认否

    browser.zoomPhotosToFill =NO;//是否全屏,默认是

#if __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_7_0

    browser.wantsFullScreenLayout = YES;//是否全屏,在7.0之后被丢弃了

#endif

    browser.enableGrid =YES;//是否允许用网格查看所有图片,默认是

    browser.startOnGrid =YES;//是否第一张,默认否

    browser.enableSwipeToDismiss =YES;//允许轻扫切换

    [browser showNextPhotoAnimated:YES];//显示下一张图片带动画

    [browser showPreviousPhotoAnimated:YES];//跳到上一张图片带动画

    [browser setCurrentPhotoIndex:0];//设置当前显示的图片

    

    browser.title =@"图片浏览器";

    browser.customImageSelectedIconName =@"6.png";//设置有上角大对号的小圆圈的显示图片

//    browser.customImageSelectedSmallIconName = @"6.png";

    

    

        if (browser.displaySelectionButtons==YES) {//当显示右上角显示按钮时

        _selections = [NSMutableArraynew];

        for (int i =0; i < photos.count; i++) {

            [_selectionsaddObject:[NSNumbernumberWithBool:NO]];//设置每个按钮的选择状态为NO;

        }

    }

    self.browser=browser;

    

    

 

}

 

-(void)viewDidAppear:(BOOL)animated{

    [selfpresentViewController:self.browseranimated:YEScompletion:nil];//要在这个方法里面调用present,不能在viewDidLoad里面调用

}

#pragma mark - MWPhotoBrowserDelegate

/**

 *  告诉他你有多少图片

 *

 *  @param photoBrowser photoBrowser

 *

 *  @return count

 */

- (NSUInteger)numberOfPhotosInPhotoBrowser:(MWPhotoBrowser *)photoBrowser {

    NSLog(@"有多少张图片");

    return_photos.count;

}

 

/**

 *  通过下标获取图片

 */

-(id )photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index {

    if (index <_photos.count)

        return [_photosobjectAtIndex:index];

    NSLog(@"获取图片");

    returnnil;

}

 

//调用下面的方法会网格显示,网格显示的时候也可以切换到大图

- (id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser thumbPhotoAtIndex:(NSUInteger)index{

        return [_photosobjectAtIndex:index];

}

 

//当点击右下角的分享按钮的时候触下面的方法

- (void)photoBrowser:(MWPhotoBrowser *)photoBrowser actionButtonPressedForPhotoAtIndex:(NSUInteger)index {

 

    NSLog(@"点击you下角分享按钮的时候出发,这里可以做自己的事情");

}

 

 

//自定义标题view,需要自定义一个view继承MWCaptionView,吧MWCaptionView里面的几个方法全部重写。每翻一张照片就会调用下面的代理方法会调用

- (MWCaptionView *)photoBrowser:(MWPhotoBrowser *)photoBrowser captionViewForPhotoAtIndex:(NSUInteger)index {

    MWPhoto *photo = [self.photosobjectAtIndex:index];

    MyMWCaptionView *captionView = [[MyMWCaptionViewalloc] initWithPhoto:photo];//自定义的view继承自MWCaptionView

    [captionView setupCaption];//调用MyMWCaptionView重写的方法

    [captionView sizeThatFits:CGSizeMake(100,100)];//调用MyMWCaptionView重写的方法

    NSLog(@"MWCaptionView");

    return captionView;

}

 

//设置图片右上角的选择按钮是选中状态还是非选中状态,返回YES表是选中状态,返回NO表示没选中,可以根据索引逐个设置,如果没有逐个设置,表示要么全选中,要么全不选中;

- (BOOL)photoBrowser:(MWPhotoBrowser *)photoBrowser isPhotoSelectedAtIndex:(NSUInteger)index {

    return [[_selectionsobjectAtIndex:index] boolValue];//从上面存储的状态数组取出来设置选中状态;

//    return YES;

}

 

//图片右上角按钮的选择状态发生改变时调用的代理方法

- (void)photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index selectedChanged:(BOOL)selected {

    NSLog(@"右上角选择按钮状态改变了");

    [_selectionsreplaceObjectAtIndex:indexwithObject:[NSNumbernumberWithBool:selected]];//当状态改变了,吧数组中的状态也相应改变

}

 

 

- (void)didReceiveMemoryWarning {

    [superdidReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

 

 

@end

 

*****************封装到分类中*******

/**
 在分类中创建MBPhotoBrowser,可以单独使用,直接把这个分类导入即可
 使用:
 参数一:图片数组 --type:Imagedata、url字符串数组---type:UrlStrdata、图片名称和url字符串混合数组,type:imageNameAndurlStrdata
 参数二:底部标题数组,
 参数三:导航标题
  [weakSelf setMBPhotoBrowserWithdataArr:images capitalArr:@[] naviTitleArr:@[] type:Imagedata];
 */

//#import <UIKit/UIKit.h>
//#import "MWPhotoBrowser.h"
//typedef enum{
//    Imagedata,//图片
//    UrlStrdata,//url字符串
//    imageNameAndurlStrdata,//图片名和url字符串
//}IMAGEORURL;
//
//#define WIDTH [UIScreen mainScreen].bounds.size.width
//#define HEIGHT [UIScreen mainScreen].bounds.size.height
//
//NS_ASSUME_NONNULL_BEGIN
//
//@interface UIViewController (LYBMBPhotoBrowser)<MWPhotoBrowserDelegate>
//
//@property(nonatomic,strong)NSArray *mbCaptionArr;//底部标题
//@property(nonatomic,strong)NSArray *mbNavTitleArr;//顶部标题
//@property(nonatomic,strong)NSMutableArray *photos;//存放MWPhoto的数组
//@property(nonatomic,copy)NSString * isDisplaymb;// LYBDisplayImageviewx调用的时候传@"yes",其他传@"no"(是选择照片后显示图片)
///**
// 参数一图片数据相关数组,可以是image,urlstr字符串,图片名数组
// 参数二:底部标题
// 参数三:顶部导航标题
// 参数四:参数一中数组的元素类型,可以是image----Imagedata,urlstr字符串---UrlStrdata,图片名---imageNameAndurlStrdata
// 参数五:只是用来显示@“yes”,用来选择相片后再显示@“no”
// 参数六:当前点击的图片页码
// */
//-(void)setMBPhotoBrowserWithdataArr:(NSArray *)photoArr capitalArr:(NSArray *)capitalArr naviTitleArr:(NSArray *)navititleArr type:(IMAGEORURL)imageorurl isDisplay:(NSString *)isDisplay currentIndex:(NSInteger)currentIndex;
//
//@end
//
//NS_ASSUME_NONNULL_END




********
/**
 在分类中创建MBPhotoBrowser
 */

#import "UIViewController+LYBMBPhotoBrowser.h"
#import <objc/message.h>
// 属性名称

static const char * mbCaptionArrkey = "mbCaptionArr";

static const char * mbNavTitleArrkey = "mbNavTitleArr";

static const char * photoskey = "photos";
static const char * isDisplaykey = "isDisplay";


@implementation UIViewController (LYBMBPhotoBrowser)

//创建MBPhotoBrowser
-(void)setMBPhotoBrowserWithdataArr:(NSArray *)photoArr capitalArr:(NSArray *)capitalArr naviTitleArr:(NSArray *)navititleArr type:(IMAGEORURL)imageorurl isDisplay:(NSString *)isDisplay currentIndex:(NSInteger)currentIndex{
    self.mbNavTitleArr=navititleArr;
    self.isDisplaymb=isDisplay;//记录只是用来展示,no表示选择照片后再展示
    self.photos=[[NSMutableArray alloc]init];
    if(photoArr.count>0){
                for(int i=0;i<photoArr.count;i++){
                    MWPhoto *photo;
                    if(imageorurl==Imagedata){//图片数据
                        photo=  [MWPhoto photoWithImage:photoArr[i]];
                    }else if(imageorurl==UrlStrdata){//url字符串
                        photo=  [MWPhoto photoWithURL:[NSURL URLWithString:photoArr[i]]];
                    }else if(imageorurl==imageNameAndurlStrdata){//图片名和url字符串混合
                        if([[photoArr[i] substringWithRange:NSMakeRange(0, 4)] isEqualToString:@"http"]){//是url
                                            photo=  [MWPhoto photoWithURL:[NSURL URLWithString:photoArr[i]]];
                                        }else {//是图片名
                                            photo=  [MWPhoto photoWithImage:[UIImage imageNamed:photoArr[i]]];
                                        }
                    }
                    if(capitalArr.count>i){//底部标题
                        photo.caption=capitalArr[i];
                    }else{
                        photo.caption=@"";
                    }
                    [self.photos addObject:photo];
                }
            }
    
    
    MWPhotoBrowser *browser = [[MWPhotoBrowser alloc] initWithDelegate:self];
   
    // Set options
    browser.displayActionButton = YES; // 允许显示右上角的分享按钮
    browser.displayNavArrows = NO; // 左上角导航返回按钮一直显示
    browser.displaySelectionButtons = YES; // 有上角选中按钮
    browser.zoomPhotosToFill = YES; // 是否全屏,默认是
    browser.alwaysShowControls = YES; // 底部两个箭头一直显示
    browser.enableGrid = YES; // 允许网格显示
    browser.startOnGrid = YES; // 第一次出现就显示网格,如果是NO的话,第一次出现显示全图,左下角有选择网格显示的按钮
    browser.autoPlayOnAppear = NO; // 自动播放第一个video

    //    // 自定义右上角选择按钮的图片设置
    //    browser.customImageSelectedIconName = @"home_banner_indicator_sel";
    //    browser.customImageSelectedSmallIconName = @"home_banner_indicator_nor";


    //    // Present----
        [self.navigationController pushViewController:browser animated:YES];

    // Manipulate
    [browser showNextPhotoAnimated:YES];
    [browser showPreviousPhotoAnimated:YES];
    [browser setCurrentPhotoIndex:currentIndex]; //设置当前显示的页码

}
//显示数据的代理方法
- (NSUInteger)numberOfPhotosInPhotoBrowser:(MWPhotoBrowser *)photoBrowser {
    NSLog(@"self.photo---%ld",self.photos.count);
    NSInteger count=0;
    if(self.photos.count>1){
        if([self.isDisplaymb isEqualToString:@"no"] ){
            count= self.photos.count-1;
        }else {
            count= self.photos.count;
        }
    }
    
    return count;
}
//滑动的代理方法
- (id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index {
    if (index < self.photos.count) {
//        NSLog(@"滑动到哪一页---%lu",(unsigned long)index);
        return [self.photos objectAtIndex:index];
    }
    return nil;
}

//如果需要网格显示缩略图需要实现这个代理方法,并且需要设置 browser.enableGrid = YES;
//- (id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser thumbPhotoAtIndex:(NSUInteger)index{
//     return [self.photos objectAtIndex:index];
//}

//点击了分享按钮,如果设置了这个方法就不会弹出分享页面,可以实现自己的操作
- (void)photoBrowser:(MWPhotoBrowser *)photoBrowser actionButtonPressedForPhotoAtIndex:(NSUInteger)index {
    NSLog(@"在这里可以实现自己的操作哦");

}

//可选方法
- (void)photoBrowser:(MWPhotoBrowser *)photoBrowser didDisplayPhotoAtIndex:(NSUInteger)index{
//    NSLog(@"当前显示图片编号----%ld",index);
}
//浏览图片时右上角的选择按钮是否呈选中状态
- (BOOL)photoBrowser:(MWPhotoBrowser *)photoBrowser isPhotoSelectedAtIndex:(NSUInteger)index{

    return YES;
}
//右上交按钮的选中方法
- (void)photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index selectedChanged:(BOOL)selected{

    //selected表示是否选中
    if (selected) {

        NSLog(@"第%ld张图片在被选中",index);
    }else{

        NSLog(@"第%ld张图片在被选中",index);
    }


}
//顶部导航的标题,有navigationBar时title才会显示
- (NSString *)photoBrowser:(MWPhotoBrowser *)photoBrowser titleForPhotoAtIndex:(NSUInteger)index{
       NSString *str = nil;
    if(self.mbNavTitleArr.count>index){
        str=self.mbNavTitleArr[index];
    }
 
//    switch (index) {
//        case 0 :
//            str = @"这是第1张图片";
//            break;
//        case 1 :
//            str = @"这是第2张图片";
//            break;
//        case 2 :
//            str = @"这是第3张图片";
//            break;
//        default:
//            break;
//    }
    return str;
}




/**
 mbCaptionArr
 */

-(void)setMbCaptionArr:(NSArray *)mbCaptionArr{
    objc_setAssociatedObject(self,mbCaptionArrkey, mbCaptionArr, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(NSArray *)mbCaptionArr{
    return objc_getAssociatedObject(self, mbCaptionArrkey);
}

/**
 mbNavTitleArr
 */
-(void)setMbNavTitleArr:(NSArray *)mbNavTitleArr{
    objc_setAssociatedObject(self,mbNavTitleArrkey, mbNavTitleArr, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

-(NSArray *)mbNavTitleArr{
    return objc_getAssociatedObject(self, mbNavTitleArrkey);
}

/**
 photos
 */
-(void)setPhotos:(NSMutableArray *)photos{
     objc_setAssociatedObject(self,photoskey, photos, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(NSMutableArray *)photos{
    return objc_getAssociatedObject(self, photoskey);
}
/**
 isDisplay
 */
-(void)setIsDisplaymb:(NSString *)isDisplaymb{

      objc_setAssociatedObject(self,isDisplaykey,isDisplaymb, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(NSString *)isDisplaymb{
     return objc_getAssociatedObject(self, isDisplaykey);
}
@end

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值