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]; 

這兩個選項都會給你這樣的結果：

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此設置，並使用自動佈局。