Objective-C - 如何将黑色透明放在图像中

Question

我想在图像的底部添加黑色透明，如下图所示。

提前感谢您的建议。

Answer 1

有几种方法可以做这种暗色渐变。最简单的方法是使用CAGradientLayer之类的

// Create a gradient layer
CAGradientLayer *layer = [CAGradientLayer layer];
// gradient from transparent to black
layer.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor];
// set frame to whatever values you like (not hard coded like here of course)
layer.frame = CGRectMake(0.0f, 0.0f, 320.0f, 200.0);
// add the gradient layer as a sublayer of you image view
[imageView.layer addSublayer:layer];

另一种选择是生成一个可伸缩的UIImage并在UIImageView中使用它，该UIImageView作为子视图添加到原始CGFloat gradientHeight = 200.0f; // set to whatever height you want your gradient to be CGSize imageSize = CGSizeMake(1.0f, gradientHeight); // image will be stretched so can be 1pt wide // prepare image with gradient UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0f); CGContextRef context = UIGraphicsGetCurrentContext(); // gradient from transparent to black NSArray *colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor]; CGGradientRef gradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), (CFArrayRef)colors, NULL); CGContextDrawLinearGradient(context, gradient, CGPointZero, CGPointMake(0.0f, imageSize.height), kCGGradientDrawsAfterEndLocation); CGGradientRelease(gradient); // get image from the context UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); // create image view with the gradient image UIImageView *gradientImageView = [[UIImageView alloc] initWithImage:image]; // set frame height to same value as imageHeight, and width to fill the superview (ignore this hard-coded 320) gradientImageView.frame = CGRectMake(0.0f, 0.0f, 320.0f, gradientHeight); // add the gradient image view as a subview to the image view [imageView addSubview:gradientImageView]; 中，如下所示：

{{1}}

这两个选项都会给你一个这样的结果：

Answer 2

您可以通过创建自定义视图来执行此操作。

• 首先添加图片视图内容。
• 为文本添加半透明容器。
• 将标签添加到半透明容器中。
• 为展示位置实施layoutSubviews。

实施看起来像：

@implementation MyCustomView
{
    UIImageView _imageView;
    UIView _labelConainer;
} 

//If this is a table view use initWithStyle:reuseIdentifier instead
- (instancetype)initWithFrame:(CGRect)frame {
    [self setupImageView];
    [self setupLabels];
}

- (void)layouSubViews {
    [_imageView setFrame:self.bounds];
    [_labelContainer setFrame:CGRectMake(
        0, self.frame.size.height - 50, self.frame.size.width, 50)
    //Layout labels in semi-transparent container, relative to parent. 
}


- (void)setupImageView {
    _imageView = [UIImageView alloc] initWithImage:anImage];
    //For table views instead use self.contentView
    [self addSubview:_iamgeView];
 }


- (void)setupLabelContainer {
    _labelContainer = [[UIView alloc] init];
    [_labelContainer setBackgroundColor:[UIColor blackColor]];
    [_labelContainer setAlpha:0.7];
    [self addSubview:_labelContainer];

    //Add some labels to label container
 }

您也可以在XIB中设置它并使用自动布局。