zoukankan      html  css  js  c++  java
  • 布局UIConllectionView

    1.在UIView/.h文件中声明属性

    1 // 声明集合视图属性
    2 @property (nonatomic, strong) UICollectionView *collectionView;
    3 
    4 // UICollectionViewFlowLayout 用来给collectionView布局
    5 @property (nonatomic, strong) UICollectionViewFlowLayout *myFlowLayout;

    2.在UIView/.m文件中重写init方法布局UIConllectionView

     1 - (void)initLayout
     2 {
     3     // 1. 定义collectionView样式
     4     
     5     self.myFlowLayout = [[UICollectionViewFlowLayout alloc] init];
     6     
     7     // 设置属性
     8     self.myFlowLayout.itemSize = CGSizeMake((self.bounds.size.width - 20 - 20.1) / 7, (self.bounds.size.width - 20 - 20.1) / 7);
     9     
    10     // 每两个Item的最小间隙(垂直滚动)
    11     self.myFlowLayout.minimumInteritemSpacing = 10;
    12     // 每两个Item的最小间隙(水平滚动)
    13     self.myFlowLayout.minimumLineSpacing = 10;
    14     // 设置滚动方向
    15     self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;// 垂直方向
    16     // 设置视图的内边距(上左下右)
    17     self.myFlowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    18     
    19     // 布局头视图尺寸
    20     self.myFlowLayout.headerReferenceSize = CGSizeMake(30, 80);
    21     
    22     // 布局尾视图尺寸
    23     self.myFlowLayout.footerReferenceSize = CGSizeMake(30, 40);
    24     
    25     // 2. 布局collectionView
    26     // 创建对象并指定样式
    27     self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];
    28     self.collectionView.backgroundColor = [UIColor cyanColor];
    29     [self addSubview:self.collectionView];
    30     
    31     
    32 }

    3.布局UICollectionReusableView

    3.1.h文件

    @interface HeaderReusableView : UICollectionReusableView
    
    @property (nonatomic, strong) UILabel *headerLable;

    3.2.m文件

     1 @implementation HeaderReusableView
     2 
     3 
     4 - (instancetype)initWithFrame:(CGRect)frame
     5 {
     6     self = [super initWithFrame:frame];
     7     if (self) {
     8         // 布局子视图
     9         [self initLayout];
    10     }
    11     return self;
    12 }
    13 
    14 // 布局子视图
    15 - (void)initLayout
    16 {
    17     self.headerLable = [[UILabel alloc] initWithFrame:self.bounds];
    18     self.headerLable.backgroundColor = [UIColor blueColor];
    19     self.headerLable.textAlignment = NSTextAlignmentCenter;
    20     [self addSubview:self.headerLable];
    21     
    22 }

    4.在ViewController中实现以下方法

      1 #import "RootViewController.h"
      2 #import "RootView.h"
      3 #import "RootCell.h"
      4 #import "HeaderReusableView.h"
      5 #import "SecondViewController.h"
      6 // 遵守协议
      7 @interface RootViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
      8 @property (nonatomic,strong) RootView *rootView;
      9 @end
     10 
     11 @implementation RootViewController
     12 
     13 - (void)loadView
     14 {
     15     self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
     16     self.view = self.rootView;
     17 }
     18 
     19 // 定义全局的重用标识符
     20 static NSString *const identifier_cell = @"identifier_cell";
     21 
     22 - (void)viewDidLoad {
     23     [super viewDidLoad];
     24     // 设置代理
     25     self.rootView.collectionView.delegate = self;
     26     self.rootView.collectionView.dataSource = self;
     27     
     28     // 第一步: 注册cell
     29     [self.rootView.collectionView registerClass:[RootCell class] forCellWithReuseIdentifier:identifier_cell];
     30     
     31     // 注册头视图 头视图和尾视图都是继承与UICollectionReusableView
     32     [self.rootView.collectionView registerClass:[HeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
     33     // 注册尾视图
     34     [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
     35 }
     36 
     37 
     38 #pragma mark UICollectionViewDataSource Method-----
     39 // 设置多少分区
     40 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
     41 {
     42     return 3;
     43 }
     44 
     45 
     46 // 设置每个分区里面有几个Item
     47 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
     48 {
     49     return 10;
     50 }
     51 
     52 
     53 // 返回每一个Item的cell对象
     54 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
     55 {
     56     // 第二步: 重用cell
     57     RootCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath];
     58     cell.backgroundColor = [UIColor orangeColor];
     59     if (indexPath.section == 0) {
     60         cell.photoImage.image = [UIImage imageNamed:@"111.jpg"];
     61 
     62     }
     63     if (indexPath.section == 1) {
     64         cell.photoImage.image = [UIImage imageNamed:@"2.jpg"];
     65     }
     66     
     67     if (indexPath.section == 2) {
     68         cell.photoImage.image = [UIImage imageNamed:@"111111.jpg"];
     69 
     70     }
     71     
     72     
     73     return cell;
     74 }
     75 
     76 // 返回头视图和尾视图
     77 
     78 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
     79 {
     80     // 判断是头视图还是尾视图
     81     if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
     82       HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView" forIndexPath:indexPath];
     83         headerView.backgroundColor = [UIColor redColor];
     84         switch (indexPath.section) {
     85             case 0:
     86                 headerView.headerLable.text = @"女神";
     87 
     88                 break;
     89             case 1:
     90                 headerView.headerLable.text = @"兵哥哥";
     91                 break;  
     92             case 2:
     93                 headerView.headerLable.text = @"男神";
     94             default:
     95                 break;
     96         }
     97         
     98         
     99         return headerView;
    100     }
    101     
    102    
    103         UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footerView" forIndexPath:indexPath];
    104     footerView.backgroundColor = [UIColor greenColor];
    105 
    106     
    107     return footerView;
    108     
    109 }
    110 
    111 // 点击Item
    112 
    113 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
    114 {
    115     SecondViewController *secondVC = [[SecondViewController alloc] init];
    116     [self.navigationController pushViewController:secondVC animated:YES];
    117     
    118     //[collectionView deselectItemAtIndexPath:indexPath animated:YES];
    119 }
  • 相关阅读:
    PHP IIS SPY
    Java 教程整理:基础、项目全都有
    14门Linux课程,打通你Linux的任督二脉!
    给缺少Python项目实战经验的人
    Spark 简介与安装部署
    仿OpenStack开发云计算管理软件”--熟悉开发环境
    如何利用《C++ Primer》学习C++?
    J2SE核心开发实战(二)——字符串与包装类
    J2SE核心开发实战(一)——认识J2SE
    pygame开发PC端微信打飞机游戏
  • 原文地址:https://www.cnblogs.com/leikun1113/p/5559441.html
Copyright © 2011-2022 走看看