Banner 怎么实现轮播不同尺寸的图片

需求:

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;
}

效果

Banner 怎么实现轮播不同尺寸的图片_第1张图片

具体实现Demo

地址:查看源码

你可能感兴趣的:(Banner 怎么实现轮播不同尺寸的图片)