CODEWITHSUNDEEP
objective-ciphoneuiimageviewuiimagexcode6
Javeed
Javeed

Reputation: 236

Objective-C - How to put black transparent on image in

I would like to add black transparent at the bottom of an Image some thing like shown in below image.enter image description here

Thanks in advance for your suggestions.

Upvotes: 1

Views: 1100

Answers (2)

Bartek Chlebek
Bartek Chlebek

Reputation: 1663

There are several ways to do such dark gradient. The easiest one is to use a CAGradientLayer like so

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

Another option is to generate a stretchable UIImage and use it in a UIImageView which is added as a subview to the original UIImageView, like so:

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

Both options will give you a result like this: enter image description here

Upvotes: 5

Jasper Blues
Jasper Blues

Reputation: 28786

You can do this by creating a custom view.

  • Start by adding the image view content.
  • Add a semi-transparent container for the text.
  • Add the labels to the semi-transparent container.
  • Implement layoutSubviews for placement.

Implementation would look something like: 

@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
 }

You could also set this up in a XIB and use auto-layout.

Upvotes: 0

Related Questions