快捷導(dǎo)航

iOS開(kāi)發(fā)仿電商類APP首頁(yè)實(shí)例

更新時(shí)間：2016年11月07日 11:17:37 作者：zhifenx

本篇文章主要介紹了iOS開(kāi)發(fā)仿電商類APP首頁(yè)實(shí)例，主要是利用ui布局，具有一定的參考價(jià)值，有需要的可以了解一下。

現(xiàn)在淘寶，京東應(yīng)用很廣泛，今天就效仿做一個(gè)類似電商APP首頁(yè)的實(shí)例。

一、Gif效果圖：

二、UI布局：
看下圖的層級(jí)關(guān)系，除去最下方的TabBar，首頁(yè)其余部分全是用UICollectionView實(shí)現(xiàn)；其分兩大部分，實(shí)現(xiàn)三種功能。上方是父UICollectionView的headerView，在此headerView中添加了兩個(gè)UICollectionView，分別實(shí)現(xiàn)圖片無(wú)限輪播器和一個(gè)橫向滑動(dòng)的功能菜單按鈕。然后下面就是父UICollectionView的cell，上下滑動(dòng)展示商品內(nèi)容。

三、代碼：

因?yàn)檫@篇文章主要是講如何實(shí)現(xiàn)電商類APP首頁(yè)布局的，所以如何設(shè)置UICollectionView我就不再贅述，網(wǎng)上有很多這方面的章。

下面是主控制器MYIHomeViewController.m文件中的代碼，初始化父UICollectionView的代碼就在這里面，貼出這部分代碼是有些地方需要特別注意，有需要的可以下載源碼：https://pan.baidu.com/s/1dFsnJpR

#import "MYIHomeViewController.h"

#import "MYIHomeHeaderView.h"
#import "JFConfigFile.h"
#import "MYIHomeLayout.h"
#import "MYIHomeCell.h"

static NSString *ID = @"collectionViewCell";

@interface MYIHomeViewController ()<UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>

@property (nonatomic, strong) UICollectionView *collectionView;

@end

@implementation MYIHomeViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  //關(guān)閉自動(dòng)調(diào)整滾動(dòng)視圖（不關(guān)閉圖片輪播器會(huì)出現(xiàn)問(wèn)題）
  self.automaticallyAdjustsScrollViewInsets = NO;
}

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];

  //隱藏navigationBar
  self.navigationController.navigationBar.hidden = YES;
}

- (void)loadView {
  [super loadView];

  //添加collectionView
  [self.view addSubview:self.collectionView];
}

//懶加載collectionView
- (UICollectionView *)collectionView {
  if (!_collectionView) {
    _collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:[[MYIHomeLayout alloc] init]];
    _collectionView.backgroundColor = JFRGBColor(238, 238, 238);

    //注冊(cè)cell
    [_collectionView registerClass:[MYIHomeCell class] forCellWithReuseIdentifier:ID];

    //注冊(cè)UICollectionReusableView即headerView（切記要添加headerView一定要先注冊(cè)）
    [_collectionView registerClass:[MYIHomeHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];

    _collectionView.delegate = self;
    _collectionView.dataSource = self;
  }
  return _collectionView;
}

#pragma mark ---UICollectionViewDataSource 數(shù)據(jù)源方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
  return 80;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
  MYIHomeCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
  cell.iconName = @"goodsimagetest";
  cell.describe = @"螞蟻到家螞蟻到家螞蟻到家";
  cell.currentPrice = @"¥100";
  cell.originalPrice = @"¥288";
  return cell;
}

//添加headerView
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
  MYIHomeHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];;

  //判斷上面注冊(cè)的UICollectionReusableView類型
  if (kind == UICollectionElementKindSectionHeader) {
    return headerView;
  }else {
    return nil;
  }
}

#pragma mark ---UICollectionViewDelegate
//設(shè)置headerView的寬高
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {

  return CGSizeMake(self.view.bounds.size.width, 380);
}

#pragma mark ---UICollectionViewDelegateFlowLayout

//設(shè)置collectionView的cell上、左、下、右的間距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
  return UIEdgeInsetsMake(14, 0, 0, 0);
}

- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
}

@end

注意：

1、在主控制器中最好將automaticallyAdjustsScrollViewInsets屬性設(shè)置為NO這個(gè)原因我在上一篇文章一行代碼實(shí)現(xiàn)圖片無(wú)限輪播器中有說(shuō)明,如果在有NavigationBar的情況下如果不設(shè)置就會(huì)自動(dòng)調(diào)整滾動(dòng)視圖的frame，這樣會(huì)導(dǎo)致輪播器imageView顯示錯(cuò)位。

- (void)viewDidLoad {
   [super viewDidLoad]; 

  //關(guān)閉自動(dòng)調(diào)整滾動(dòng)視圖（不關(guān)閉圖片輪播器會(huì)出現(xiàn)問(wèn)題）
   self.automaticallyAdjustsScrollViewInsets = NO;
}

2、UICollectionView的UICollectionReusableView就相當(dāng)于UITableView的headerView和footerView,要想給UICollectionView追加headerView就必須先注冊(cè)，且追加的類型是UICollectionElementKindSectionHeader相對(duì)應(yīng)的UICollectionElementKindSectionFooter就是追加footerView

實(shí)例化UICollectionView時(shí)的注冊(cè)UICollectionReusableView代碼

//注冊(cè)UICollectionReusableView即headerView（切記要添加headerView一定要先注冊(cè)）
    [_collectionView registerClass:[MYIHomeHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];

3、實(shí)現(xiàn)UICollectionView的數(shù)據(jù)源代理方法- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

//添加headerView
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
  MYIHomeHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];

  //判斷上面注冊(cè)的UICollectionReusableView類型
  if (kind == UICollectionElementKindSectionHeader) {
    return headerView;
  }else {
    return nil;
  }
}

下面是項(xiàng)目文件夾說(shuō)明：

下載完成解壓后請(qǐng)打開(kāi)這個(gè)文件運(yùn)行項(xiàng)目：

四、總結(jié)：

1、實(shí)現(xiàn)這種首頁(yè)布局其實(shí)還可以用UITableView，原理差不多就看功能需求，這里就簡(jiǎn)單的實(shí)現(xiàn)了此類電商APP的首頁(yè)，像淘寶和京東那樣更復(fù)雜的UI布局，有興趣的同學(xué)可以研究一下，希望這篇文章可以給你帶來(lái)收獲和啟發(fā)，歡迎評(píng)論交流。

最后：源碼下載

您可能感興趣的文章: