不要让 superview 的 alpha 影响到 subvie

在项目开发当中，有的时候可能会遇到这么一个需求，UI 设计师希望在一个半透明的背景 View 上面显示一些内容，这个是一个挺常见的需求，不知道你有没有碰到过，我是一直都有碰到这个需求。

拿到需求一看，这个需求实现起来非常简单的，三下五除二，敲了一大段代码,在 View 上面添加一个 backgroundView，并在 backgroundView 上面添加一个 imageView。

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic,strong) UIView *backgroundView;
@property (nonatomic,strong) UIImageView *imageView;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 背景
    self.backgroundView = [[UIView alloc] init];
    UIColor *backgroundColor =  [UIColor colorWithRed : ((0x242424 >> 16) & 0xFF) / 255.0 green : ((0x242424 >> 8) & 0xFF) / 255.0 blue : (0x242424 & 0xFF) / 255.0 alpha : 1.0];
    self.backgroundView.backgroundColor = backgroundColor;
    self.backgroundView.frame = self.view.frame;
    [self.view addSubview:self.backgroundView];
    
    
    // 图片
    CGFloat x = (self.view.frame.size.width - 100) *0.5;
    self.imageView = [[UIImageView alloc] init];
    self.imageView.frame = CGRectMake(x, 50, 100, 100);
    [self.imageView setImage:[UIImage imageNamed:@"center_video_local"]];
    [self.backgroundView addSubview:self.imageView];
}
@end

代码写的差不多了，运行查看结果。UI 样式都是可以的，但是背景黑乎乎的，少了个透明度，没关系，这个简单，给个 alpha 属性就 ok 了。

image.png

看看我们给了 alpha 属性之后的代码，运行查看效果。

    // 背景
    self.backgroundView = [[UIView alloc] init];
    // 增加 alpha 属性
    self.backgroundView.alpha = 0.3;

有没有发现问题了？设置了 backgroudView 的 alpha 属性之后，backgroudView 的 subview 也受影响了，这个显然不是我们想要的结果，我们希望 alpha 属性只作用于 backgroudView。

image.png

经过一番搜索，找到了这么一个信息。alpha 属性会作用于 backgroudView 和 它的 subview，UIColor 的 alpha 只会作用于 View 本身。从这个知识点中可以得出，如果设置 backgroudView 的 backgroundColor 的 alpha 属性就可以避免 alpha 属性作用于 subview。

修改代码，运行查看结果，正符合我们的预期。

 // 背景
    self.backgroundView = [[UIView alloc] init];
    // 去掉 alpha 属性
    //  self.backgroundView.alpha = 0.3;
    // 使用 UIColor 的 alpha 属性
    UIColor *backgroundColor =  [UIColor colorWithRed : ((0x242424 >> 16) & 0xFF) / 255.0 green : ((0x242424 >> 8) & 0xFF) / 255.0 blue : (0x242424 & 0xFF) / 255.0 alpha : 0.3];

image.png

参考

1. https://stackoverflow.com/questions/10892535/not-to-update-the-subview-with-superview-alpha-value