Display Overlay on Image - iphone

Using this tutorial: http://www.techotopia.com/index.php/An_Example_iOS_4_iPhone_Camera_Application_%28Xcode_4%29
I have displayed on the UI an image from the photo library. I would like to simply overlay some basic text or a shape (like a square) over the UIImage. Is there an easy way to do this?
Thank you.

Do you have an UIImage only or do you display it using an UIImageView?
If you have an UIImageView then you can just add a UILabel as sub view to your image view.
Assuming your UIImageView is named myImageView ...
// Create and init the label with any rect.
UILabel *myLabel = [[UILabel alloc] initWithFrame:myImageView.frame]; // The lable has the same size as the Image has.
mylabel.text = #"the text";
[myImageView addSubview:myLabel];
//A subview's coordinates are within its superview's coordinates.
mylabel.center = CGPointMake(myImageView.frame.size.width/2,myImageView.frame.size.height/2) // aligning the centers of the views
//An alternative could be transforming the image's center into the coordinate system of its superviews. That code would look smarter but his example is imho easier to understand.
//Setting front, size, alpha, background colour ...
...

You can create a subclass of a UIView, make it transparent, and add an instance of this class, the same size as your image, as a overlay subview on top of the image. Then, when you want to display something on top of your image, call setNeedsDisplay on the transparent subview, and draw whatever you want (colored rectangles, text, etc.) in the drawRect callback of this view.
To make a UIView subclass transparent, add this to the view class initWithFrame method:
[ self setBackgroundColor:[ UIColor clearColor ] ];

Related

Layering UIImageView and UIBezierPath

I have a an array of UIBezierPaths which I drew and also a UIImageView all put on a UIView. When I draw a UIBezierPath and save it to the array, then add a UIImageView, then draw another path, the second path will appear behind the image. Is there something such as a bringSubViewToFront: sort of thing for UIBezierPath?
- (void)drawRect:(CGRect)rect
{
for(int a=0; a<_pathArray.count; a++) {
[(UIColor )[_colorArray objectAtIndex:a] setStroke];
[(UIBezierPath)[_pathArray objectAtIndex:a] strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];
}
}
where _colorArray is the array of the colors for each of the paths, and _pathArray is the array of the UIBezierPaths. I'm inserting a UIImageView onto the view and then what I want to do is to be able to draw on the whole UIView (including on top of the UIImageView).
All subviews will always be drawn on "top" of the superview. Bezier paths aren't subviews, they are drawn as part of the view so they will always be behind the subviews.
You can either render the images that you are currently adding to the image views into the current context (during drawRect). Or you could add the image views behind the view that you draw the Bezier paths into (by adding them to the same superview, or by adding a new sibling view that the beziers are drawn into.

UIView create a inner shadow

I would like to obtain a UIView like this :
But i don't know, what is the best way to do this ?
Is this the best way: https://stackoverflow.com/a/9214570/1228634 ?
Create the shadow as a transparent layer at a particular size, also create a stretchable image, like this:
UIImage *shadowImage = [UIImage imageNamed:#"shadow.png"];
shadowImage = [shadowImage stretchableImageWithLeftCapWidth:floorf(shadowImage.size.width/2) topCapHeight:floorf(shadowImage.size.height/2)];
Put the image in a UIImageView with contentMode as scale to fit.
Call your view as "sView". You can add the shadow like this:
UIImageView *shadowImgView = [[UIImageView alloc] initWithImage:shadowImage];
shadowImgView.contentMode = UIViewContentModeScaleToFill;
shadowImgView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
shadowImgView.frame = sView.bounds;
[sView shadowImgView];
[shadowImgView release]; // only needed if you aren't using ARC
You can try to use several pictures (as it works for html), but I don't think it is better than your example:
you need 4 small pictures to make a texture for top, left, right and bottom border
you need 4 pictures for your View's corners;
draw to make a border from first 4 images using repeating;
draw corner images.

UIButton selection color

I'm using a UIButton as a pressable imageView. Right now when I press the button the background image is still visible but a gray, transparent layer is on top of the image. How do I change the color of this layer?
I've tried setting the setBackgroundImage:forState: but all that does is replace the current image with another image.
Note
I'm able to do this with a tableview row using the following code:
// Custom selectionStyle color
UIView *v = [[[UIView alloc] init] autorelease];
v.backgroundColor = [UIColor myBlue];
groupCell.selectedBackgroundView = v;
Apple's approach is to expect you to provide an image that is tinted accordingly. So if you wanted to change that gray overlay to red you would need to call setBackgroundImage:forState: and supply an appropriately tinted image that would be swapped in.
Unfortunately there is no direct access in the SDK/API that will let you change the default highlight color - just the image.

How can I have an opaque UIView as a subview of a semi-transparent UIView?

I have a UIView with an alpha of 0.5 which I add as a subview to my primary view in order to gray-out everything else. I want to add an additional UIView to this gray UIView as a subview - the problem is that when I do this, my newly-added subview is also partially transparent.
Is there any way to make a subview "ignore" the alpha value of its superview and be itself fully opaque?
Set the UIView background color alpha not it's alpha directly.
Objective-C
UIView *view;
...
view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:.6];
It's not the same as:
view.backgroundColor = [UIColor blackColor];
view.alpha = .6;
Swift
view.backgroundColor = UIColor.black.withAlphaComponent(0.6)
No, not really. What you want is to take your overlay view, and make it just have a clear background color. As a subview of that new overlay place your view that will grey things out. And as a sibling view to that put your view you want to be opaque.
[OpaqueView] [DimmingView]
| |
[OverlayView]
Don't put it inside the semi-transparent view. Make it a sibling to semi-transparent view and put it over it using z-ordering.
This will only work if you have any image on the background.
Instead of reducing the alpha of UIView, add an UIImageView on that view and then reduce the alpha of the UIImageView.
now add your subviews on the UIView.
your subviews will not take the alpha property anymore.. :)
No, any view will inherit the opacity of its parent.

Drawing in Custom ScrollView

I'm trying to draw in a scrollview on top of an image using multi-touch. The circles are actually drawn, but under the image. In my code I currently create a custom ScrollView:
#interface AppScrollView : UIScrollView {
//objects to draw circles
NSMutableDictionary *circlesInProcess;
NSMutableArray *completeCircles;
}
#end
In my AppScrollView.m I override touches commands to store touches and add a
(void)drawRect:(CGRect) rect
method to draw the circles in the scrollview. I also include
[self setNeedsDisplay]
to display the circles. In my app controller, I declare the new custom scrollView object:
IBOutlet AppScrollView *scrollView;
Later I add an image to the scrollView using:
[scrollView addSubview:myImage];
The image is visible, but when I try to draw circles on top of it, they are drawn under the image. Let me know if you have any suggestions?
Suggestion: draw the image onto your scrollview (instead of adding the image view as a subview) and then draw the circles on top of that.
In your code check where did you add you custom scrollview. Is it added after imageView is added or before.
You scrollView should be on top of imageView.