ios Tabbar 中間凸出簡單有效的實現(xiàn)和hitTest:withEvent:方法

效果.gif

效果如上，僅僅是要求中間的tabbar上移，并且上部分是有點擊反應的。

創(chuàng)建UITabbarViewController

1、我們創(chuàng)建自己的YLeBaseViewController 集成 UITabBarController
并將其設置為整個window的rootViewController.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    YLeBaseViewController *yLeBaseVC = [[YLeBaseViewController alloc] init];
    self.window.rootViewController = yLeBaseVC;
    [self.window makeKeyAndVisible];
    return YES;
}

2、我們設置tabbar的樣式，以及每個tabbar按鈕對應的頁面

-(void)initWithTabbar{
    [UITabBar appearance].translucent = YES;//不透明
    [[UITabBar appearance] setBackgroundColor:[UIColor whiteColor]];
    
    YLeBaseNavigationController *navClub = (YLeBaseNavigationController *)[[YLeBaseNavigationController alloc] initWithRootViewController:[[UIViewController alloc] init]];
    YLeBaseNavigationController *navVideo = [(YLeBaseNavigationController *)[YLeBaseNavigationController alloc] initWithRootViewController:[[UIViewController alloc] init]];
    YLeBaseNavigationController *navHome = [(YLeBaseNavigationController *)[YLeBaseNavigationController alloc] initWithRootViewController:[[UIViewController alloc] init]];
    YLeBaseNavigationController *navLive = [(YLeBaseNavigationController *)[YLeBaseNavigationController alloc] initWithRootViewController:[[UIViewController alloc] init]];
    YLeBaseNavigationController *navMe = [(YLeBaseNavigationController *)[YLeBaseNavigationController alloc] initWithRootViewController:[[UIViewController alloc] init]];
    
    [self addChildVC:navClub title:@"" image:@"club_n" selectedImage:@"club"];//Club
    [self addChildVC:navVideo title:@"" image:@"video_n" selectedImage:@"video"];//Live
//只是占位
    [self addChildVC:navHome title:@"Home" image:@"" selectedImage:@""];
    [self addChildVC:navLive title:@"" image:@"live_n" selectedImage:@"live"];//Video
    [self addChildVC:navMe title:@"" image:@"me_n" selectedImage:@"me"];//Me
    
}

-(void)addChildVC:(UIViewController *)childVC title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage{
    childVC.tabBarItem.title = title;
    childVC.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 5, -5, -5);
    childVC.tabBarItem.image = [[UIImage imageNamed:image] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    childVC.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    [childVC.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]} forState:UIControlStateNormal];
    [childVC.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor grayColor]} forState:UIControlStateSelected];
    [self addChildViewController:childVC];
}

我們此時有5個按鈕，且中間一個是沒有圖片的。

接下來的重點：

1、中間的tabbar Button和其他的是不相同的。
我們寫一個自己的tabbar 繼承UITabBar，然后我們設置這個的UI

@interface YLeCenterTabbar : UITabBar

@property(nonatomic, strong) UIButton *centerBtn;

@end

-(instancetype)init{
    if (self = [super init]) {
        [self setViews];
    }
    return self;
}

-(void)setViews{
    self.centerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    UIImage *normalImg = [UIImage imageNamed:@"home"];
    
    self.centerBtn.frame = CGRectMake(0, 0, normalImg.size.width, normalImg.size.height);
    [self.centerBtn setImage:normalImg forState:UIControlStateNormal];
    //btn center的位置位于tabbar的上邊沿
    self.centerBtn.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - normalImg.size.width)/2.0, -normalImg.size.height/2.0, normalImg.size.width, normalImg.size.height);
    
    [self addSubview:self.centerBtn];
}

我們設置了圖片，以及其中button的frame，之后我們通過KVC 的方式，用這個類型的實例變量替換系統(tǒng)的tabbar。接下來的重點是，我們點擊這個替換之后按鈕的時候是沒有用的，于是我們需要在上面自定義按鈕的時候添加：

//超出區(qū)域外點擊無效
-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
//tabbarVC 是否隱藏，隱藏了就不需要考慮點擊了
    if (self.hidden) {
        return [super hitTest:point withEvent:event];
    }else{
        //將centerBtn上的點轉化成父View上的點
        CGPoint touch = [self.centerBtn convertPoint:point fromView:self];
        //判斷點擊的點是否在按鈕的區(qū)域內
        if (CGRectContainsPoint(self.centerBtn.bounds, touch)) {
            return _centerBtn;
        }else{
            return [super hitTest:point withEvent:event];
        }  
    }
}

此方法- (nullable UIView *)hitTest:(CGPoint)point withEvent:(nullable UIEvent *)event;我們文章后面再說。

2、我們將自定義的tabbar的實例變量替換系統(tǒng)的

YLeBaseViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.yLeCenterTab = [[YLeCenterTabbar alloc] init];
    self.yLeCenterTab.tintColor = [UIColor redColor];
    
    [self.yLeCenterTab.centerBtn addTarget:self action:@selector(centerBtnClick:) forControlEvents:UIControlEventTouchUpInside];
    //利用kvc 將自己的tabbar賦值給系統(tǒng)的tabbar
    [self setValue:self.yLeCenterTab forKeyPath:@"tabBar"];
    self.selectItem = 0;
    self.delegate = self;
    
    [self initWithTabbar];
}

接下來我們需要實現(xiàn)UITabBarControllerDelegate,tabbar被選中的代理方法。

-(void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{
    if(tabBarController.selectedIndex == 2){
        if (self.selectItem != 2) {
            [self rotationAnimation];
        }
    }else{
        [self.yLeCenterTab.centerBtn.layer removeAnimationForKey:@"shark"];
//        [self.yLeCenterTab.centerBtn.layer removeAllAnimations];
    }
    self.selectItem = tabBarController.selectedIndex;
}

然后是我們自己實現(xiàn)的button的click事件。

-(void)centerBtnClick:(id *)sender{
    NSLog(@"center btn click");
    self.selectedIndex = 2;
    if (self.selectItem != 2) {
        [self rotationAnimation];
    }
    self.selectItem = 2;
}

最后的抖動動畫

//抖動
-(void)rotationAnimation{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"transform.rotation";
//    animation.repeatCount = 20;
    animation.repeatDuration = 60.0;
    animation.values = @[@(-M_PI_4 * 0.3),@(M_PI_4 * 0.3),@(-M_PI_4 * 0.3)];
    [self.yLeCenterTab.centerBtn.layer addAnimation:animation forKey:@"shark"];
}

github Demo

hitTest: withEvent: 調用過程

iOS系統(tǒng)事件的傳遞：

①.當手指觸摸屏幕后會產生 '觸摸事件', 然后將事件加入UIApplication的管理事件隊列中
②.UIApplication會取出事件隊列中 '最前面的事件' 分發(fā)下去，事先分發(fā)給應用程序的主窗口中 'keyWindow'
③.主窗口接收到事件后，分發(fā)給自己的子控件，尋找最適合的接收事件的控件
④.找到 '最適合' 接收的控件后，調用控件的touchesBegin/touchesMoved/touchesEnded方法
其中的第三步：
key window對象首先會使用hitTest:withEvent:方法尋找此次Touch操作初始點所在的視圖(View),即需要將觸摸事件傳遞給其處理的視圖,稱之為hit-test view。

window對象會發(fā)生一下操作
1、首先在view hierarchy的頂級view上調用hitTest:withEvent:，此方法會在視圖層級結構中的每個視圖上調用pointInside:withEvent:
2、[pointInside:withEvent:]，查詢觸摸點是否在自己身上，當遍歷子控件時，傳入的坐標進行轉換，將父視圖上的坐標點轉換成要傳遞子視圖上的坐標點。
如果pointInside:withEvent:返回YES,則繼續(xù)逐級調用，直到找到touch操作發(fā)生的位置，這個視圖也就是hit-test view，如果返回NO，hit-test 方法返回nil。
總結：

hitTest的底層實現(xiàn)：當控件接收到觸摸事件時，不管能不能處理事件，都會調用hit-test方法，方法的實現(xiàn)過程是：
1：先看自己是否能接受觸摸事件
2：再看觸摸點是否在自己身上
3：從后往前遍歷所有子控件（從subviews數(shù)組的末尾向前遍歷,直到有子視圖返回非空對象或者全部子視圖遍歷完畢），拿到子控件后，再次重復1，2步驟，要把父控件上的坐標點轉換為子控件坐標系下的點，再次執(zhí)行hit-test方法
4:第一次有子視圖返回非空對象，hit-test方法返回此對象，處理結束
5:假如所有子控件都返回非，則hit-test返回自身

控件不接收觸摸事件的三種情況：
1> 不接收用戶交互 userInteractionEnabled=NO
2> 隱藏 hidden = YES
3> 透明 alpha = 0.0 ~ 0.01
出現(xiàn)此三種情況的時候[hitTest:withEvent:]會忽略，不會去查找子控件。
假如子視圖的部分超出父視圖的bound區(qū)域，父視圖沒有裁剪（clipsToBounds=NO），超出父視圖的部分也會顯示，那么超出父視圖之外區(qū)域的觸摸操作不會被響應，因為父視圖的pointInside:withEvent:返回NO，這樣就不會遍歷下面的子視圖，此時如果需要相應就需要我們上面的操作。

//作用:去尋找最適合的View
//什么時候調用:當一個事件傳遞給當前View,就會調用.
//返回值:返回的是誰,誰就是最適合的View(就會調用最適合的View的touch方法)
-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
   
    //1.判斷自己能否接收事件
    if(self.userInteractionEnabled == NO || self.hidden == YES || self.alpha <= 0.01) {
        return nil;
    }
    //2.判斷當前點在不在當前View.
    if (![self pointInside:point withEvent:event]) {
        return nil;
    }
    //3.從后往前遍歷自己的子控件.讓子控件重復前兩步操作,(把事件傳遞給,讓子控件調用hitTest)
    int count = (int)self.subviews.count;
    for (int i = count - 1; i >= 0; i--) {
        //取出每一個子控件
        UIView *chileV =  self.subviews[i];
        //把當前的點轉換成子控件坐標系上的點.
        CGPoint childP = [self convertPoint:point toView:chileV];
        UIView *fitView = [chileV hitTest:childP withEvent:event];
        //判斷有沒有找到最適合的View
        if(fitView){
            return fitView;
        }
    }
    
    //4.沒有找到比它自己更適合的View.那么它自己就是最適合的View
    return self;
    
}

//作用:判斷當前點在不在它調用View,(誰調用pointInside,這個View就是誰)
//什么時候調用:它是在hitTest方法當中調用的.
//注意:point點必須得要跟它方法調用者在同一個坐標系里面
-(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
    NSLog(@"%s",__func__);
    return YES;
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 好奇觸摸事件是如何從屏幕轉移到APP內的？困惑于Cell怎么突然不能點擊了？糾結于如何實現(xiàn)這個奇葩響應需求？亦或是...
    Lotheve閱讀 59,425評論 51贊 604
  • 在iOS開發(fā)中經(jīng)常會涉及到觸摸事件。本想自己總結一下，但是遇到了這篇文章，感覺總結的已經(jīng)很到位，特此轉載。作者：L...
    WQ_UESTC閱讀 6,236評論 4贊 26
  • 重點參考鏈接： View Programming Guide for iOS https://developer....
    Kevin_Junbaozi閱讀 4,700評論 0贊 15
  • 觸摸事件的生命周期 當我們手指觸碰屏幕的那一刻，一個觸摸事件便產生了。經(jīng)過進程間通信，觸摸事件被傳遞到合適的應用之...
    Gintok閱讀 1,516評論 0贊 3
  • 論學習的儀式感 2018.4.21 周波 一、健腦操給我的啟示 “大道至簡”學習中，越簡單的東西...
    小木匠916閱讀 999評論 0贊 0

友情鏈接更多精彩內容