IOS Development Imitation Electric Quotient class app homepage instance _ios

Now Taobao, Jingdong application is very wide, and today imitate to do a similar electric business app home example.

One, GIF effect chart:

Second, the UI layout:
look at the hierarchy of the diagram below, remove the bottom of the Tabbar, the rest of the home page is all implemented with Uicollectionview, which is divided into two parts, to achieve three kinds of functions. Above is the parent Uicollectionview Headerview, in this Headerview added two Uicollectionview, respectively, to achieve the picture infinite carousel and a horizontal Sliding function menu button. Then the following is the cell of the Father Uicollectionview, slide up and down to show the product content.

Third, Code:

Because this article is mainly about how to achieve the Electronic Business category app home layout, so how to set up Uicollectionview I will not repeat, the Internet has a lot of this chapter.

The following is the code in the master controller myihomeviewcontroller.m file, the code that initializes the parent Uicollectionview is here, and the code is posted in some places where special attention is needed and the source of the download is available: 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];
Turn off AutoFit scrolling view (the problem does not turn off the picture carousel) self.automaticallyadjustsscrollviewinsets = no;

  }-(void) Viewwillappear: (BOOL) animated {[Super viewwillappear:animated];
Hide Navigationbar Self.navigationController.navigationBar.hidden = YES;

  }-(void) Loadview {[Super Loadview];
Add CollectionView [Self.view AddSubview:self.collectionView]; }//Lazy Load CollectionView-(Uicollectionview *) CollectionView {if (!_collectionview) {_collectionview = [[UICollecti Onview Alloc] Initwithframe:[uiscreen mainscreen].bounds Collectionviewlayout:[[myihomelayout alloc] init];

    _collectionview.backgroundcolor = Jfrgbcolor (238, 238, 238);

    Registered cell [_collectionview Registerclass:[myihomecell class] forcellwithreuseidentifier:id]; Register Uicollectionreusableview that Headerview (remember to add headerview must register first) [_collectionview Registerclass:[myihomeheaderview

    Class] Forsupplementaryviewofkind:uicollectionelementkindsectionheader withreuseidentifier:@ "HeaderView"];
    _collectionview.delegate = self;
  _collectionview.datasource = self;
return _collectionview; #pragma mark---uicollectionviewdatasource data source Method-(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 = @ "Ants home ants home ants home";
  Cell.currentprice = @ "¥100";
  Cell.originalprice = @ "¥288";
return cell; }//Add Headerview-(Uicollectionreusableview *) CollectionView: (Uicollectionview *) CollectionView Viewforsupplementaryelementofkind: (NSString *) kind Atindexpath: (Nsindexpath *) Indexpath {Myihomeheaderview * Headerview = [CollectionView dequeuereusablesupplementaryviewofkind:uicollectionelementkindsectionheader

  withreuseidentifier:@ "Headerview" forindexpath:indexpath];;
  The Uicollectionreusableview type if (kind = = Uicollectionelementkindsectionheader) registered above is judged to be {return headerview;
  }else {return nil; #pragma mark---uicollectionviewdelegate//Set Headerview width-(cgsize) CollectionView: (Uicollectionview *) CollectionView layout: (uicollectionviewlayout *) collectionviewlayout referencesizeforheaderinsection: (NSInteger)

Section {return Cgsizemake (Self.view.bounds.size.width, 380);} #pragma mark---uicollectionviewdelegateflowlayout//Set CollectionView cell, left, bottom, rightSpacing-(Uiedgeinsets) CollectionView: (Uicollectionview *) CollectionView layout: (uicollectionviewlayout*)

Collectionviewlayout Insetforsectionatindex: (nsinteger) Section {return Uiedgeinsetsmake (14, 0, 0, 0);}
  -(void) didreceivememorywarning {[Super didreceivememorywarning];
Dispose of any of the can is recreated.

 } @end

Attention:

1, in the main controller is best to automaticallyAdjustsScrollViewInsets set the property to NO this reason I in the previous article a line of code implementation of the picture infinite Carousel has the instructions, if there is a navigationbar if not set will automatically adjust the scrolling view of the frame, This results in a imageview display of the wheel-seeding device.

-(void) viewdidload {
   [super viewdidload]; 

  Turn off AutoFit scrolling view (problem occurs without turning off picture carousel)
   self.automaticallyadjustsscrollviewinsets = no;
}

2, Uicollectionview Uicollectionreusableview is the equivalent of UITableView Headerview and Footerview, To append Headerview to Uicollectionview, you must register first, and the appended type is the UICollectionElementKindSectionHeader corresponding UICollectionElementKindSectionFooter append Footerview

Register Uicollectionreusableview Code when Uicollectionview is instantiated

Register Uicollectionreusableview that Headerview (remember to add headerview must register first)
    [_collectionview registerclass:[ Myihomeheaderview class] Forsupplementaryviewofkind:uicollectionelementkindsectionheader withReuseIdentifier:@ " Headerview "];

3, the implementation of Uicollectionview data source Agent method- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

Add Headerview
-(Uicollectionreusableview *) CollectionView: (Uicollectionview *) CollectionView Viewforsupplementaryelementofkind: (NSString *) kind Atindexpath: (Nsindexpath *) Indexpath {
  Myihomeheaderview * Headerview = [CollectionView dequeuereusablesupplementaryviewofkind:uicollectionelementkindsectionheader withreuseidentifier:@ "Headerview" Forindexpath:indexpath];

  The Uicollectionreusableview type
  if (kind = = Uicollectionelementkindsectionheader) is registered above to determine {return
    Headerview;
  } else {return
    nil;
  }
}

The following is a description of the project folder:

When you have finished unpacking, open this file to run the project:

Four, Summary:

1, the realization of this home layout in fact can also use UITableView, the principle is almost to see functional requirements, here is simple to achieve this type of electric Business app home page, like Taobao and Jingdong more complex UI layout, interested students can study, I hope this article can bring you harvest and inspiration, Comments and exchanges are welcome.

Finally: Source download