XLPhotoBrowser的GitHub鏈接
XLPhotoBrowser常見問題匯總
提示:最新使用教程請以GitHub鏈接為準,此文章不會每個版本都更新,有什么問題或者bug等可以在GitHub上提交issues
1.XLPhotoBrowser描述
一個簡單實用的圖片瀏覽器,效果類似微信圖片瀏覽器,支持彈出動畫和回縮動畫,支持多圖瀏覽,支持本地和網絡圖片瀏覽,支持多種屬性自定義(支持橫豎屏瀏覽)
支持多種圖片瀏覽樣式
- 類似微信圖片瀏覽樣式XLPhotoBrowserStylePageControl , 底部有個pagecontrol顯示圖片索引
- 類似微博圖片瀏覽樣式XLPhotoBrowserStyleIndexLabel , 上面有個UILabel顯示圖片索引
- 簡單樣式XLPhotoBrowserStyleSimple , 上面有UILabel顯示圖片索引,左下部分有個保存按鈕,可以保存當前圖片
首頁
XLPhotoBrowserStylePageControl
XLPhotoBrowserStyleIndexLabel
XLPhotoBrowserStyleSimple
支持長按手勢彈出多功能選擇框,類似微博微信中的效果
長按圖片彈出多功能選擇框
其他效果圖:
XLPhotoBrowserDemo.gif
XLPhotoBrowserDemo2.gif
橫屏效果圖
2. 安裝方法
2.1 第一種方法: 使用cocoapods自動安裝
pod 'XLPhotoBrowser+CoderXL'
2.2 第二種方法 :
- 2.2.1 下載示例Demo
- 2.2.2 把里面的XLPhotoBrowser文件夾拖到你的項目中(注意: 里面用到了一些第三方的類庫,如果你的項目中已經使用了這些庫,視情況刪除)
- 2.2.3 如果你的項目中沒有用到SDWebImage框架,把圖中SDWebImage文件夾也一起拖到你的工程中
Paste_Image.png
注意:
- XLPhotoBrowser 1.2.0版本依賴于SDWebImage框架4.0.0版本,
由于SDWebImage4.0版本對API進行了修改,所以不兼容SDWebImage4.0以下版本
3. 使用說明
3.1基本使用(提供2種傳遞數據的方法:圖片以數組形式批量傳遞 和 數據源方法分開傳遞每一個位置的圖片數據)
方法一:一行代碼進入圖片瀏覽器 在某些場景,例如只是想瀏覽一組本地/網絡圖片,你可以這樣使用:
// 傳入圖片數據源,直接進行圖片瀏覽
// 傳入圖片數據源數組self.images 可以是UIImage對象數組 ,可以是ALAsset對象, 也可以是圖片的NSURL鏈接 , 或者是可以變成NSURL鏈接的NSString對象數組
[XLPhotoBrowser showPhotoBrowserWithImages:self.images currentImageIndex:0];
方法二：如果上面直接提供圖片數組的方式不適合,你可以考慮實現數據源方法,提供數據
- 數據源方法提供了三個,不同的需求效果需要搭配不同的方法使用.根據每個方法的注釋說明和項目的需求來決定具體要實現哪幾個方法
/**
進入圖片瀏覽器
*/
- (void)clickImage:(UITapGestureRecognizer *)tap
{
[XLPhotoBrowser showPhotoBrowserWithCurrentImageIndex:tap.view.tag imageCount:self.images.count datasource:self];
}
#pragma mark - XLPhotoBrowserDatasource
/**
* 返回這個位置的占位圖片 , 也可以是原圖
* 如果不實現此方法,會默認使用placeholderImage
*
* @param browser 瀏覽器
* @param index 位置索引
*
* @return 占位圖片
*/
- (UIImage *)photoBrowser:(XLPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
{
return self.images[index];
}
/**
* 返回指定位置圖片的UIImageView,用于做圖片瀏覽器彈出放大和消失回縮動畫等
* 如果沒有實現這個方法,沒有回縮動畫,如果傳過來的view不正確,可能會影響回縮動畫效果
*
* @param browser 瀏覽器
* @param index 位置索引
*
* @return 展示圖片的容器視圖,如UIImageView等
*/
- (UIView *)photoBrowser:(XLPhotoBrowser *)browser sourceImageViewForIndex:(NSInteger)index
{
return self.scrollView.subviews[index];
}
/**
* 返回指定位置的高清圖片URL
* 如果你要顯示更高質量的圖片,可以通過這個方法傳遞網絡/本地圖片路徑實現效果
*
* @param browser 瀏覽器
* @param index 位置索引
*
* @return 返回高清大圖索引
*/
- (NSURL *)photoBrowser:(XLPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index
{
return [NSURL URLWithString:self.urlStrings[index]];
}
ps:下面的示例代碼中如非必要,統一用第一種方式傳遞圖片數組來展示
3.2進階使用說明(自定義多種屬性等)
- 如何進行網絡圖片瀏覽
一行代碼進入瀏覽,傳遞網絡圖片的地址數組進去即可
// 1. NSURL數組
// 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對象數組
[XLPhotoBrowser showPhotoBrowserWithImages:self.urlStrings currentImageIndex:0];
或者用數據源方式,實現photoBrowser: highQualityImageURLForIndex:方法
- (void)clickImage:(UITapGestureRecognizer *)tap
{
[XLPhotoBrowser showPhotoBrowserWithCurrentImageIndex:tap.view.tag imageCount:self.images.count datasource:self];
}
#pragma mark - XLPhotoBrowserDatasource
// 可以不實現此方法
- (UIImage *)photoBrowser:(XLPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
{
return self.images[index];
}
- (NSURL *)photoBrowser:(XLPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index
{
return [NSURL URLWithString:self.urlStrings[index]];
}
- 如何添加長按手勢并自定義選擇菜單
- 獲取XLPhotoBrowser實例對象,調用setActionSheetWithTitle:delegate:cancelButtonTitle:deleteButtonTitle:otherButtonTitles:方法
- 同時在 XLPhotoBrowserDelegate代理方法中監聽到用戶的選擇
/**
* 瀏覽圖片
*
*/
- (void)clickImage:(UITapGestureRecognizer *)tap
{
XLPhotoBrowser *browser = [XLPhotoBrowser showPhotoBrowserWithImages:self.images currentImageIndex:tap.view.tag];
browser.browserStyle = XLPhotoBrowserStyleIndexLabel; // 微博樣式
// 設置長按手勢彈出的地步ActionSheet數據,不實現此方法則沒有長按手勢
[browser setActionSheetWithTitle:@"這是一個類似微信/微博的圖片瀏覽器組件" delegate:self cancelButtonTitle:nil deleteButtonTitle:@"刪除" otherButtonTitles:@"發送給朋友",@"保存圖片",@"收藏",@"投訴",nil];
}
#pragma mark - XLPhotoBrowserDelegate
- (void)photoBrowser:(XLPhotoBrowser *)browser clickActionSheetIndex:(NSInteger)actionSheetindex currentImageIndex:(NSInteger)currentImageIndex
{
// do something yourself
switch (actionSheetindex) {
case 4: // 刪除
{
NSLog(@"點擊了actionSheet索引是:%zd , 當前展示的圖片索引是:%zd",actionSheetindex,currentImageIndex);
[self.images removeObjectAtIndex:currentImageIndex];
[self resetScrollView];
}
break;
case 1: // 保存
{
NSLog(@"點擊了actionSheet索引是:%zd , 當前展示的圖片索引是:%zd",actionSheetindex,currentImageIndex);
[browser saveCurrentShowImage];
}
break;
default:
{
NSLog(@"點擊了actionSheet索引是:%zd , 當前展示的圖片索引是:%zd",actionSheetindex,currentImageIndex);
}
break;
}
}
- 如何選擇瀏覽器樣式
- 獲取到實例對象以后,設置browserStyle屬性即可
XLPhotoBrowser *browser = [XLPhotoBrowser showPhotoBrowserWithImages:self.images currentImageIndex:tap.view.tag];
browser.browserStyle = XLPhotoBrowserStyleIndexLabel; // 微博樣式
- 如何修改pagecontrol為縮放動畫樣式
- 僅在XLPhotoBrowserStylePageControl樣式中有效, 在XLPhotoBrowserStyleIndexLabel樣式無效
// 自定義pageControl的一些屬性
browser.pageDotColor = [UIColor purpleColor]; ///< 此屬性針對動畫樣式的pagecontrol無效
browser.currentPageDotColor = [UIColor greenColor];
browser.pageControlStyle = XLPhotoBrowserPageControlStyleClassic;///< 修改底部pagecontrol的樣式為系統樣式,默認是彈性動畫的樣式
- 如何實現類似微信那樣點擊圖片進入瀏覽器時的圖片放大和退出瀏覽時圖片縮放的過渡動畫
- 實現數據源方法中的photoBrowser:sourceImageViewForIndex:方法,傳遞圖片的容器視圖,才可以做過渡動畫
#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,
- 如何開啟調試模式,輸出格式化的提示信息
- 打開在XLPhotoBrowserConfig中的這個代碼即可 //#define XLPhotoBrowserDebug 1
- 還可以在這里修改很多樣式屬性,如:修改瀏覽器的背景色/圖片間隔等 ,使用方式很簡單,具體的使用就不在這里贅述
4. 更新日志
* 1.2.0
* 1. 支持橫豎屏適配(設備沒有鎖定方向,且項目配置支持橫屏才可以觸發橫屏瀏覽模式)
* 2. 更新SDWebImage到4.0.0 , 由于SDWebImage4.0版本對API進行了修改,所以不兼容SDWebImage4.0以下版本
* 3. 修復圖片下載進度條等已知bug
* 1.1.0
* 1. 優化框架結構，XLPhotoBrowser內部維護一個優先級為maxfloat的UIWindow，避免不同的項目會因為窗口問題造成XLPhotoBrowser顯示不正確等問題
* 2. 修改FSActionSheet源碼，修復長按彈出ActionSheet顯示在圖片后面等問題
* 3. 優化圖片放大縮小處理邏輯，修復已知bug
5. 喜歡的話,就給作者一個star ,你可以通過下面的方式聯系到我
- QQ群 : 579572313 (有什么問題,歡迎進群討論提問)
- 郵箱 : coder_xl@163.com
