iOS中 UICollectionView图片浏览(高性能轮播器)

来源:互联网 发布:telnet 3306端口不通 编辑:程序博客网 时间:2024/05/16 10:52





//自定义UICollectionViewFlowLayout布局需要继承UICollectionViewFlowLayout 

图片浏览效果需要继承UICollectionViewFlowLayout .m文件需要配置一下内容

#import "HMLineLayout.h"

static constCGFloat HMItemWH =100;

@implementation HMLineLayout

- (instancetype)init

{

    if (self = [superinit]) {

    }

    returnself;

}


/**

 *  只要显示的边界发生改变就重新布局:

 内部会重新调用prepareLayoutlayoutAttributesForElementsInRect方法获得所有cell的布局属性

 */

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

{

    returnYES;

}


/**

 *  用来设置collectionView停止滚动那一刻的位置

 *

 *  @param proposedContentOffset 原本collectionView停止滚动那一刻的位置

 *  @param velocity              滚动速度

 */

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity

{

    // 1.计算出scrollView最后会停留的范围

    CGRect lastRect;

    lastRect.origin = proposedContentOffset;

    lastRect.size =self.collectionView.frame.size;

    

    // 计算屏幕最中间的x

    CGFloat centerX = proposedContentOffset.x +self.collectionView.frame.size.width * 0.5;

    

    // 2.取出这个范围内的所有属性

    NSArray *array = [selflayoutAttributesForElementsInRect:lastRect];

    

    // 3.遍历所有属性

    CGFloat adjustOffsetX =MAXFLOAT;

    for (UICollectionViewLayoutAttributes *attrsin array) {

        if (ABS(attrs.center.x - centerX) < ABS(adjustOffsetX)) {

            adjustOffsetX = attrs.center.x - centerX;

        }

    }

    

    returnCGPointMake(proposedContentOffset.x + adjustOffsetX, proposedContentOffset.y);

}


/**

 *  一些初始化工作最好在这里实现

 */

- (void)prepareLayout

{

    [superprepareLayout];

    

    // 每个cell的尺寸

    self.itemSize =CGSizeMake(HMItemWH,HMItemWH);

    CGFloat inset = (self.collectionView.frame.size.width - HMItemWH) *0.5;

    self.sectionInset =UIEdgeInsetsMake(0, inset,0, inset);

    // 设置水平滚动

    self.scrollDirection =UICollectionViewScrollDirectionHorizontal;

    self.minimumLineSpacing =HMItemWH * 0.7;

    

    // 每一个cell(item)都有自己的UICollectionViewLayoutAttributes

    // 每一个indexPath都有自己的UICollectionViewLayoutAttributes

}


/** 有效距离:item的中间x距离屏幕的中间xHMActiveDistance以内,才会开始放大,其它情况都是缩小 */

static CGFloatconst HMActiveDistance =150;

/** 缩放因素:值越大, item就会越大 */

static CGFloatconst HMScaleFactor =0.6;


- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

{

    // 0.计算可见的矩形框

    CGRect visiableRect;

    visiableRect.size =self.collectionView.frame.size;

    visiableRect.origin =self.collectionView.contentOffset;

    

    // 1.取得默认的cellUICollectionViewLayoutAttributes

    NSArray *array = [superlayoutAttributesForElementsInRect:rect];

    // 计算屏幕最中间的x

    CGFloat centerX =self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;

    

    // 2.遍历所有的布局属性

    for (UICollectionViewLayoutAttributes *attrsin array) {

        // 如果不在屏幕上,直接跳过

        if (!CGRectIntersectsRect(visiableRect, attrs.frame))continue;

        

        // 每一个item的中点x

        CGFloat itemCenterX = attrs.center.x;

        

        // 差距越小,缩放比例越大

        // 根据跟屏幕最中间的距离计算缩放比例

        CGFloat scale =1 +HMScaleFactor * (1 - (ABS(itemCenterX - centerX) /HMActiveDistance));

        attrs.transform =CGAffineTransformMakeScale(scale, scale);

    }

    

    return array;

}



@end



//ViewController.m中创建九宫格视图并导入#import "HMLineLayout.h"文件 ********

#import "ViewController.h"

#import "HMImageCell.h"

#import "HMLineLayout.h"

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

@property (nonatomic,strong)NSMutableArray *images;

@property (nonatomic,weak)UICollectionView *collectionView;

@end


@implementation ViewController


//static只能自己使用 const常量值不能修改

static NSString *const ID =@"image";


- (NSMutableArray *)images

{

    if (!_images) {

        self.images = [[NSMutableArrayalloc]init];

        //对于可变数组赋值用addobjectok

        for (int i =1; i<=10; i++) {

            [self.imagesaddObject:[NSStringstringWithFormat:@"%d", i]];

        }

    }

    return_images;

}


- (void)viewDidLoad {

    [superviewDidLoad];

    

   

    

    CGFloat w =self.view.frame.size.width;

    CGRect rect =CGRectMake(0,0, w, 200);

    

    

    UIView *view =[[UIViewalloc]initWithFrame:CGRectMake(0,100, w, 300)];

    view.backgroundColor = [UIColorredColor];

    [self.viewaddSubview:view];

    

    //创建九宫格时就要告诉九宫格的样式

    UICollectionView *collectionView = [[UICollectionViewalloc]initWithFrame:rectcollectionViewLayout:[[HMLineLayoutalloc]init]];

    

    collectionView.dataSource =self;

    collectionView.delegate =self;

    [collectionView registerNib:[UINibnibWithNibName:@"HMImageCell"bundle:nil]forCellWithReuseIdentifier:ID];

    [self.viewaddSubview:collectionView];

    self.collectionView = collectionView;

    

    // collectionViewLayout :

    // UICollectionViewLayout

    // UICollectionViewFlowLayout

    

    

    [view addSubview:collectionView];

    

}


- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

    if ([self.collectionView.collectionViewLayoutisKindOfClass:[HMLineLayoutclass]]) {

        [self.collectionViewsetCollectionViewLayout:[[UICollectionViewFlowLayoutalloc]init]animated:YES];

    } else {

        [self.collectionViewsetCollectionViewLayout:[[HMLineLayoutalloc]init]animated:YES];

    }

}





//附:HMImageCellm文件

#pragma mark - <UICollectionViewDataSource>

//定义展示的Section的个数

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

    return1;

}


//定义展示的UICollectionViewCell的个数

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    returnself.images.count;

}



- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    HMImageCell *cell = [collectionViewdequeueReusableCellWithReuseIdentifier:IDforIndexPath:indexPath];

    cell.image =self.images[indexPath.item];

    return cell;

}


//- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

//{

//    // 删除模型数据

//    [self.images removeObjectAtIndex:indexPath.item];

//    

//    // UI(刷新UI)

//    [collectionView deleteItemsAtIndexPaths:@[indexPath]];

//}





#import "HMImageCell.h"


@interface HMImageCell()

@property (weak,nonatomic)IBOutletUIImageView *imageView;


@end

@implementation HMImageCell


//加载nib文件后会走这个方法nib文件中的一些属性值修改用这个方法


- (void)awakeFromNib {

    self.imageView.layer.borderWidth = 3;

    self.imageView.layer.borderColor = [UIColorwhiteColor].CGColor;

    self.imageView.layer.cornerRadius = 3;

    //超出圆角的部分裁剪掉

    self.imageView.clipsToBounds = YES;

}


- (void)setImage:(NSString *)image

{

    _image = [imagecopy];

    

    self.imageView.image = [UIImageimageNamed:image];

}


@end


0 0
原创粉丝点击