iOS開發——新特性界面(UICollectionView)

沒一款app在剛下載或者更新以後,app有些特點功能須要向用戶傳遞,這個時候咱們就要使用新特新界面,用戶剛打開軟件能看到各類展現圖片,左右滑動還能夠切換圖片,那麼新特性界面是如何實現的呢,下面我就用介紹下用如何代碼去實現性特性界面,用的是iOS中的UICollectionView,自定義cell去實現的。app

CollectionViewCell.h中佈局

#import <UIKit/UIKit.h>

@interface CollectionViewCell : UICollectionViewCell

@property(nonatomic,strong)UIImage *image;

@end

 

CollectionViewCell.m中atom

#import "CollectionViewCell.h"

@interface CollectionViewCell ()

@property(nonatomic,weak)UIImageView *imageView;


@end

@implementation CollectionViewCell

//設置子控件的位置
-(void)layoutSubviews
{
    [super layoutSubviews];
    self.imageView.frame = self.bounds;
}

//懶加載
-(UIImageView *)imageView
{
    if (_imageView == nil) {
        UIImageView *imageView = [[UIImageView alloc] init];
        _imageView = imageView;
        [self.contentView addSubview:_imageView];
    }
    return _imageView;
}



-(void)setImage:(UIImage *)image
{
    _image = image;
    self.imageView.image = _image;
}

@end

 

CollectionViewController.m中spa

#import "CollectionViewController.h"
#import "CollectionViewCell.h"


@interface CollectionViewController ()

@property(nonatomic,weak)UIPageControl *pageControl;

@end

@implementation CollectionViewController

static NSString * const reuseIdentifier = @"Cell";


-(instancetype)init
{
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    
    //設置cell的尺寸
    layout.itemSize = [UIScreen mainScreen].bounds.size;
    
    //設置行間距
    layout.minimumLineSpacing = 0;
    
    //設置滾動方向
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    return [super initWithCollectionViewLayout:layout];
    
}

// 使用UICollectionViewController
// 1.初始化的時候設置佈局參數
// 2.必須collectionView要註冊cell
// 3.自定義cell

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //註冊cell
    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];
    
    self.collectionView.pagingEnabled = YES;
    self.collectionView.bounces = NO;
    self.collectionView.showsHorizontalScrollIndicator = NO;
    
    //添加pageController
    UIPageControl *pageControl = [[UIPageControl alloc] init];
    pageControl.numberOfPages = 3;
    pageControl.pageIndicatorTintColor = [UIColor blackColor];
    pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
    pageControl.center = CGPointMake(self.view.frame.size.width*0.5, self.view.frame.size.height-100);
    self.pageControl = pageControl;
    [self.view addSubview:self.pageControl];
}


//滾動就會調用
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 獲取當前的偏移量,計算當前第幾頁
    int number = scrollView.contentOffset.x/scrollView.bounds.size.width+0.5;
    
    self.pageControl.currentPage = number;
}

#pragma mark <UICollectionViewDataSource>

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return 1;
}


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

    return 3;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    
    cell.image = [UIImage imageNamed:@"cloud"];
    
    return cell;
}

 

運行代碼,最終效果以下,左右能夠滑動,底部的點表示是第幾頁。code

相關文章
相關標籤/搜索