iOS开发-仿大众点评iPad侧边导航栏
昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图:
对比昨天主要做了两个修改,一个是图片和文字的显示位置,另外一个就是关于底部的定位和设置的位置在横竖屏时显示的问题,侧边栏的区域是是自己控制的,需要注意一下横竖屏的时候设置一下autoresizingMask,底部图标定位的时候也是一样设置。
导航栏上每个按钮提取出了一个父类GPDockItem,头文件中的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// // GPDockItem.h // GrouponProject //博客园FlyElephant:http://www.cnblogs.com/xiaofeixiang // Created by keso on 15/3/11. // Copyright (c) 2015年 keso. All rights reserved. // #import <UIKit/UIKit.h> @interface GPDockItem : UIButton
-( void )imageSetting:( NSString *)backgroundImage selectedImage:( NSString *)selectedImage;
@property ( nonatomic ,strong) NSString *title;
//背景图片 @property ( nonatomic ,strong) NSString *backgroundImage;
//选中图片 @property ( nonatomic ,strong) NSString *selectedImage;
@end |
相对于之前的代码,主要是添加了设置背景图片和设置选中图片的混合方法,定义了一个Title属性,之后的可以设置文字和图片的位置,重写两个方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//设置图片区域 -(CGRect)imageRectForContentRect:(CGRect)contentRect{ CGFloat width=contentRect.size.width;
CGFloat height= contentRect.size.height * 0.7;
return CGRectMake(0, 10, width, height);
} //设置文字区域 -(CGRect)titleRectForContentRect:(CGRect)contentRect{ CGFloat width=contentRect.size.width;
CGFloat height= contentRect.size.height * 0.3;
CGFloat position=contentRect.size.height*0.7;
return CGRectMake(0, position, width, height);
} |
设置背景图片和选中图片:
1
2
3
4
5
|
-( void )imageSetting:( NSString *)backgroundImage selectedImage:( NSString *)selectedImage{
self .backgroundImage=backgroundImage;
self .selectedImage=selectedImage;
} |
设置显示文字和图片在区域内的位置:
1
2
3
4
5
6
7
8
9
10
11
|
-( void )setTitle:( NSString *)title{
[ self setTitle:title forState:UIControlStateNormal];
self .titleLabel.textAlignment= NSTextAlignmentCenter ;
self .titleLabel.font = [UIFont systemFontOfSize:15];
//正常状态下是灰色
[ self setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
//不可点击的时候切换文字颜色
[ self setTitleColor:[UIColor orangeColor] forState:UIControlStateDisabled];
//设置图片属性
self .imageView.contentMode = UIViewContentModeCenter;
} |
GPDockItem.m中的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
// // GPDockItem.m // GrouponProject //博客园FlyElephant:http://www.cnblogs.com/xiaofeixiang // Created by keso on 15/3/11. // Copyright (c) 2015年 keso. All rights reserved. // #import "GPDockItem.h" @implementation GPDockItem
/* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { // Drawing code
} */ -(instancetype)initWithFrame:(CGRect)frame{ self =[ super initWithFrame:frame];
// if (self) { //// UIImageView *splitLine = [[UIImageView alloc] init]; //// splitLine.frame = CGRectMake(0, 0, GPDockItemWidth, 2); //// splitLine.image = [UIImage imageNamed:@"separator_tabbar_item.png"]; //// [self addSubview:splitLine]; // // } return self ;
} -( void )setTitle:( NSString *)title{
[ self setTitle:title forState:UIControlStateNormal];
self .titleLabel.textAlignment= NSTextAlignmentCenter ;
self .titleLabel.font = [UIFont systemFontOfSize:15];
//正常状态下是灰色
[ self setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
//不可点击的时候切换文字颜色
[ self setTitleColor:[UIColor orangeColor] forState:UIControlStateDisabled];
//设置图片属性
self .imageView.contentMode = UIViewContentModeCenter;
} -( void )imageSetting:( NSString *)backgroundImage selectedImage:( NSString *)selectedImage{
self .backgroundImage=backgroundImage;
self .selectedImage=selectedImage;
} //设置背景图片 -( void )setBackgroundImage:( NSString *)backgroundImage{
_backgroundImage=backgroundImage;
[ self setImage:[UIImage imageNamed:backgroundImage] forState:UIControlStateNormal];
} //设置选中图片 -( void )setSelectedImage:( NSString *)selectedImage{
_selectedImage=selectedImage;
[ self setImage:[UIImage imageNamed:selectedImage] forState:UIControlStateDisabled];
} //设置图片区域 -(CGRect)imageRectForContentRect:(CGRect)contentRect{ CGFloat width=contentRect.size.width;
CGFloat height= contentRect.size.height * 0.7;
return CGRectMake(0, 10, width, height);
} //设置文字区域 -(CGRect)titleRectForContentRect:(CGRect)contentRect{ CGFloat width=contentRect.size.width;
CGFloat height= contentRect.size.height * 0.3;
CGFloat position=contentRect.size.height*0.7;
return CGRectMake(0, position, width, height);
} -( void )setFrame:(CGRect)frame{
//固定Item宽高
frame.size=CGSizeMake(GPDockItemWidth, GPDockItemHeight);
[ super setFrame:frame];
} @end |
继承自GPDockItem的GPBottomItem,只需要设置横竖屏自动伸缩属性即可:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// // GPBottomItem.m // GrouponProject // FlyElephant--http://www.cnblogs.com/xiaofeixiang // Created by keso on 15/3/13. // Copyright (c) 2015年 keso. All rights reserved. // #import "GPBottomItem.h" @implementation GPBottomItem
/* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { // Drawing code
} */ -(instancetype)initWithFrame:(CGRect)frame{ self =[ super initWithFrame:frame];
if ( self ) {
// 自动伸缩
self .autoresizingMask=UIViewAutoresizingFlexibleTopMargin;
}
return self ;
} @end |
GPDock.h中的定位:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
-( void )addLocation{
GPBottomItem *tabItem=[[GPBottomItem alloc]init];
[tabItem imageSetting:@ "Toolbar_switchcity.png" selectedImage:@ "Toolbar_switchcity_selected.png" ];
CGFloat y = self .frame.size.height - GPDockItemHeight*2-20;
//设置位置
tabItem.frame = CGRectMake(0, y, 0, 0);
[tabItem setTitle:@ "北京" ];
//设置选中触摸选中事件
[tabItem addTarget: self action: @selector (tabItemTouchEvent:) forControlEvents:UIControlEventTouchDown];
tabItem.tag =4;
[ self addSubview:tabItem];
} |
GPDock.h中的设置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
-( void )addSetting{
GPBottomItem *tabItem=[[GPBottomItem alloc]init];
[tabItem imageSetting:@ "Toolbar_setting.png" selectedImage:@ "Toolbar_setting_selected.png" ];
CGFloat y = self .frame.size.height - GPDockItemHeight-10;
//设置位置
tabItem.frame = CGRectMake(0, y, 0, 0);
[tabItem setTitle:@ "设置" ];
//设置选中触摸选中事件
[tabItem addTarget: self action: @selector (tabItemTouchEvent:) forControlEvents:UIControlEventTouchDown];
tabItem.tag =5;
[ self addSubview:tabItem];
} |
两者有相同之处,分开合并都行,具体看将来要实现的业务逻辑,将其添加到GPDock中:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
-(instancetype)initWithFrame:(CGRect)frame{ self =[ super initWithFrame:frame];
if ( self ) {
//自动伸缩高度可伸缩,右边距可以伸缩
self .autoresizingMask=UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleRightMargin;
//设置背景图片
self .backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@ "Toolbar_bg_tabbar.png" ]];
//添加选项卡
[ self addTabItems];
//添加设置
[ self addLocation];
//添加设置
[ self addSetting];
}
return self ;
} |
最终实现效果如下:
本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/4334242.html,如需转载请自行联系原作者