Funnybear Funnybear - 8 months ago 40
Objective-C Question

How can I draw a banner at the top of a UIImageView in Obj C

Some Context

I am creating a feature that enables the users to share some Images from my App to their Facebook/Twitter account.

The feature works, I implemented the IBAction and I can share some Images within Facebook and Twitter.

The Issue

My company's marketing department is now asking me to add at the top of the shared images, a banner with the company's logo and the date.

This is what I have to display :

enter image description here

For now I only share the white rectangle. Now I have to add this banner, the blue rectangle.

My Thoughts

I was wondering how I will be developing it. First of all I was thinking about drawing it programmatically within a view.

UIView *banner = [[UIView alloc] initWithFrame:CGRectMake(0, 35, self.view.frame.size.width, 60)];
banner.backgroundColor = [UIColor blueColor];
[self.view addSubview:banner];

The problem is I really don't know how to make it resizable in order to fit all the different screen sizes. But also, how to add the logo within this rectangle, the label date and finally, how can I fit it in my shared UIImage

Then I was wondering, "maybe I can draw it like in Android, directly in the XML file". But from all my investigations, it looks easier to do it programmatically.

Help needed

I would appreciate some advices in order to focus myself on a better way to develop it, because right now my ideas are kind of fuzzy.

Thank you for reading.


You can do it in this way

Consider the img1 is the image which you get from URL. Here I have taken a bannerView, You can add the label and image into it.

Code :

UIImage *img1 = [UIImage imageNamed:@"Screen.png"];

UIView *vwBanner = [[UIView alloc] initWithFrame:CGRectMake(0, 0, img1.size.width, 60)];
vwBanner.backgroundColor = [UIColor grayColor];

UIView *vwWithBanner = [[UIView alloc] initWithFrame:CGRectMake(0, 0, img1.size.width, img1.size.height+vwBanner.frame.size.height)];

[vwWithBanner addSubview:vwBanner];

UIImageView *imgVw = [[UIImageView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(vwBanner.frame), img1.size.width, img1.size.height)];
imgVw.image = img1;
[vwWithBanner addSubview:imgVw];

UIGraphicsBeginImageContextWithOptions(vwWithBanner.bounds.size, NO, img1.scale);

[vwWithBanner drawViewHierarchyInRect:vwWithBanner.bounds afterScreenUpdates:YES];

// old style [self.layer renderInContext:UIGraphicsGetCurrentContext()];

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

Output :

Modified Image

See the gray bar is the Banner View and the below is the image. I did not have image so taken a screen shot of simulator to demonstrate the example.

Hope It helps

Happy Coding ...