RouteViewController.m
RouteViewController是继承UIViewController。所以RouteviewController具有了UIViewController的特性，也能扩展属于自己的特性。
现在对上次那个空白的RouteViewController做文章了！
#import "RouteViewController.h"
#import "CommonHandler.h"
@interface RouteViewController ()
@end
@implementation RouteViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self initRouteView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
/*
#pragma mark - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/
- (void)initRouteView{
[self.view setFrame:[UIScreen mainScreen].bounds];
self.view.backgroundColor = [CommonHandler getColorWithRed:240 andGreen:240 andBlue:240 andAlpha:1];
[self showMessage];
}
- (void)showMessage{
UILabel *lb_center_message = [[UILabel alloc]init];
lb_center_message.backgroundColor = [CommonHandler getColorWithRGB:0xFFE4C4];
lb_center_message.textColor = [UIColor blackColor];
lb_center_message.font = [UIFont fontWithName:@"Arial" size:18.0];
lb_center_message.text = @"Welcome";
CGSize size_message = [lb_center_message.text sizeWithAttributes:@{NSFontAttributeName:lb_center_message.font}];
[lb_center_message setFrame:CGRectMake((self.view.frame.size.width - size_message.width) / 2, (self.view.frame.size.height - size_message.height) / 2, size_message.width, size_message.height)];
[self.view addSubview:lb_center_message];
}
@end
效果就是这样了：
上面有个居中显示，每次这样手输也太累了，我决定也把它打包到CommonHandler里面去！
我们在CommonHandler里面加上这个方法：
+(CGRect)getCenterRectWithSuperView:(UIView *)superView andContent:(NSString *)content andFont:(UIFont *)font{
CGSize size_content = [content sizeWithAttributes:@{NSFontAttributeName:font}];
CGRect rect_content = CGRectMake((superView.frame.size.width - size_content.width) / 2, (superView.frame.size.height - size_content.height) / 2, size_content.width, size_content.height);
return rect_content;
}
地铁线
下面开始绘制RouteViewController了。
先将数据打包一下，然后将起点和终点先弄出来：
RouteViewController.m
- (void)initData{
self.array_station = [NSArray arrayWithObjects:@"起点", @"第一站", @"第二站", @"第三站", @"终点", nil];
self.number_station = [NSNumber numberWithLong:[self.array_station count] - 2];
[self drawRoute];
}
- (void)drawRoute {
CGSize size_label = CGSizeMake(120, 40);
UILabel *lb_start = [[UILabel alloc]init];
lb_start.text = self.array_station[0];
lb_start.textColor = [UIColor whiteColor];
lb_start.font = [UIFont fontWithName:@"Arial" size:16.0];
lb_start.textAlignment = NSTextAlignmentCenter;
lb_start.layer.backgroundColor = [CommonHandler getColorWithRGB:0x18aaf2].CGColor;
lb_start.layer.cornerRadius = 20.0;
[lb_start.layer setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:(HEIGHT_NAVIGATIONBAR_STATUSBAR + GAP_DEFAULT) andSize:size_label]];
[self.view addSubview:lb_start];
UILabel *lb_end = [[UILabel alloc]init];
lb_end.text = [self.array_station lastObject];
lb_end.textColor = [UIColor whiteColor];
lb_end.font = [UIFont fontWithName:@"Arial" size:16.0];
lb_end.textAlignment = NSTextAlignmentCenter;
lb_end.layer.backgroundColor = [UIColor redColor].CGColor;
lb_end.layer.cornerRadius = 20.0;
[lb_end.layer setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:self.view.frame.size.height - GAP_DEFAULT - size_label.height andSize:size_label]];
[self.view addSubview:lb_end];
}
效果就出来了
Paste_Image.png
起点终点摆放还是很简单的。然后就是将中间的站点添加上去了，但是中间站点和两个固定的不同，数量是不定的，所以要做一个匹配。
RouteViewController.m
- (void)drawRoute{
CGSize size_label = CGSizeMake(120, 40);
UILabel *lb_start = [[UILabel alloc]init];
lb_start.text = self.array_station[0];
lb_start.textColor = [UIColor whiteColor];
lb_start.font = [UIFont fontWithName:@"Arial" size:16.0];
lb_start.textAlignment = NSTextAlignmentCenter;
lb_start.layer.backgroundColor = [CommonHandler getColorWithRGB:0x18aaf2].CGColor;
lb_start.layer.cornerRadius = 20.0;
[lb_start.layer setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:(HEIGHT_NAVIGATIONBAR_STATUSBAR + GAP_DEFAULT) andSize:size_label]];
[self.view addSubview:lb_start];
UILabel *lb_end = [[UILabel alloc]init];
lb_end.text = [self.array_station lastObject];
lb_end.textColor = [UIColor whiteColor];
lb_end.font = [UIFont fontWithName:@"Arial" size:16.0];
lb_end.textAlignment = NSTextAlignmentCenter;
lb_end.layer.backgroundColor = [UIColor redColor].CGColor;
lb_end.layer.cornerRadius = 20.0;
[lb_end.layer setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:self.view.frame.size.height - GAP_DEFAULT - size_label.height andSize:size_label]];
[self.view addSubview:lb_end];
CGFloat height_middle = (lb_end.frame.origin.y + (lb_end.frame.size.height / 2)) - (lb_start.frame.origin.y + (lb_start.frame.size.height / 2));
CGFloat gap_station = height_middle / ([self.number_station intValue] + 1);
for(int i = 0; i < [self.number_station intValue]; i++){
UILabel *lb_temp = [[UILabel alloc]init];
lb_temp.text = self.array_station[i + 1];
lb_temp.textAlignment = NSTextAlignmentCenter;
lb_temp.textColor = [UIColor whiteColor];
lb_temp.font = [UIFont fontWithName:@"Arial" size:15.0];
lb_temp.layer.backgroundColor = [UIColor orangeColor].CGColor;
lb_temp.layer.cornerRadius = 15.0;
[lb_temp.layer setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:((lb_start.frame.origin.y + (lb_start.frame.size.height / 2)) + (gap_station * (i + 1))) - (size_label.height / 2) andSize:size_label]];
[self.view addSubview:lb_temp];
}
}
有3个中途站的时候的效果。
Paste_Image.png
而有6个中途站的时候：
self.array_station = [NSArray arrayWithObjects:@"起点", @"第一站", @"第二站", @"第三站", @"第四站", @"第五站", @"第六站", @"终点", nil];
Paste_Image.png
上面写了，这个是地铁路线图嘛，只有站点，没有铁路，好像还是差点什么东西。我们来给中间加上铁路线好了！
- (void)drawRoute{
CGSize size_route = CGSizeMake(5, 5);
CGFloat height_route = gap_station - size_label.height;
CGFloat gap_route = height_route / size_route.height;
for(int i = 0; i < [self.number_station intValue] + 1; i++){
for(int j = 0; j < (int)gap_route; j++){
UILabel *lb_temp = [[UILabel alloc]init];
if(j % 2 == 0){
lb_temp.backgroundColor = [UIColor blackColor];
}else{
lb_temp.backgroundColor = [UIColor yellowColor];
}
[lb_temp setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:(lb_start.frame.origin.y + lb_start.frame.size.height + ((height_route + size_label.height) * i) + (size_route.height * j)) andSize:size_route]];
[self.view addSubview:lb_temp];
}
}
}
补上了这段之后，铁路线就出来啦！
Paste_Image.png
最后
恩，的确是不太美观。追求完美的童鞋可以再去做做美化！
这篇就到这里了。下篇就要用下手势事件了！