Hello. I believe you have some knowledge of Sina Weibo interface.
In this respect, we need to know something about UITableView. The following we have some code to gradually expand our scope of vision.
From the interface can be seen above is a uinavigationbar and below is a uitabbar. As for these two parts, I will write this small project later on. Now let's understand the use of the next UITableView.
This is a grouped list of uitableviewstylegroup.
typedef ns_enum (Nsinteger, Uitableviewstyle) { uitableviewstyleplain, //Regular table View uitableviewstylegrouped //Preferences style table view};
We need to lay out the UITableViewCell of each line. For the subsequent maintenance of the code, we need to encapsulate the cell in some case. Easy to maintain code in the future.
First we need to create two simple models and inherit NSObject, one for all the corresponding groups and corresponding rows represented by Jhcommongroup and Jhcommonitem respectively
It has its own unique properties.
Jhcommonitem class:
@interface jhcommonitem:nsobject/** icon */@property (nonatomic,copy) nsstring *icon;/** title */@property (nonatomic,copy) NSString *title;/** Sub-title */@property (nonatomic,copy) nsstring *subtitle;+ (instancetype) Itemwithtitle: (NSString *) Title icon: (NSString *) icon;+ (instancetype) Itemwithtitle: (NSString *) title;
. m File:
@implementation jhcommonitem+ (Instancetype) Itemwithtitle: (NSString *) title icon: (NSString *) icon{ Jhcommonitem *item = [[Jhcommonitem alloc] init]; Item.title = title; Item.icon = icon; return item;} + (Instancetype) Itemwithtitle: (NSString *) title{ return [self itemwithtitle:title icon:nil];}
Jhcommongroup class:
@interface jhcommongroup:nsobject/** Group Header */@property (nonatomic,copy) nsstring *header;/** Group Tail */@property (nonatomic, copy) NSString *footer;/** all the row models in this group (the arrays are all Jhcommonitem models) */@property (Nonatomic,strong) Nsarray *items;+ ( Instancetype) Group;
In addition we have to create a Jhcommoncell and inherit UITableViewCell, if you need to add some special icons in the cell, the text needs to adjust its range-(void) layoutsubviews;
Jhcommoncell class:
#import "JHCommonCell.h" #include "JHCommonGroup.h" #include "JHCommonItem.h" @implementation jhcommoncell+ ( Instancetype) Cellwithtableview: (UITableView *) tableview{static NSString *id = @ "Cell"; Jhcommoncell *cell = [TableView dequeuereusablecellwithidentifier:id]; if (!cell) {cell = [[Jhcommoncell alloc] initwithstyle:uitableviewcellstylevalue1 Reuseidentifier:id]; } return cell; -(ID) Initwithstyle: (Uitableviewcellstyle) style Reuseidentifier: (NSString *) reuseidentifier{self = [super Initwithstyle:style Reuseidentifier:reuseidentifier]; if (self) {//sets the font of the caption Self.textLabel.font = [Uifont boldsystemfontofsize:15]; Self.detailTextLabel.font = [Uifont systemfontofsize:12]; } return self;} -(void) layoutsubviews{[Super Layoutsubviews]; self.detailtextlabel.x = Cgrectgetmaxx (Self.textLabel.frame) +3;} -(void) SetItem: (Jhcommonitem *) item{self.imageView.image = [UIImage ImageNamed:item.icon]; Self.textLabel.text = Item.title; Self.detailTextLabel.text = Item.subtitle;} @end
After some model classes have been defined, our work still needs to be put on the controller, Since we have defined a Jhdiscoverviewcontroller controller and inherited it to uitableviewcontroller. So the inside has helped us set up a proxy and data source method (Uitableviewdelegate, Uitableviewdatasource), but also to understand the meaning of @required and @optional.
#import "JHDiscoverViewController.h" #import "JHSearchBar.h" #import "JHCommonCell.h" #import "JHCommonItem.h" #import "JHCommonGroup.h" @interface Jhdiscoverviewcontroller () @property (nonatomic,strong) Nsmutablearray *groups;@ End@implementation jhdiscoverviewcontroller-(Nsmutablearray *) groups{if (_groups = nil) {self.groups = [NSMut Ablearray array]; } return _groups;} -(ID) init{return [self initwithstyle:uitableviewstylegrouped];} -(void) viewdidload{[Super Viewdidload]; Self.tableView.backgroundColor = Jhcolor (211, 211, 211); Create Search Box Object Jhsearchbar *searchbar = [Jhsearchbar Searchbar]; Searchbar.width = 300; Searchbar.height = 30; Self.navigationItem.titleView = Searchbar; Initialize data [self setupgroup];} -(void) setupgroup{[self group0]; [Self group1]; [Self group2];} -(void) group0{jhcommongroup *group = [Jhcommongroup Group]; [Self.groups Addobject:group]; Jhcommonitem *hotstatus = [Jhcommonitem itemwithtitle:@ "Top MicroBo "icon:@" Hot_status "]; Hotstatus.subtitle = @ "jokes, entertainment, God's right to move here"; Jhcommonitem *findpeople = [Jhcommonitem itemwithtitle:@ "Find Someone" icon:@ "find_people"]; Findpeople.subtitle = @ "Celebrities, interesting people here"; Group.items = @[hotstatus, findpeople]; }-(void) group1{jhcommongroup *group = [Jhcommongroup Group]; [Self.groups Addobject:group]; 2. Set all row data for the group Jhcommonitem *gamecenter = [Jhcommonitem itemwithtitle:@ "Game Center" icon:@ "Game_center"]; Jhcommonitem *near = [Jhcommonitem itemwithtitle:@ "Peripheral" icon:@ "near"]; Jhcommonitem *app = [Jhcommonitem itemwithtitle:@ "app" icon:@ "app"]; Group.items = @[gamecenter, near, app];} -(void) group2{jhcommongroup *group = [Jhcommongroup Group]; [Self.groups Addobject:group]; 2. Set all row data for the group Jhcommonitem *video = [Jhcommonitem itemwithtitle:@ "video" icon:@ "Videos"]; Jhcommonitem *music = [Jhcommonitem itemwithtitle:@ "Music" icon:@ "musical"]; Jhcommonitem *movie = [Jhcommonitem itemwithtitle:@ "movie" icon:@ "MOvie "]; Jhcommonitem *cast = [Jhcommonitem itemwithtitle:@ "podcast" icon:@ "cast"]; Cast.subtitle = @ "(10)"; Jhcommonitem *more = [Jhcommonitem itemwithtitle:@ ' more ' icon:@ ' more ']; Group.items = @[video, music, movie, cast, More];} -(Nsinteger) Numberofsectionsintableview: (UITableView *) tableview{return self.groups.count;} -(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) section{jhcommongroup *group = self . Groups[section]; return group.items.count;} -(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) Indexpath; {Jhcommoncell *cell = [Jhcommoncell Cellwithtableview:tableview]; Jhcommongroup *group = self.groups[indexpath.section]; Transfer model Data Cell.item = Group.items[indexpath.row]; return cell;}
This is just a simple interface, you can also do a maintenance, if you have any ideas, please tell me, thanks again!!
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
The discovery of Sina micro-blog