簡述UICollectionView 使用

 

 

1、介紹

　　UICollectionView類負責管理數據的有序集合以及以自定義佈局的模式來呈現這些數據，它提供了一些經常使用的表格（table）功能，此外還增長了許多單欄佈局。UICollectionView支持能夠用於實現多列網格、 平鋪的佈局、 圓形的佈局和更多的自定義佈局，甚至你能夠動態地改變它的佈局。

當將一個集合視圖添加到您的用戶界面，您的應用程序的主要工做是管理與該集合視圖關聯的數據。集合視圖的數據源對象，是一個對象，符合 UICollectionViewDataSource 協議，提供由您的應用程序數據集合中視圖分紅單個的item，而後能夠分爲節爲演示文稿中獲取其數據。item是您想要呈現的數據的最小單位。例如，在照片的應用程序，item多是一個單一的圖像。集合視圖使用一個cell來呈現item，這是您的數據源配置，並提供 UICollectionViewCell 類的一個實例。

除了將它嵌入在您的用戶界面，您可使用 UICollectionView 對象的方法以確保item的可視化表示匹配您的數據源對象中的順序。所以，每當您添加、 刪除或從新排列您的集合中的數據，您可使用此類的方法來插入、 刪除和從新排列相應cell的狀態。您還使用集合視圖對象來管理所選的item。

 

 2、使用

 

　　1.咱們要使用UICollectionView得實現UICollectionViewDataSource, UICollectionViewDelegate,UICollectionViewDelegateFlowLayout這三個協議。UICollectionViewDataSource是它的數據源，UICollectionViewDelegate是它的呈現樣式，UICollectionViewDelegateFlowLayout是它的佈局模式

 

　　2.初始化，在初始化以前咱們須要常見佈局實例

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

 

UICollectionView *colView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

 

　　3.註冊UICollectionView使用的cell類型。

【必須先註冊，不然會報異常

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'could not dequeue a view of kind: UICollectionElementKindCell with identifier myCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'

】

[colView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"myCell"];

　　4.設置代理　

    colView.delegate = self;
    colView.dataSource = self;

 

 

　　5.實現協議

UICollectionViewDataSource

//配置UICollectionView的每一個section的item數
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return [[self loadData] count];
}

 

//配置section數
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

 

//呈現數據
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellID = @"myCell";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

 

UICollectionViewDelegateFlowLayout

//配置每一個item的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(100, 60);
}

//配置item的邊距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(20, 20, 0, 20);
}

 

 效果

咱們明晰地能夠看到，它已經進行自動佈局，爲了更能說明問題，咱們如今將

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(200, 60);
}

 

 

return CGSizeMake(60, 60);

 

UICollectionViewDelegate

//點擊item時觸發
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"您點擊了item:%@", [[self loadData] objectAtIndex:indexPath.row]);
    [collectionView cellForItemAtIndexPath:indexPath].backgroundColor = [UIColor redColor];
    
}

//當前ite是否能夠點擊
- (BOOL) collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
    if (indexPath.row % 2)
    {
        return YES;
    }
    
    return NO;
}

 

 

咱們也能夠經過設置UICollectionViewCell的selectedBackgroundView屬性來改變cell選中時的背景視圖。

咱們還能夠設置哪些cell點擊時不高亮，點擊時cell的樣式和點擊後cell的樣式

- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}

- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
}

- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor grayColor];
}

 

 

 

 

 

 

 

 

 

 

 

==============================================================================華麗麗分割線=====================================================================

 

 

 

 

 

自用 Demo-選擇器

  1 @interface IncTagViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
 2 
 3 @end
 4 
 5 @implementation IncTagViewController{  6     
 7     UICollectionView *tagCollectionView;  8     UILabel *tagNameLabel;  9     
 10     
 11     NSMutableArray *selectArr;  12     
 13     NSMutableArray *tagArr;  14     
 15 }  16 
 17 -(void)viewWillAppear:(BOOL)animated{  18     
 19     self.tabBarController.tabBar.hidden = YES;  20 }  21 
 22 
 23 - (void)viewDidLoad {  24  [super viewDidLoad];  25     // Do any additional setup after loading the view.
 26     self.view.backgroundColor = Color(237, 237, 237);  27     [self createNavWtihBg:@"daohang" andLeftBtnName:@"返回" andRightBtnName:@"保存" andTitle:@"感興趣的行業"];  28     
 29  [self createData];  30    
 31  [self createLayout];  32     
 33 }  34 
 35 
 36 -(void)createData{  37     
 38     
 39     tagArr = [NSMutableArray arrayWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"78",@"8",@"9",@"5",@"4",@"2",@"143",@"156",@"131",@"5",@"544",@"64",@"8",@"484",@"5",@"15",@"6",@"548",@"4",@"435",@"15",@"49",@"84",@"654",@"8",@"647",@"65",@"4", nil];  40     
 41 
 42     
 43      selectArr = [[NSMutableArray alloc] initWithCapacity:0];  44     // @"0" 字符串0表示該行是未選中狀態  45     // @"1" 字符串1表示該行是選中狀態
 46     for (int i = 0; i < tagArr.count; i ++) {  47         //真是數據時，在這裏匹配判斷是是否相同變成@」1「
 48         [selectArr addObject:@"0"];  49  }  50     
 51     
 52 }  53 
 54 -(void)createLayout{  55     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];  56     tagCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT-64) collectionViewLayout:layout];  57     [tagCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"CollectionViewCell"];  58     tagCollectionView.backgroundColor = [UIColor clearColor];  59     tagCollectionView.dataSource = self;  60     tagCollectionView.delegate = self;  61  [self.view addSubview:tagCollectionView];  62     
 63 }  64 
 65 //配置UICollectionView的每一個section的item數
 66 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{  67     return tagArr.count;  68 }  69 
 70 
 71 
 72 //配置每一個item的size
 73 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{  74     return CGSizeMake((SCREEN_WIDTH-50)/4, 34);  75 }  76 
 77 //配置item的邊距
 78 - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{  79     return UIEdgeInsetsMake(20, 10, 0, 10);  80 }  81 
 82 
 83 //呈現數據
 84 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{  85     
 86         
 87     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionViewCell" forIndexPath:indexPath];  88     cell.backgroundColor = [UIColor whiteColor];  89     tagNameLabel = [TXFactory createLabelWithFrame:CGRectMake(0, 0, (SCREEN_WIDTH-50)/4, 34) Font:14.f Text:tagArr[indexPath.row] bgColor:[UIColor clearColor] textColor:[UIColor lightGrayColor]];  90     tagNameLabel.textAlignment = 1;  91     tagNameLabel.tag = indexPath.row+100;  92 
 93     //根據狀態來展現
 94     if ([selectArr[indexPath.row] isEqualToString:@"0"]) {  95         tagNameLabel.textColor = [UIColor lightGrayColor];  96     }else{  97        tagNameLabel.textColor = [UIColor orangeColor];  98  }  99 
100  [cell.contentView addSubview:tagNameLabel]; 101     
102     return cell; 103 } 104 
105 //點擊item時觸發
106 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{ 107     NSLog(@"您點擊了item:%ld", (long)indexPath.row); 108     
109     NSString *stateStr = selectArr[indexPath.row]; 110     NSString *changeStateStr; 111     //連續點擊的時候，兩種狀態進行切換
112     if ([stateStr isEqualToString:@"0"]) { 113         
114         
115      UILabel *find_label = (UILabel *)[self.view viewWithTag:indexPath.row+100]; find_label.textColor = [UIColor orangeColor]; 116         
117         changeStateStr = @"1"; 118         
119     } else { 120     UILabel *find_label = (UILabel *)[self.view viewWithTag:indexPath.row+100]; find_label.textColor = [UIColor lightGrayColor]; 121         
122         changeStateStr = @"0"; 123  } 124     
125     
126  [selectArr replaceObjectAtIndex:indexPath.row withObject:changeStateStr]; 127 
128     
129     
130 }