前言
上篇是總算把地鐵線給畫出來了篓冲，雖然沒什么美感。嘛瘪弓，那些可以慢慢改的嘛垫蛆。
這篇就來試著給地鐵線加些炫酷到不行的功能（其實(shí)就是點(diǎn)擊動(dòng)畫）。
<br />
iOS的事件
在iOS里面腺怯，動(dòng)作事件有三類：
1.屏幕觸摸事件（點(diǎn)擊袱饭、長(zhǎng)按、拖動(dòng)等）
2.加速器動(dòng)作事件（搖一搖呛占、橫向放置等）
3.遠(yuǎn)程控制事件（耳機(jī)按鈕虑乖、外置手柄等）
所有繼承了UIResponder的類都可以對(duì)事件進(jìn)行處理。
這里只對(duì)屏幕觸摸事件做一個(gè)實(shí)際應(yīng)用測(cè)試晾虑，下面就復(fù)制一段對(duì)應(yīng)事件方法：
Paste_Image.png
<br />
加上標(biāo)簽
因?yàn)榇蛩銓?duì)站點(diǎn)添加觸摸動(dòng)作疹味，但是站點(diǎn)都是局部變量，也就是初始化完了之后帜篇，我就丟失了聯(lián)系他們的辦法了糙捺。那么，此時(shí)我們要做的坠狡，就是先給每個(gè)局部變量加上一個(gè)標(biāo)記继找，然后再添加一個(gè)手勢(shì)識(shí)別，這樣我們就可以通過標(biāo)記來響應(yīng)觸摸事件逃沿，來找到對(duì)應(yīng)的站點(diǎn)了婴渡。
首先我要先加兩個(gè)變量，這是為后面做動(dòng)畫的時(shí)候準(zhǔn)備的：
@property (nonatomic, strong) NSMutableArray *array_label_station;
@property (nonatomic, strong) UIView *view_background_route;
然后先初始化一個(gè)單擊手勢(shì)凯亮，并將手勢(shì)添加到站點(diǎn)上面边臼，再設(shè)置一個(gè)標(biāo)記：
UITapGestureRecognizer *gesture_tap_temp1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTapAction:)];
lb_start.tag = 90000;
lb_start.userInteractionEnabled = YES;
[lb_start addGestureRecognizer:gesture_tap_temp1];
大概效果最后就是：
RouteViewGesture.gif
很渣的動(dòng)畫
手勢(shì)動(dòng)作已經(jīng)做好了，是時(shí)候加一下很酷(zha)的動(dòng)畫效果了假消。
其實(shí)在AlertMessage里面就有用到動(dòng)畫柠并，在這里也是在AlertMessage的動(dòng)畫基礎(chǔ)上做一個(gè)改動(dòng)而已。
首先富拗，要先加一個(gè)變量臼予，是用來判斷動(dòng)畫是否已經(jīng)執(zhí)行了的。
@property (nonatomic, assign) BOOL isStationsPullAside;
首先對(duì)剛才的那個(gè)手勢(shì)方法做個(gè)改動(dòng)啃沪，那個(gè)showAlertMessage就扔掉了吧粘拾，沒有用了。我們換一個(gè)炫酷很多的：
- (void)singleTapAction:(UITapGestureRecognizer *)sender{
[self pullStationsAsideWithTag:sender.self.view.tag];
}
- (void)pullStationsAsideWithTag:(long)tag{
float alpha_route = 0;
float duration_route = 0.2f;
if(self.isStationsPullAside){
alpha_route = 1;
duration_route = 0.4f;
}
else{
alpha_route = 0;
duration_route = 0.2f;
}
[UIView animateWithDuration:duration_route animations:^{
[self.view_background_route setAlpha:alpha_route];
}];
for(UILabel *lb_temp in self.array_label_station){
if(self.isStationsPullAside){
[UIView animateWithDuration:0.25f animations:^{
[lb_temp setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:lb_temp.frame.origin.y andSize:lb_temp.frame.size]];
}];
}else{
[UIView animateWithDuration:0.25f animations:^{
[lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 4) * 3), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
}completion:^(BOOL finished){
if(lb_temp.tag == tag){
[UIView animateWithDuration:0.15f animations:^{
[lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 6) * 2), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
}];
}
}];
}
}
self.isStationsPullAside = !self.isStationsPullAside;
}
這就完成了创千，先來看看效果缰雇，不要抱太多期望入偷，渣到我自己都在偷笑！
RouteViewAnimate.gif
動(dòng)畫就是這樣械哟，在動(dòng)畫執(zhí)行完之后疏之，右邊有好大一片空白，我們當(dāng)然是要充分利用這片空白的暇咆！我們就在上面添加上附近景點(diǎn)啊锋爪、公交路線啊、簡(jiǎn)介啊糯崎、圖片啊什么鬼的几缭。
其實(shí)就是添加多一個(gè)UIView河泳，在點(diǎn)擊之后先設(shè)置Alpha為0沃呢，然后用動(dòng)畫將Alpha改為1。這樣就搞定了：
- (void)pullStationsAsideWithTag:(long)tag{
CGSize size_dialog = CGSizeMake(200, self.view.frame.size.height - HEIGHT_NAVIGATIONBAR_STATUSBAR - (GAP_DEFAULT * 4));
float alpha_route = 0;
float duration_route = 0.2f;
if(self.isStationsPullAside){
alpha_route = 1;
duration_route = 0.4f;
}
else{
self.view_dialog = [[UIView alloc]initWithFrame:CGRectMake(self.view.bounds.size.width / 2 - 55, HEIGHT_NAVIGATIONBAR_STATUSBAR + (GAP_DEFAULT * 2), size_dialog.width, size_dialog.height)];
self.view_dialog.backgroundColor = [CommonHandler getColorWithRGB:0xf7ef96];
[self.view_dialog setAlpha:0];
[self.view addSubview:self.view_dialog];
alpha_route = 0;
duration_route = 0.2f;
}
[UIView animateWithDuration:duration_route animations:^{
[self.view_background_route setAlpha:alpha_route];
}];
for(UILabel *lb_temp in self.array_label_station){
if(self.isStationsPullAside){
[UIView animateWithDuration:0.25f animations:^{
[self.view_dialog setAlpha:0];
[lb_temp setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:lb_temp.frame.origin.y andSize:lb_temp.frame.size]];
}completion:^(BOOL finished){
[self.view_dialog removeFromSuperview];
}];
}else{
[UIView animateWithDuration:0.25f animations:^{
[lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 4) * 3), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
}completion:^(BOOL finished){
if(lb_temp.tag == tag){
[UIView animateWithDuration:0.15f animations:^{
[lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 7) * 2), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
[self.view_dialog setAlpha:1];
}];
}
}];
}
}
self.isStationsPullAside = !self.isStationsPullAside;
}
最后貼上效果拆挥，至于怎么添加內(nèi)容嘛薄霜，有興趣的可以自己去嘗試！
RouteViewPopover.gif
整合代碼
然后放上今天的所有代碼纸兔！
#import "RouteViewController.h"
#import "CommonHandler.h"
#import "AlertMessage.h"
#define GAP_DEFAULT 10
@interface RouteViewController ()
@property (nonatomic, strong) NSNumber *number_station;
@property (nonatomic, strong) NSArray *array_station;
@property (nonatomic, strong) NSMutableArray *array_label_station;
@property (nonatomic, strong) UIView *view_background_route;
@property (nonatomic, strong) UIView *view_dialog;
@property (nonatomic, assign) BOOL isStationsPullAside;
@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.backgroundColor = [CommonHandler getColorWithRed:235 andGreen:235 andBlue:235 andAlpha:1];
[self initData];
}
- (void)initData{
self.array_station = [NSArray arrayWithObjects:@"起點(diǎn)", @"第一站", @"第二站", @"第三站", @"第四站", @"終點(diǎn)", nil];
self.number_station = [NSNumber numberWithLong:[self.array_station count] - 2];
self.array_label_station = [[NSMutableArray alloc]init];
self.isStationsPullAside = NO;
[self drawRoute];
}
- (void)drawRoute{
self.view_background_route = [[UIView alloc]initWithFrame:self.view.bounds];
self.view_background_route.backgroundColor = [UIColor clearColor];
[self.view addSubview:self.view_background_route];
CGSize size_label = CGSizeMake(120, 40);
UITapGestureRecognizer *gesture_tap_temp1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTapAction:)];
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]];
lb_start.tag = 90000;
lb_start.userInteractionEnabled = YES;
[lb_start addGestureRecognizer:gesture_tap_temp1];
[self.view addSubview:lb_start];
[self.array_label_station addObject:lb_start];
UITapGestureRecognizer *gesture_tap_temp2 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTapAction:)];
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]];
lb_end.tag = 90000 + [self.array_station count] - 1;
lb_end.userInteractionEnabled = YES;
[lb_end addGestureRecognizer:gesture_tap_temp2];
[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];
lb_temp.userInteractionEnabled = YES;
UITapGestureRecognizer *gesture_tap_temp = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTapAction:)];
lb_temp.tag = 90000 + i + 1;
[lb_temp addGestureRecognizer:gesture_tap_temp];
[self.array_label_station addObject:lb_temp];
}
[self.array_label_station addObject:lb_end];
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_background_route addSubview:lb_temp];
}
}
}
- (void)singleTapAction:(UITapGestureRecognizer *)sender{
[self pullStationsAsideWithTag:sender.self.view.tag];
}
- (void)pullStationsAsideWithTag:(long)tag{
CGSize size_dialog = CGSizeMake(200, self.view.frame.size.height - HEIGHT_NAVIGATIONBAR_STATUSBAR - (GAP_DEFAULT * 4));
float alpha_route = 0;
float duration_route = 0.2f;
if(self.isStationsPullAside){
alpha_route = 1;
duration_route = 0.5f;
}
else{
self.view_dialog = [[UIView alloc]initWithFrame:CGRectMake(self.view.bounds.size.width / 2 - 55, HEIGHT_NAVIGATIONBAR_STATUSBAR + (GAP_DEFAULT * 2), size_dialog.width, size_dialog.height)];
self.view_dialog.backgroundColor = [CommonHandler getColorWithRGB:0xf7ef96];
[self.view_dialog setAlpha:0];
[self.view addSubview:self.view_dialog];
alpha_route = 0;
duration_route = 0.2f;
}
[UIView animateWithDuration:duration_route animations:^{
[self.view_background_route setAlpha:alpha_route];
}];
for(UILabel *lb_temp in self.array_label_station){
if(self.isStationsPullAside){
[UIView animateWithDuration:0.25f animations:^{
[self.view_dialog setAlpha:0];
[lb_temp setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:lb_temp.frame.origin.y andSize:lb_temp.frame.size]];
}completion:^(BOOL finished){
[self.view_dialog removeFromSuperview];
}];
}else{
[UIView animateWithDuration:0.25f animations:^{
[lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 4) * 3), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
}completion:^(BOOL finished){
if(lb_temp.tag == tag){
[UIView animateWithDuration:0.15f animations:^{
[lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 7) * 2), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
[self.view_dialog setAlpha:1];
}];
}
}];
}
}
self.isStationsPullAside = !self.isStationsPullAside;
}
@end
