XLPhotoBrowser的GitHub鏈接
XLPhotoBrowser常見(jiàn)問(wèn)題匯總

提示:最新使用教程請(qǐng)以GitHub鏈接為準(zhǔn),此文章不會(huì)每個(gè)版本都更新,有什么問(wèn)題或者bug等可以在GitHub上提交issues

1.XLPhotoBrowser描述

一個(gè)簡(jiǎn)單實(shí)用的圖片瀏覽器,效果類似微信圖片瀏覽器,支持彈出動(dòng)畫(huà)和回縮動(dòng)畫(huà),支持多圖瀏覽,支持本地和網(wǎng)絡(luò)圖片瀏覽,支持多種屬性自定義(支持橫豎屏瀏覽)

支持多種圖片瀏覽樣式

• 類似微信圖片瀏覽樣式XLPhotoBrowserStylePageControl , 底部有個(gè)pagecontrol顯示圖片索引
• 類似微博圖片瀏覽樣式XLPhotoBrowserStyleIndexLabel , 上面有個(gè)UILabel顯示圖片索引
• 簡(jiǎn)單樣式XLPhotoBrowserStyleSimple , 上面有UILabel顯示圖片索引,左下部分有個(gè)保存按鈕,可以保存當(dāng)前圖片

首頁(yè)

XLPhotoBrowserStylePageControl

XLPhotoBrowserStyleIndexLabel

XLPhotoBrowserStyleSimple

支持長(zhǎng)按手勢(shì)彈出多功能選擇框,類似微博微信中的效果

長(zhǎng)按圖片彈出多功能選擇框

其他效果圖:

XLPhotoBrowserDemo.gif

XLPhotoBrowserDemo2.gif

橫屏效果圖

2. 安裝方法

2.1 第一種方法: 使用cocoapods自動(dòng)安裝

pod 'XLPhotoBrowser+CoderXL'

2.2 第二種方法 :

• 2.2.1 下載示例Demo
• 2.2.2 把里面的XLPhotoBrowser文件夾拖到你的項(xiàng)目中(注意: 里面用到了一些第三方的類庫(kù),如果你的項(xiàng)目中已經(jīng)使用了這些庫(kù),視情況刪除)
• 2.2.3 如果你的項(xiàng)目中沒(méi)有用到SDWebImage框架,把圖中SDWebImage文件夾也一起拖到你的工程中

Paste_Image.png

注意:

• XLPhotoBrowser 1.2.0版本依賴于SDWebImage框架4.0.0版本,由于SDWebImage4.0版本對(duì)API進(jìn)行了修改,所以不兼容SDWebImage4.0以下版本

3. 使用說(shuō)明

3.1基本使用(提供2種傳遞數(shù)據(jù)的方法:圖片以數(shù)組形式批量傳遞 和 數(shù)據(jù)源方法分開(kāi)傳遞每一個(gè)位置的圖片數(shù)據(jù))

方法一:一行代碼進(jìn)入圖片瀏覽器 在某些場(chǎng)景,例如只是想瀏覽一組本地/網(wǎng)絡(luò)圖片,你可以這樣使用:

    // 傳入圖片數(shù)據(jù)源,直接進(jìn)行圖片瀏覽
    // 傳入圖片數(shù)據(jù)源數(shù)組self.images 可以是UIImage對(duì)象數(shù)組 ,可以是ALAsset對(duì)象, 也可以是圖片的NSURL鏈接 , 或者是可以變成NSURL鏈接的NSString對(duì)象數(shù)組

    [XLPhotoBrowser showPhotoBrowserWithImages:self.images currentImageIndex:0];

方法二：如果上面直接提供圖片數(shù)組的方式不適合,你可以考慮實(shí)現(xiàn)數(shù)據(jù)源方法,提供數(shù)據(jù)

• 數(shù)據(jù)源方法提供了三個(gè),不同的需求效果需要搭配不同的方法使用.根據(jù)每個(gè)方法的注釋說(shuō)明和項(xiàng)目的需求來(lái)決定具體要實(shí)現(xiàn)哪幾個(gè)方法

/**
 進(jìn)入圖片瀏覽器
 */
- (void)clickImage:(UITapGestureRecognizer *)tap
{
    [XLPhotoBrowser showPhotoBrowserWithCurrentImageIndex:tap.view.tag imageCount:self.images.count datasource:self];
}

#pragma mark    -   XLPhotoBrowserDatasource

/**
 *  返回這個(gè)位置的占位圖片 , 也可以是原圖
 *  如果不實(shí)現(xiàn)此方法,會(huì)默認(rèn)使用placeholderImage
 *
 *  @param browser 瀏覽器
 *  @param index   位置索引
 *
 *  @return 占位圖片
 */
- (UIImage *)photoBrowser:(XLPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
{
    return self.images[index];
}

/**
 *  返回指定位置圖片的UIImageView,用于做圖片瀏覽器彈出放大和消失回縮動(dòng)畫(huà)等
 *  如果沒(méi)有實(shí)現(xiàn)這個(gè)方法,沒(méi)有回縮動(dòng)畫(huà),如果傳過(guò)來(lái)的view不正確,可能會(huì)影響回縮動(dòng)畫(huà)效果
 *
 *  @param browser 瀏覽器
 *  @param index   位置索引
 *
 *  @return 展示圖片的容器視圖,如UIImageView等
 */
- (UIView *)photoBrowser:(XLPhotoBrowser *)browser sourceImageViewForIndex:(NSInteger)index
{
    return self.scrollView.subviews[index];
}

/**
 *  返回指定位置的高清圖片URL
 *  如果你要顯示更高質(zhì)量的圖片,可以通過(guò)這個(gè)方法傳遞網(wǎng)絡(luò)/本地圖片路徑實(shí)現(xiàn)效果
 *
 *  @param browser 瀏覽器
 *  @param index   位置索引
 *
 *  @return 返回高清大圖索引
 */
- (NSURL *)photoBrowser:(XLPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index
{
    return [NSURL URLWithString:self.urlStrings[index]];
}

ps:下面的示例代碼中如非必要,統(tǒng)一用第一種方式傳遞圖片數(shù)組來(lái)展示

3.2進(jìn)階使用說(shuō)明(自定義多種屬性等)

• 如何進(jìn)行網(wǎng)絡(luò)圖片瀏覽
  一行代碼進(jìn)入瀏覽,傳遞網(wǎng)絡(luò)圖片的地址數(shù)組進(jìn)去即可

    // 1. NSURL數(shù)組
//    NSMutableArray *URLArray = [NSMutableArray array];
//    for (NSString *urlString in self.urlStrings) {
//        NSURL *URL = [NSURL URLWithString:urlString];
//        [URLArray addObject:URL];
//    }
//    [XLPhotoBrowser showPhotoBrowserWithImages:URLArray currentImageIndex:0];

    // 2.可以變成NSURL鏈接的NSString對(duì)象數(shù)組
    [XLPhotoBrowser showPhotoBrowserWithImages:self.urlStrings currentImageIndex:0];

或者用數(shù)據(jù)源方式,實(shí)現(xiàn)photoBrowser: highQualityImageURLForIndex:方法

- (void)clickImage:(UITapGestureRecognizer *)tap
{
    [XLPhotoBrowser showPhotoBrowserWithCurrentImageIndex:tap.view.tag imageCount:self.images.count datasource:self];
}

#pragma mark    -   XLPhotoBrowserDatasource

// 可以不實(shí)現(xiàn)此方法
- (UIImage *)photoBrowser:(XLPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
{
    return self.images[index];
}

- (NSURL *)photoBrowser:(XLPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index
{
    return [NSURL URLWithString:self.urlStrings[index]];
}

• 如何添加長(zhǎng)按手勢(shì)并自定義選擇菜單
• 獲取XLPhotoBrowser實(shí)例對(duì)象,調(diào)用setActionSheetWithTitle:delegate:cancelButtonTitle:deleteButtonTitle:otherButtonTitles:方法
• 同時(shí)在 XLPhotoBrowserDelegate代理方法中監(jiān)聽(tīng)到用戶的選擇

/**
 *  瀏覽圖片
 *
 */
- (void)clickImage:(UITapGestureRecognizer *)tap
{
    XLPhotoBrowser *browser = [XLPhotoBrowser showPhotoBrowserWithImages:self.images currentImageIndex:tap.view.tag];
    browser.browserStyle = XLPhotoBrowserStyleIndexLabel; // 微博樣式
    
    // 設(shè)置長(zhǎng)按手勢(shì)彈出的地步ActionSheet數(shù)據(jù),不實(shí)現(xiàn)此方法則沒(méi)有長(zhǎng)按手勢(shì)
    [browser setActionSheetWithTitle:@"這是一個(gè)類似微信/微博的圖片瀏覽器組件" delegate:self cancelButtonTitle:nil deleteButtonTitle:@"刪除" otherButtonTitles:@"發(fā)送給朋友",@"保存圖片",@"收藏",@"投訴",nil];
}

#pragma mark    -   XLPhotoBrowserDelegate

- (void)photoBrowser:(XLPhotoBrowser *)browser clickActionSheetIndex:(NSInteger)actionSheetindex currentImageIndex:(NSInteger)currentImageIndex
{
    // do something yourself
    switch (actionSheetindex) {
        case 4: // 刪除
        {
            NSLog(@"點(diǎn)擊了actionSheet索引是:%zd , 當(dāng)前展示的圖片索引是:%zd",actionSheetindex,currentImageIndex);
            [self.images removeObjectAtIndex:currentImageIndex];
            [self resetScrollView];
        }
            break;
        case 1: // 保存
        {
            NSLog(@"點(diǎn)擊了actionSheet索引是:%zd , 當(dāng)前展示的圖片索引是:%zd",actionSheetindex,currentImageIndex);
            [browser saveCurrentShowImage];
        }
            break;
        default:
        {
            NSLog(@"點(diǎn)擊了actionSheet索引是:%zd , 當(dāng)前展示的圖片索引是:%zd",actionSheetindex,currentImageIndex);
        }
            break;
    }
}

• 如何選擇瀏覽器樣式
• 獲取到實(shí)例對(duì)象以后,設(shè)置browserStyle屬性即可

    XLPhotoBrowser *browser = [XLPhotoBrowser showPhotoBrowserWithImages:self.images currentImageIndex:tap.view.tag];
    browser.browserStyle = XLPhotoBrowserStyleIndexLabel; // 微博樣式

• 如何修改pagecontrol為縮放動(dòng)畫(huà)樣式
• 僅在XLPhotoBrowserStylePageControl樣式中有效, 在XLPhotoBrowserStyleIndexLabel樣式無(wú)效

    // 自定義pageControl的一些屬性
    browser.pageDotColor = [UIColor purpleColor]; ///< 此屬性針對(duì)動(dòng)畫(huà)樣式的pagecontrol無(wú)效
    browser.currentPageDotColor = [UIColor greenColor];
    browser.pageControlStyle = XLPhotoBrowserPageControlStyleClassic;///< 修改底部pagecontrol的樣式為系統(tǒng)樣式,默認(rèn)是彈性動(dòng)畫(huà)的樣式

• 如何實(shí)現(xiàn)類似微信那樣點(diǎn)擊圖片進(jìn)入瀏覽器時(shí)的圖片放大和退出瀏覽時(shí)圖片縮放的過(guò)渡動(dòng)畫(huà)
• 實(shí)現(xiàn)數(shù)據(jù)源方法中的photoBrowser:sourceImageViewForIndex:方法,傳遞圖片的容器視圖,才可以做過(guò)渡動(dòng)畫(huà)

#pragma mark    -   XLPhotoBrowserDatasource

- (UIImage *)photoBrowser:(XLPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
{
    return self.images[index];
}

- (UIView *)photoBrowser:(XLPhotoBrowser *)browser sourceImageViewForIndex:(NSInteger)index
{
    return self.scrollView.subviews[index];
}

• 如何使用XLPhotoBrowserConfig,
• 如何開(kāi)啟調(diào)試模式,輸出格式化的提示信息
• 打開(kāi)在XLPhotoBrowserConfig中的這個(gè)代碼即可 //#define XLPhotoBrowserDebug 1
• 還可以在這里修改很多樣式屬性,如:修改瀏覽器的背景色/圖片間隔等 ,使用方式很簡(jiǎn)單,具體的使用就不在這里贅述

4. 更新日志

*   1.2.0
    *   1. 支持橫豎屏適配(設(shè)備沒(méi)有鎖定方向,且項(xiàng)目配置支持橫屏才可以觸發(fā)橫屏瀏覽模式)
    *   2. 更新SDWebImage到4.0.0 , 由于SDWebImage4.0版本對(duì)API進(jìn)行了修改,所以不兼容SDWebImage4.0以下版本
    *   3. 修復(fù)圖片下載進(jìn)度條等已知bug
*   1.1.0 
    *   1. 優(yōu)化框架結(jié)構(gòu)影暴，XLPhotoBrowser內(nèi)部維護(hù)一個(gè)優(yōu)先級(jí)為maxfloat的UIWindow爆办，避免不同的項(xiàng)目會(huì)因?yàn)榇翱趩?wèn)題造成XLPhotoBrowser顯示不正確等問(wèn)題
    *   2. 修改FSActionSheet源碼，修復(fù)長(zhǎng)按彈出ActionSheet顯示在圖片后面等問(wèn)題
    *   3. 優(yōu)化圖片放大縮小處理邏輯案淋，修復(fù)已知bug

5. 喜歡的話,就給作者一個(gè)star ,你可以通過(guò)下面的方式聯(lián)系到我

• QQ群 : 579572313 (有什么問(wèn)題,歡迎進(jìn)群討論提問(wèn))
• 郵箱 : coder_xl@163.com

6. 常見(jiàn)問(wèn)題仓洼，可以參考這篇帖子XLPhotoBrowser常見(jiàn)問(wèn)題匯總