效果.gif
效果如上，仅仅是要求中间的tabbar上移，并且上部分是有点击反应的。
创建UITabbarViewController
1、我们创建自己的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 的方式，用这个类型的实例变量替换系统的tabbar。接下来的重点是，我们点击这个替换之后按钮的时候是没有用的，于是我们需要在上面自定义按钮的时候添加：
//超出区域外点击无效
-(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];
//判断点击的点是否在按钮的区域内
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的实例变量替换系统的
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赋值给系统的tabbar
[self setValue:self.yLeCenterTab forKeyPath:@"tabBar"];
self.selectItem = 0;
self.delegate = self;
[self initWithTabbar];
}
接下来我们需要实现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;
}
然后是我们自己实现的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"];
}
hitTest: withEvent: 调用过程
iOS系统事件的传递：
①.当手指触摸屏幕后会产生 '触摸事件', 然后将事件加入UIApplication的管理事件队列中
②.UIApplication会取出事件队列中 '最前面的事件' 分发下去，事先分发给应用程序的主窗口中 'keyWindow'
③.主窗口接收到事件后，分发给自己的子控件，寻找最适合的接收事件的控件
④.找到 '最适合' 接收的控件后，调用控件的touchesBegin/touchesMoved/touchesEnded方法
其中的第三步：
key window对象首先会使用hitTest:withEvent:方法寻找此次Touch操作初始点所在的视图(View),即需要将触摸事件传递给其处理的视图,称之为hit-test view。
window对象会发生一下操作
1、首先在view hierarchy的顶级view上调用hitTest:withEvent:，此方法会在视图层级结构中的每个视图上调用pointInside:withEvent:
2、[pointInside:withEvent:]，查询触摸点是否在自己身上，当遍历子控件时，传入的坐标进行转换，将父视图上的坐标点转换成要传递子视图上的坐标点。
如果pointInside:withEvent:返回YES,则继续逐级调用，直到找到touch操作发生的位置，这个视图也就是hit-test view，如果返回NO，hit-test 方法返回nil。
总结：
hitTest的底层实现：当控件接收到触摸事件时，不管能不能处理事件，都会调用hit-test方法，方法的实现过程是：
1：先看自己是否能接受触摸事件
2：再看触摸点是否在自己身上
3：从后往前遍历所有子控件（从subviews数组的末尾向前遍历,直到有子视图返回非空对象或者全部子视图遍历完毕），拿到子控件后，再次重复1，2步骤，要把父控件上的坐标点转换为子控件坐标系下的点，再次执行hit-test方法
4:第一次有子视图返回非空对象，hit-test方法返回此对象，处理结束
5:假如所有子控件都返回非，则hit-test返回自身
控件不接收触摸事件的三种情况：
1> 不接收用户交互 userInteractionEnabled=NO
2> 隐藏 hidden = YES
3> 透明 alpha = 0.0 ~ 0.01
出现此三种情况的时候[hitTest:withEvent:]会忽略，不会去查找子控件。
假如子视图的部分超出父视图的bound区域，父视图没有裁剪（clipsToBounds=NO），超出父视图的部分也会显示，那么超出父视图之外区域的触摸操作不会被响应，因为父视图的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;
}
网友评论