Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Key points of technical implementation: implement layer.shadowOpacity and view.layer. shadowOffset

I remove the black line at the top of the TabBar and add a glowing shadow

  • setupshadowColor


- (void)setupshadowColor{
    
    UIView * tmpView = self;
    tmpView.layer.shadowColor = [UIColor blackColor].CGColor;// Set the shadow color
    tmpView.layer.shadowOpacity = 0.08;// Set the opacity of the shadow
    tmpView.layer.shadowOffset = CGSizeMake(kAdjustRatio(0), kAdjustRatio(0));// Set the offset of the shadow, the size of the shadow, x to the right and y to the bottom are positive
    tmpView.layer.shadowRadius = kAdjustRatio(5);// Set the rounded corners of the shadows,// The shadow spread area is similar to blur radius, which is also the gradient distance of shadow. It starts from the outside and gradually changes the shadowRadius distance inward

    
// Remove the black line at the top of the TabBar
[self setBackgroundImage:[UIImage createImageWithColor:[UIColor clearColor]]];
[self setShadowImage:[UIImage createImageWithColor:[UIColor clearColor]]];
    
}

Copy the code

II Add a glowing shadow to the bottom of the view

2.1 the effect

2.2 Code Implementation

  • 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;// Set the shadow color
    tmpView.layer.shadowOpacity = 0.08;// Set the opacity of the shadow
    tmpView.layer.shadowOffset = CGSizeMake(kAdjustRatio(0), kAdjustRatio(5));// Set the offset of the shadow, the size of the shadow, x to the right and y to the bottom are positive
    tmpView.layer.shadowRadius = kAdjustRatio(5);// Set the rounded corners of the shadows,// The shadow spread area is similar to blur radius, which is also the gradient distance of shadow. It starts from the outside and gradually changes the shadowRadius distance inward

    
}

Copy the code

III Other knowledge points

3.1 Avoid Blocking the selectedViewController view by TabBar

  • Error constraints
        [_vcView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.offset(0);
        }];

Copy the code
  • The correct constraint
        [_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);// Avoid view blocking by TabBar
            
        }];

            
        }];


Copy the code

3.2 iOS 13 For Dark Mode

Blog.csdn.net/z929118967/…

    // a bug caused by iOS13
    if (@available(iOS 13.0, *)) {
        // iOS 13 or above
// 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 below
// 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];
        // Set the text style
        NSMutableDictionary *textAttr = [NSMutableDictionary dictionary];
        textAttr[NSForegroundColorAttributeName] = ktabNorTextColor;
        [childVC.tabBarItem setTitleTextAttributes:textAttr forState:UIControlStateNormal];
        // Select the text color style for the state
        NSMutableDictionary *selectedTextAttr = [NSMutableDictionary dictionary];
        [selectedTextAttr setValue:ktabSelectedTextColor forKey:NSForegroundColorAttributeName];
        
        
        
        [childVC.tabBarItem setTitleTextAttributes:selectedTextAttr forState:UIControlStateSelected];

        
        
    }
    


Copy the code

see also

For more information and services, please check out # Applets: iOS Reverse, only for you to present valuable information, focusing on mobile technology research field.

Please contact me at # iOS Skills