Banner 怎麼實現輪播不同尺寸的圖片
阿新 • • 發佈:2018-12-22
需求:
UI設計APP的 BannerView 輪播圖的圖片每個Item尺寸不同,比如:設計 BannerView 的可視區域大小是 375 x 420px, 而圖片來源一些是375 x 420px, 而另一些是 375 x 450px 的, 對於高度為 450px 的圖片就會有 y 方向上的壓縮,造成變形。
解決辦法:
將不同尺寸的圖片資源用不同的控制元件放置,控制元件A放置 375 x 420px的圖片,控制元件B放置 375 x 450 的圖片,將這些控制元件放置在輪播元件上。Frame 分別設定成(0, 0, 375, 420) 和 (0, -30, 375, 450)。
那麼問題來了,什麼樣的輪播 Banner 可以盛放不同的 View?
搜~搜~搜~ 找~找~找~
終於找到一個很好用的Banner輪播元件 YJBannerView
Github原始碼地址:https://github.com/stackhou/YJBannerViewOC ,支援自定義View 和 自定義View例項。
程式碼
實現自定義View的代理方法即可傳遞不同尺寸的 View
- (UIView *)bannerView:(YJBannerView *)bannerView viewForItemAtIndex:(NSInteger)index{
if (bannerView == self.customBannerView) {
UIImageView *itemView = [self.saveBannerCustomViews objectSafeAtIndex:index];
if (!itemView) {
itemView= [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, 180)];
itemView.backgroundColor = [UIColor orangeColor];
[self.saveBannerCustomViews addObject:itemView];
}
if (index % 2 == 0) {
itemView.frame = CGRectMake(0, -40, kSCREEN_WIDTH, 220);
itemView.backgroundColor = [UIColor redColor];
}
NSString *imgPath = [self.viewModel.customBannerViewImages objectAtIndex:index];
[itemView sd_setImageWithURL:[NSURL URLWithString:imgPath] placeholderImage:[UIImage imageNamed:@"placeholder"]];
return itemView;
}
return nil;
}
效果
具體實現Demo
地址:檢視原始碼