1.先做準(zhǔn)備工作
????1.1??對(duì)屏幕寬高做一個(gè)宏定義方便引用(該屏幕寬高是以8P模擬機(jī)為參照)
? ? ? ? ? ? ?#define S_Width [UIScreen mainScreen].bounds.size.width
????????????#define S_Height [UIScreen mainScreen].bounds.size.height
? ? 1.2?將屬性設(shè)為全局屬性?
????????????@property(nonatomic,strong)UIView *lineView;//隨button滑動(dòng)的下劃線
????????????@property(nonatomic,strong)UIScrollView *bigScrollView;//與button關(guān)聯(lián)的視圖
????1.3簽署滾動(dòng)視圖的代理(后面用到的):UIScrollViewDelegate
2.對(duì)頂部按鈕進(jìn)行布局
2.1創(chuàng)建按鈕
?????NSArray*arr = [NSArray arrayWithObjects:@"1",@"2",@"3",nil];
? ??for(inti =0; i < arr.count; i++) {
? ? ? ? UIButton*btn = [UIButtonbuttonWithType:1];
? ? ? ? btn.frame=CGRectMake(S_Width/3.0*i,64,S_Width/3.0,50);
? ? ? ? [self.viewaddSubview:btn];
? ? ? ? btn.tag=20+ i;
? ? ? ? [btnsetTitle:[arr objectAtIndex:i] forState:UIControlStateNormal];
? ? ? ? [btnaddTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];
? ? ? ? if(i ==0) {
? ? ? ? ? ? [btnsetTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
? ? ? ? }
? ? }
2.2創(chuàng)建按鈕下劃線
? ??_lineView = [[UIView alloc]init];
? ? _lineView.frame=CGRectMake(0,64+50,S_Width/3.0,2);
? ? _lineView.backgroundColor = [UIColor blackColor];
? ? [self.view addSubview:_lineView];
3.Button與視圖關(guān)聯(lián)(正向關(guān)聯(lián))
? ??-(void)click:(UIButton*)btn{
? ? //button的標(biāo)題
? ? for(inti =0; i <3; i++) {
? ? ? ? UIButton*newBtn = [self.viewviewWithTag:20+ i];
? ? ? ? if(newBtn.tag== btn.tag) {
? ? ? ? ? ? [newBtnsetTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
? ? ? ? }else{
? ? ? ? ? ? [newBtnsetTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
? ? ? ? }
? ? }
? ? //下劃條隨Button滾動(dòng)變化位置
? ? _lineView.frame=CGRectMake((btn.tag-20) *S_Width/3,64+50,S_Width/3.0,2);
? ? //滾動(dòng)視圖隨Button變化位置
? ? [_bigScrollView setContentOffset:CGPointMake((btn.tag - 20)*S_Width, 0)];
}
3.視圖布局
-(void)createView{
? ? UIScrollView*bigScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0,64+52,S_Width,S_Height- (64+52)-49)];
? ? bigScrollView.backgroundColor= [UIColorwhiteColor];
? ? bigScrollView.delegate=self;
? ? _bigScrollView= bigScrollView;
? ? bigScrollView.tag=10;
? ? [self.viewaddSubview:bigScrollView];
? ? bigScrollView.contentSize=CGSizeMake(S_Width*3,0);
? ? bigScrollView.pagingEnabled=YES;
}
4.視圖與button關(guān)聯(lián)(反向關(guān)聯(lián))
? ??-(void)scrollViewDidScroll:(UIScrollView*)scrollView{
? ? CGFloatview_x = (scrollView.contentOffset.x/S_Width);
? ? _lineView.frame=CGRectMake(view_x*S_Width/3.0,64+50,S_Width/3.0,2);
? ? for(inti =0; i <3; i++) {
? ? ? ? UIButton*newBtn = [self.viewviewWithTag:20+i];
? ? ? ? if(newBtn.tag-20== view_x) {
? ? ? ? ? ? [newBtnsetTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
? ? ? ? }else{
? ? ? ? ? ? [newBtnsetTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
? ? ? ? }
? ? }
}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?分割線
亦可為視圖添加數(shù)據(jù),表格/網(wǎng)格、走定義標(biāo)表格/網(wǎng)格
1.添加自定義表格
-(void)creatTableView{
? ? for(inti =0; i <3; i++) {
? ? ? ? UITableView *tableview = [[UITableView alloc]initWithFrame:CGRectMake(S_Width * i, 0, S_Width, _bigScrollView.bounds.size.height) style:UITableViewStylePlain];
? ? ? ? tableview.tag=100+ i;
? ? ? ? tableview.delegate=self;
? ? ? ? tableview.dataSource=self;
? ? ? ? tableview.rowHeight=80;
? ? ? ? [tableviewregisterClass:[oneTableViewCell class] forCellReuseIdentifier:@"oneTableViewCell"];
? ? ? ? [tableviewregisterClass:[twoTableViewCell class] forCellReuseIdentifier:@"twoTableViewCell"];
? ? ? ? [tableviewregisterClass:[threeTableViewCell class] forCellReuseIdentifier:@"threeTableViewCell"];
? ? ? ? [_bigScrollViewaddSubview:tableview];
? ? }
}
2.表格協(xié)議方法
-(NSInteger)numberOfSectionsInTableView:(UITableView*)tableView{
? ? return 1;
}
-(NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section{
? ? return 10;
}
-(UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath{
? ? if(tableView.tag==100) {
? ? ? ? oneTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"oneTableViewCell"];
? ? ? ? returncell;
? ? }elseif(tableView.tag==101){
? ? ? ? twoTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"twoTableViewCell"];
? ? ? ? returncell;
? ? }else{
? ? ? ? threeTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"threeTableViewCell"];
? ? ? ? returncell;
? ? }
}
3.自定義cell
????3.1聲明cell中所需要的屬性:
? ??????@property(nonatomic,strong)UIImageView *pic;
????????@property(nonatomic,strong)UILabel *title;
????????@property(nonatomic,strong)UILabel *desTitle;
????????@property(nonatomic,strong)UILabel *timeTitle;
3.2懶加載進(jìn)行視圖布局
? -(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString*)reuseIdentifier{
? ? if(self= [superinitWithStyle:stylereuseIdentifier:reuseIdentifier]) {
? ? ? ? [self.contentViewaddSubview:self.pic];
? ? ? ? [self.contentViewaddSubview:self.title];
? ? ? ? [self.contentViewaddSubview:self.desTitle];
? ? ? ? [self.contentViewaddSubview:self.timeTitle];
? ? }
? ? return self;
}
-(UIImageView *)pic{
? ? if(!_pic) {
? ? ? ? _pic = [[UIImageView alloc]initWithFrame:CGRectMake(10, 5, 60, 60)];
? ? ? ? _pic.layer.cornerRadius = _pic.bounds.size.width / 2;
? ? ? ? _pic.layer.masksToBounds = YES;
? ? ? ? _pic.backgroundColor = [UIColor redColor];
? ? }
? ? return _pic;
}
-(UILabel*)title{
? ? if(!_title) {
? ? ? ? _title = [[UILabel alloc]initWithFrame:CGRectMake(80, 5, 200, 28)];
? ? ? ? _title.backgroundColor = [UIColor yellowColor];
? ? }
? ? return _title;
}
-(UILabel*)desTitle{
? ? if(!_desTitle) {
? ? ? ? _desTitle = [[UILabel alloc]initWithFrame:CGRectMake(80, 37, 200, 28)];
? ? ? ? _desTitle.backgroundColor = [UIColor purpleColor];
? ? }
? ? return _desTitle;
}
-(UILabel*)timeTitle{
? ? if (!_timeTitle) {
? ? ? ? _timeTitle = [[UILabel alloc]initWithFrame:CGRectMake(330, 25, 80, 30)];
? ? ? ? _timeTitle.backgroundColor = [UIColor blueColor];
? ? }
? ? return _timeTitle;
}
4.點(diǎn)擊表格亦可進(jìn)行下一級(jí)界面跳轉(zhuǎn)
??-(void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath{
? ? if(tableView.tag==100) {
? ? ? ? FourViewController *vc = [[FourViewController alloc]init];
? ? ? ? [self.navigationController pushViewController:vc animated:YES];
? ? }elseif(tableView.tag==101){
? ? ? ? FourViewController *vc = [[FourViewController alloc]init];
? ? ? ? [self.navigationController pushViewController:vc animated:YES];
? ? }else{
? ? ? ? FourViewController *vc = [[FourViewController alloc]init];
? ? ? ? [self.navigationController pushViewController:vc animated:YES];
? ? }
}