CollectionView就是這麼簡單!,collectionview

來源:互聯網
上載者:User

CollectionView就是這麼簡單!,collectionview

UICollectionView 和 UICollectionViewController 類是iOS6 新引進的API,用於展示集合視圖,布局更加靈活,可實現多欄版面配置,用法類似於UITableView 和 UITableViewController 類。

使用UICollectionView 必須實現UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout這三個協議。

 

1.首先我們建立CollectionView(代碼如下)

 

- (void)initCollectionView

{

// 我是用masnory進行螢幕適配的 這個座標你也可以直接給出。

    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {

      make.top.equalTo(self.view.mas_bottom).offset(0);

        make.top.offset(0); //頂部間隔

        make.left.offset(0);//左邊

        make.bottom.offset(-10);//底部

        make.right.offset(0);//右邊

 // 

    }];

    self.collectionView.backgroundColor = [UIColor colorWithRed:241 green:241 blue:241 alpha:1];//背景色

    self.collectionView.contentInset = UIEdgeInsetsMake(10, 10, 10, 10);//插入內容的位置 與邊緣

    

    self.collectionView.delegate = self;代理協議

    self.collectionView.dataSource = self;資料來源協議

    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];

    建立新的cell

}

2.建立collectionview 必須要添加 UICollectionViewFlowLayout

//使用懶載入的方法

- (UICollectionView *)collectionView

{

    if (!_collectionView)

    {

        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

        flowLayout.itemSize = CGSizeMake((SCREEN_WIDTH - 50)/4, (SCREEN_WIDTH - 50)/4 + 20);

        flowLayout.minimumLineSpacing = 10; 每排的間隔

        flowLayout.minimumInteritemSpacing = 10; 每行的間隔

        

        self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];

        [self.view addSubview:self.collectionView];

    }

    return _collectionView;

}

3.接下來 我們需要建立一個類(CollectionviewCell)

 

cell.h 檔案中呢  我們把需要展示的內容 都有屬性展示出來

比如 展示一個圖片 和文字

@property (nonatomic, strong) UIImageView *familyImageView;

@property (nonatomic, strong) UILabel *titleLabel;

所以  接下來在.m中寫這2個控制項(我的座標都是masnory適配  也可以直接給出)

-(instancetype)initWithFrame:(CGRect)frame

{

         if (self = [super initWithFrame:frame])

    {

        self.familyImageView=[[UIImageView alloc] init];

         self.titleLabel = [[UILabel alloc] init];

        self.titleLabel.font = [UIFont systemFontOfSize:13];

        self.titleLabel.textAlignment=NSTextAlignmentCenter;

        [self.contentView addSubview:self.titleLabel];

        [self.contentView addSubview:self.familyImageView];

//make  是masnory的一個屬性 用於定義座標位置

        [self.familyImageView mas_makeConstraints:^(MASConstraintMaker *make)

         {

             make.top.offset = 10;

             make.left.offset = 10;

             make.bottom.equalTo(self.titleLabel.mas_top).offset(-10);

             make.right.offset = -10;

         }];

        [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make)

         {

             make.left.offset = 0;

             make.bottom.offset = 0;

             make.right.offset = 0;

             make.height.offset = 20;    

         }];

    }

    return self;

}

 4.前提工作都基本做完了  接下來 就是實現協議代理的 方法 用來展示內容 顯示在螢幕中

//區數

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

    return 1;

}

 //每個區顯示的小模組

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

    return 18;

}

 cell 上面展示的內容

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

{

     CollectionViewCell*cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    注意上面這個CollectionViewCell 是你建立的cell  名稱是一樣的

 

    下面就是展示你需要展示的內容了 直接用cell 打點調用就可以用屬性了。

    cell.familyImageView.image = _arr[indexPath.row];這是我之前定義的一個圖片

    cell.titleLabel.text=nameArr[indexPath.row];label

     

 

 

    return cell;

}

  cell的點擊方法    

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

{

 

}

 

大致就是這些了,願猿友們早日迎娶白富美,走向人生peak!

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.