1.先做准备工作
1.1 对屏幕宽高做一个宏定义方便引用（该屏幕宽高是以8P模拟机为参照）
#define S_Width [UIScreen mainScreen].bounds.size.width
#define S_Height [UIScreen mainScreen].bounds.size.height
1.2 将属性设为全局属性
@property(nonatomic,strong)UIView *lineView;//随button滑动的下划线
@property(nonatomic,strong)UIScrollView *bigScrollView;//与button关联的视图
1.3签署滚动视图的代理（后面用到的）：UIScrollViewDelegate
2.对顶部按钮进行布局
2.1创建按钮
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创建按钮下划线
_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与视图关联(正向关联)
-(void)click:(UIButton*)btn{
//button的标题
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滚动变化位置
_lineView.frame=CGRectMake((btn.tag-20) *S_Width/3,64+50,S_Width/3.0,2);
//滚动视图随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关联（反向关联）
-(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];
}
}
}
分割线
亦可为视图添加数据，表格/网格、走定义标表格/网格
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.表格协议方法
-(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懒加载进行视图布局
-(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.点击表格亦可进行下一级界面跳转
-(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];
}
}
网友评论