Use of Uitabbarcontroller and Uicollectionview for iOS development

This article is to record the use of Uitabbarcontroller controls and Uicollectionview controls in iOS development. The effect of the app running up to the following example:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

Uitabbarcontroller controls, which are tabs in the lower part of the page that can be switched to different pages. Uicollectionview The view in the image on the right. Show it in the form of a lattice.

This article mainly uses for example the following several knowledge points:

1. Add Uitabbarcontroller control to Viewcontroller

2. Add Uinavigationcontroller control to Viewcontroller

3. Use UITableView and Uicollectionview display list

4. Use the plist file to read the plist file in the code and load it into UITableView and Uicollectionview

The following step-by-step completion of this project:

1, first in Xcode new project, named Tabbarcontrollertest

2. Switch to Main.storyboard, then select Viewcontroller View and select Editor-->embed in-->tab Bar Controller in the menu bar after this step is complete. The interface in the storyboard looks like the following:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

3, the following to Viewcontroller set Tabbar, in the storyboard select Viewcontroller below the Tabbar. Then in the property bar on the right side of Xcode. Set the system item to contacts, for example, as seen in:

4. Add navigation bar to Viewcontroller.

Select the Viewcontroller in the storyboard, and then select Editor-->embed In-->navigationcontroller in the menu bar, after which the interface, such as the following, is seen:

Then select navigation at the top of the Viewcontroller view and configure the title as "Contacts" in the property bar on the right side of the Xcode.

5, add a representative of the recent contact Viewcontroller.

Drag a viewcontroller into the storyboard in the control area. Then right-click and hold. From the tab Bar Controller view, drag to the newly created Viewcontroller view, for example, as you can see:

After releasing the mouse. In the dialog box that appears, select the View controller, for example, as you can see:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

The view in the storyboard today is as follows:

Using the same method as the above steps, select the Tabbar at the bottom of the Viewcontroller view that we created. Then configure the system item to recents in the view on the right side of Xcode.

6, add the navigation bar for the new Viewcontroller.

Select Our new Viewcontroller in the storyboard, then select Editor-->embed in-->navigation Controller in the menu and set the navigation bar titled "Recent Contacts" as in the previous action. The storyboard should be seen for example after the operation is completed:

Here you can execute the program to see the effect. Although there is no data to show, but our Tabbar still can switch, switch to different tab. The title on the navigation bar also switches. For example, as seen in:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center ">

7, add data to the page.

First is the contact list of data, this in front of the blog post has said, here is not specific, here we need to create a new cell class Contactcell inherit from uitableviewcell,contactcell.h code such as the following:

#import <UIKit/UIKit.h> @interface contactcell:uitableviewcell@property (weak, nonatomic) Iboutlet Uiimageview * Avatarimage; @property (weak, nonatomic) Iboutlet UILabel *namelabel; @property (weak, nonatomic) Iboutlet UILabel * Phonelabel; @end

The data is then loaded into the Viewcontroller. The code for the ViewController.h file is as follows:

#import <UIKit/UIKit.h> @interface Viewcontroller:uiviewcontroller <uitableviewdatasource, Uitableviewdelegate> @property (Weak, nonatomic) Iboutlet UITableView *tableview; @end

This is mainly the code in VIEWCONTROLLER.M. We loaded the data in the external plist file, and put the code for the viewcontroller.m file first:

#import "ViewController.h" #import "ContactCell.h" @interface Viewcontroller () @end @implementation Viewcontrollernsarray *avatararr; Nsarray *namearr;    Nsarray *phonearr;static NSString *identifier = @ "Contactcell";-(void) viewdidload {[Super viewdidload];    Additional setup after loading the view, typically from a nib.    [Self loaddatafromfile];    Set TableView Proxy and data source self.tableView.delegate = self; Self.tableView.dataSource = self;} #pragma mark loading data from plist-(void) Loaddatafromfile {nsstring *filepath = [[NSBundle mainbundle] pathforresource:@ "Contac    TS "oftype:@" plist "];    Nsdictionary *dict = [[Nsdictionary alloc] initwithcontentsoffile:filepath];    Avatararr = [Dict objectforkey:@ "avatars"];    Namearr = [dict objectforkey:@ "names"]; Phonearr = [Dict objectforkey:@ "Phones"];} #pragma mark number of rows returned TableView-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) Section {return [Namearr count];} #pragma mark returns a cell-(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) Indexpath {Contactcell *cell = [Self.tablevi    EW Dequeuereusablecellwithidentifier:identifier Forindexpath:indexpath];    Cell.avatarImage.image = [UIImage Imagenamed:[avatararr ObjectAtIndex:indexPath.row]];    Cell.nameLabel.text = [Namearr objectAtIndex:indexPath.row];    Cell.phoneLabel.text = [Phonearr objectAtIndex:indexPath.row]; return cell;}    #pragma mark returns the height of the cell-(cgfloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) Indexpath { return 80;} #pragma mark is set to select a cell. Background color Restore initial state-(void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) Indexpath {[ Self.tableview Deselectrowatindexpath:indexpath Animated:yes];}    -(void) didreceivememorywarning {[Super didreceivememorywarning]; Dispose of any resources the can be recreated.} @end

Load data from the Plist file. The main use of the NSBundle class is the Pathforresource method. Here our plist file name is called contacts, the file contents such as the following:

8. Load data into CollectionView

In order to load data for CollectionView, we first have to create a new class that represents CollectionView cell, which is named Recentcell, and this class inherits from Uicollectionviewcell, RecentCell.h code such as the following:

#import <UIKit/UIKit.h> @interface Recentcell:uicollectionviewcell @property (weak, nonatomic) Iboutlet Uiimageview *avatarimage; @property (weak, nonatomic) Iboutlet UILabel *namelabel; @end

And then you have to create a new Viewcontroller loaded with CollectionView, which is named Recentviewcontroller,recentviewcontroller.h code, such as the following:

#import <UIKit/UIKit.h> @interface Recentviewcontroller:uiviewcontroller <uicollectionviewdatasource, Uicollectionviewdelegate> @property (Weak, nonatomic) Iboutlet Uicollectionview *recentcollectionview; @end

It contains only one variable that represents CollectionView, the code for the recentviewcontroller.m file, such as the following:

#import "RecentViewController.h" #import "RecentCell.h" @interface Recentviewcontroller () @end @implementation Recentviewcontrollernsarray *recentavatararr;    Nsarray *recentnamearr;static NSString *identifier = @ "Recentcell";-(void) viewdidload {[Super viewdidload];    Do any additional setup after loading the view.    [Self loaddatafromfile];    Self.recentCollectionView.delegate = self; Self.recentCollectionView.dataSource = self;}  #pragma mark loading data from a file-(void) Loaddatafromfile {nsstring *filepath = [[NSBundle mainbundle] pathforresource:@ "Contacts"    oftype:@ "Plist"];    Nsdictionary *dict = [[Nsdictionary alloc] initwithcontentsoffile:filepath];    Recentavatararr = [Dict objectforkey:@ "avatars"]; Recentnamearr = [dict objectforkey:@ "names"];} #pragma mark number of item in a section-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection :(Nsinteger) Section {return [Recentavatararr count];} #pragma mark returns a cell-(Uicollectionviewcell *) CollectionView: (UIcollectionview *) CollectionView Cellforitematindexpath: (Nsindexpath *) Indexpath {Recentcell *cell = [Self.recentColl    Ectionview Dequeuereusablecellwithreuseidentifier:identifier Forindexpath:indexpath];    Cell.avatarImage.image = [UIImage Imagenamed:[recentavatararr ObjectAtIndex:indexPath.row]];    Cell.nameLabel.text = [Recentnamearr objectAtIndex:indexPath.row]; return cell;}    -(void) didreceivememorywarning {[Super didreceivememorywarning]; Dispose of any resources the can be recreated.} @end

In fact, the use of Uicollectionview is similar to the use of UITableView, it is necessary to implement the data source and trust protocol in the header file. Then, in the. m file, implement some of the methods in the protocol to process the data displayed in the view.

The following summarizes the points that need to be noted in the project process:

(1) Be aware that the identity assigned to a cell in the properties view of Xcode must be the corresponding

(2) Don't forget to associate the variable that represents the View object in your code with a real view

(3) To add data to the collection view such as UITableView and Uicollectionview. Be sure not to forget to implement the Protocol in the header file.

Demo Code

Use of Uitabbarcontroller and Uicollectionview for iOS development