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

8,951 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」     ,赢取创作大礼包,挑战创作激励金

前言

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

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

  • setupshadowColor


- (void)setupshadowColor{
    
    UIView * tmpView = self;
    tmpView.layer.shadowColor = [UIColor blackColor].CGColor;//设置阴影的颜色
    tmpView.layer.shadowOpacity = 0.08;//设置阴影的透明度
    tmpView.layer.shadowOffset = CGSizeMake(kAdjustRatio(0), kAdjustRatio(0));//设置阴影的偏移量,阴影的大小,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
@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挡住

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

  • 正确约束
        [_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颜色】

blog.csdn.net/z929118967/…

    // 适配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];

        
        
    }
    


see also

更多资讯和服务请关注#小程序:iOS逆向 ,只为你呈现有价值的信息,专注于移动端技术研究领域。

联系我请关注#公众号:iOS技能