iOS小技能:去掉TabBar的顶部黑线,并添加发光的阴影

语言: CN / TW / HK

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情

前言

技术实现关键点:通过layer.shadowOpacityView.layer.shadowOffset实现

I 去掉TabBar的顶部黑线,添加发光的阴影

  • setupshadowColor ```objectivec

  • (void)setupshadowColor{

    UIView * tmpView = self; tmpView.layer.shadowColor = [UIColor blackColor].CGColor;//设置阴影的颜色 tmpView.layer.shadowOpacity = 0.08;//设置阴影的透明度 tmpView.layer.shadowOffset = CGSizeMake(kAdjustRatio(0), kAdjustRatio(-5));//设置阴影的偏移量,阴影的大小,x往右和y往下是正 tmpView.layer.shadowRadius = kAdjustRatio(5);//设置阴影的圆角,//阴影的扩散范围,相当于blur radius,也是shadow的渐变距离,从外围开始,往里渐变shadowRadius距离

//去掉TabBar的顶部黑线
[self setBackgroundImage:[UIImage createImageWithColor:[UIColor clearColor]]]; [self setShadowImage:[UIImage createImageWithColor:[UIColor clearColor]]];

}

```

II 给视图底部添加发光的阴影

2.1 效果

2.2 代码实现

  • QCTShadowView ```objectivec @implementation QCTShadowView

  • (instancetype)init { self = [super init]; if (self) {

    [self setupshadowColor];
    

    //

    } return self; }

  • (void)layoutSubviews{ [super layoutSubviews]; [self layoutIfNeeded]; [self.layer layoutIfNeeded];

    [self setupshadowColor];

}

  • (void) setupshadowColor{

    UIView * tmpView = self; tmpView.layer.shadowColor = [UIColor blackColor].CGColor;//设置阴影的颜色 tmpView.layer.shadowOpacity = 0.08;//设置阴影的透明度 tmpView.layer.shadowOffset = CGSizeMake(kAdjustRatio(0), kAdjustRatio(5));//设置阴影的偏移量,阴影的大小,x往右和y往下是正 tmpView.layer.shadowRadius = kAdjustRatio(5);//设置阴影的圆角,//阴影的扩散范围,相当于blur radius,也是shadow的渐变距离,从外围开始,往里渐变shadowRadius距离

}

```

III、其他小知识点

3.1 避免selectedViewController视图被TabBar挡住

  • 错误约束 ```objectivec [_vcView mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.offset(0); }];

- 正确约束objectivec [_vcView mas_makeConstraints:^(MASConstraintMaker make) { [tmp mas_makeConstraints:^(MASConstraintMaker make) {

        make.left.equalTo(weakSelf.view).offset(0);
        make.right.equalTo(weakSelf.view).offset(- 0);
        make.top.equalTo(weakSelf.view).offset(0);
        make.bottom.equalTo(weakSelf.view).offset(-weakSelf.tabBarController.tabBar.bounds.size.height);//避免视图被TabBar挡住

    }];


    }];

```

3.2 iOS 13适配深色模式【设置UITabBarItem上title颜色】

https://blog.csdn.net/z929118967/article/details/104487015

```objectivec // 适配iOS13导致的bug if (@available(iOS 13.0, *)) { // iOS 13以上 // self.tabBar.tintColor = ; self.tabBar.unselectedItemTintColor = ktabNorTextColor;

    self.tabBar.tintColor = ktabSelectedTextColor;

// self.tabBar.unselectedItemTintColor = ;

// UITabBarItem item = [UITabBarItem appearance]; // item.titlePositionAdjustment = UIOffse/tMake(0, -2); // [item setTitleTextAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12]} forState:UIControlStateNormal]; // [item setTitleTextAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12]} forState:UIControlStateSelected]; } else { // // iOS 13以下 // UITabBarItem item = [UITabBarItem appearance]; // item.titlePositionAdjustment = UIOffsetMake(0, -2); // [item setTitleTextAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12], NSForegroundColorAttributeName:RGB_HEX(0x999999)} forState:UIControlStateNormal]; // [item setTitleTextAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12], NSForegroundColorAttributeName:RGB_HEX(0xfb5400)} forState:UIControlStateSelected]; //设置文字样式 NSMutableDictionary textAttr = [NSMutableDictionary dictionary]; textAttr[NSForegroundColorAttributeName] = ktabNorTextColor; [childVC.tabBarItem setTitleTextAttributes:textAttr forState:UIControlStateNormal]; //选择状态的文字颜色样式 NSMutableDictionary selectedTextAttr = [NSMutableDictionary dictionary]; [selectedTextAttr setValue:ktabSelectedTextColor forKey:NSForegroundColorAttributeName];

    [childVC.tabBarItem setTitleTextAttributes:selectedTextAttr forState:UIControlStateSelected];



}

```

3.3 适配安全区域距离(safeAreaInsets)

https://blog.csdn.net/z929118967/article/details/126224009

应用场景1:自定义导航栏内容,导航栏显示公告和标题

应用场景2:自定义视图底部工具栏

应用场景3: 适配上拉加载更多控件 _vcView.tableView.mj_footer.ignoredScrollViewContentInsetBottom = k_ignoredScrollViewContentInsetBottom;

see also

iOS小技能:自定义导航栏,设置全局导航条外观。(iOS15适配) https://blog.csdn.net/z929118967/article/details/104276156