IOS 自定義UICollectionView的頭視圖或者尾視圖UICollectionReusableView
IOS 自定義UICollectionView的頭視圖或者尾視圖UICollectionReusableView
其實看標題就知道是需要繼承于UICollectionReusableView,實現(xiàn)一個滿足自己需求的視圖.那么如何操作了,看下面代碼:
ViewController.m文件中 #import "ViewController.h" #import "LSHControl.h" #import "SHCollectionReusableView.h" #import "SHCollectionViewCell.h" #define SHCollectionViewCellIdetifiler @"CollectionViewCell" #define SHCollectionReusableViewHeader @"CollectionHeader" #define SHCollectionReusableViewFooter @"CollectionFooter" @interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>{ NSArray *recipeImages; NSArray *hearderTitleArray; } @property(nonatomic,strong) UICollectionView *rightCollectionView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; NSArray *mainDishImages = [NSArray arrayWithObjects:@"egg_benedict.jpg", @"full_breakfast.jpg", @"ham_and_cheese_panini.jpg", @"ham_and_egg_sandwich.jpg", @"hamburger.jpg", @"instant_noodle_with_egg.jpg", @"japanese_noodle_with_pork.jpg", @"mushroom_risotto.jpg", @"noodle_with_bbq_pork.jpg", @"thai_shrimp_cake.jpg", @"vegetable_curry.jpg", nil]; NSArray *drinkDessertImages = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"green_tea.jpg", @"starbucks_coffee.jpg", @"white_chocolate_donut.jpg", nil]; recipeImages = [NSArray arrayWithObjects:mainDishImages, drinkDessertImages, nil]; hearderTitleArray=@[@"分區(qū)1",@"分區(qū)2"]; [self createCollectionView]; } -(void)createCollectionView{ UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc] init]; flowLayout.minimumInteritemSpacing=0.f;//item左右間隔 flowLayout.minimumLineSpacing=5.f;//item上下間隔 flowLayout.sectionInset=UIEdgeInsetsMake(5,15,5, 15);//item對象上下左右的距離 flowLayout.itemSize=CGSizeMake(80, 80);//每一個 item 對象大小 flowLayout.scrollDirection=UICollectionViewScrollDirectionVertical;//設置滾動方向,默認垂直方向. flowLayout.headerReferenceSize=CGSizeMake(self.view.frame.size.width, 30);//頭視圖的大小 flowLayout.footerReferenceSize=CGSizeMake(self.view.frame.size.width, 30);//尾視圖大小 self.rightCollectionView= [LSHControl createCollectionViewFromFrame:self.view.frame collectionViewLayout:flowLayout dataSource:self delegate:self backgroudColor:[UIColor whiteColor]]; //自定義重用視圖 [self.rightCollectionView registerNib:[UINib nibWithNibName:@"SHCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:SHCollectionViewCellIdetifiler]; [self.rightCollectionView registerClass:[SHCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:SHCollectionReusableViewHeader]; //使用原有重用視圖 [self.rightCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:SHCollectionReusableViewFooter ]; [self.view addSubview:self.rightCollectionView]; } - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return [recipeImages count]; } - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return [[recipeImages objectAtIndex:section] count]; } - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { UICollectionReusableView *reusableview = nil; if (kind == UICollectionElementKindSectionHeader) { SHCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:SHCollectionReusableViewHeader forIndexPath:indexPath]; /** * * 注意:雖然這里沒有看到明顯的initWithFrame方法,但是在獲取重用視圖的時候,系統(tǒng)會自動調用initWithFrame方法的.所以在initWithFrame里面進行初始化操作,是沒有問題的! */ [headerView getSHCollectionReusableViewHearderTitle:hearderTitleArray[indexPath.section]]; reusableview = headerView; } if (kind == UICollectionElementKindSectionFooter) { UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:SHCollectionReusableViewFooter forIndexPath:indexPath]; /** * 如果頭尾視圖沒什么很多內容,直接創(chuàng)建對應控件進行添加即可,無需自定義. */ footerview.backgroundColor=[UIColor redColor]; reusableview = footerview; } return reusableview; } - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ /** * * 這里自定義cell,使用xib進行布局.對于如何使用xib創(chuàng)建視圖,不明白的,可以看我之前寫的一篇文章. */ SHCollectionViewCell *cell = (SHCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:SHCollectionViewCellIdetifiler forIndexPath:indexPath]; UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100]; recipeImageView.image = [UIImage imageNamed:[recipeImages[indexPath.section] objectAtIndex:indexPath.row]]; cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"photo-frame-2.png"]]; return cell; } @end
自定義UICollectionViewCell,使用 xib進行布局
#import <UIKit/UIKit.h> @interface SHCollectionViewCell : UICollectionViewCell @property (weak, nonatomic) IBOutlet UIImageView *recipeImageView; @end #import "SHCollectionViewCell.h" @implementation SHCollectionViewCell @end
自定義UICollectionReusableView,手寫代碼進行布局
#import <UIKit/UIKit.h> @interface SHCollectionReusableView : UICollectionReusableView /** * 聲明相應的數(shù)據(jù)模型屬性,進行賦值操作,獲取頭視圖或尾視圖需要的數(shù)據(jù).或者提供一個方法獲取需要的數(shù)據(jù). */ -(void)getSHCollectionReusableViewHearderTitle:(NSString *)title; @end
#import "SHCollectionReusableView.h" #import "LSHControl.h" @interface SHCollectionReusableView (){ UILabel *titleLabel; } @end @implementation SHCollectionReusableView -(id)initWithFrame:(CGRect)frame{ self=[super initWithFrame:frame]; if (self) { self.backgroundColor=[UIColor greenColor]; [self createBasicView]; } return self; } /** * 進行基本布局操作,根據(jù)需求進行. */ -(void)createBasicView{ titleLabel=[LSHControl createLabelWithFrame:CGRectMake(5, 0,self.frame.size.width-50, self.frame.size.height) Font:[UIFont systemFontOfSize:14.0] Text:@"" color:[UIColor grayColor]]; [self addSubview:titleLabel]; } /** * 設置相應的數(shù)據(jù) * * @param title */ -(void)getSHCollectionReusableViewHearderTitle:(NSString *)title{ titleLabel.text=title; } @end
效果如下圖:
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
iOS開發(fā)UICollectionView實現(xiàn)拖拽效果
這篇文章主要為大家詳細介紹了iOS開發(fā)UICollectionView實現(xiàn)拖拽效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01Flutter Widgets MediaQuery控件屏幕信息適配
這篇文章主要為大家介紹了Flutter Widgets 之 MediaQuery控件獲取屏幕信息和屏幕適配示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11iOS App中UILabel的自定義及在Auto Layout中的使用
這篇文章主要介紹了iOS App中UILabel的自定義及在Auto Layout中的使用,示例代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-03-03IOS 開發(fā)之實現(xiàn)取消tableView返回時cell選中的問題
這篇文章主要介紹了IOS 開發(fā)之實現(xiàn)取消tableView返回時cell選中的問題的相關資料,希望通過本文能實現(xiàn)大家想要的功能,需要的朋友可以參考下2017-09-09詳解ios中自定義cell,自定義UITableViewCell
本篇文章主要介紹了ios中自定義cell,自定義UITableViewCell,非常具有實用價值,需要的朋友可以參考下。2016-12-12