Apple Interface Builder: adding subview to UIImageView - interface-builder

I created UIImageView with the help of Interface Bulder. Now I want to place label inside it (as its subview). In code I can type something like: [myUIImageView addSubview:myUILabel]; But can I do it with the help of IB? I found the solution for UIView, but can't find something similar for UIImageView.

You cannot add a subview to UIImageView in interface builder for reasons only known to Apple! You are right in saying that you can addSubview programmatically, but then, the overhead of setting autoresizing masks and placements of subviews should all be handled in code, which is cumbersome.
So there is an easy workaround. Instead of dragging an instance of UIImageView in the nib, just drag a UIView and change its class to UIImageView from UIView (cmd+4 option of inspector). The only difference you find in the nib for default imageView instance and your new UIImageView subclass instance is: you cannot set image to your new imageView from nib (cmd+1 option). So, in the -viewDidLoad method of its appropriate viewController, set image to this outlet of UIImageView.
By doing so, you are free to add subviews to your "now UIImageView" instances in interface builder, which is much easy.

I would like to add answer.
While it sucks you cannot add subview to UIImageView, you can get the same effect by incorporating UIView with transparent (clear color) background.
Then put the UIImageview BEFORE it.
So the UIView has the subviews and the UIImageview is the background of the UIView.
I think that's apple's intent.
Here is a screenshot:
Here is the result:
Don't forget to set background as clear color
Now if someone could actually point me to a tutorial how to do this it'll be great. I spent hours doing it the checked answered way. The checked answer is a fine answer but very unintuitive because you can't see your background image clearly while working. I think mine is the proper way to do so.

In latest XCode(4.5) there is an option to drag and drop the required controls to the parent.
It is quite easy.
Attached screen shot for the same. I dragged the Label/TextField and Button to UIImageView

Use this code:
UIImage *image = [UIImage imageNamed:#"background.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[self.view insertSubview:imageView atIndex:0];
(replace background.png with image) (replace atIndex:0 with whatever place in the .index root you want to insert the image and your off.

Related

UITableView Stretching Issue

I have a UIViewController that has an image and label at the top followed by a UITableView. In the IB it looks perfect, but when I run the application in the simulator the UITableView is stretching and taking up the entire screen.
I've turned off all autosizing and set all of the values for stretching to 0, but it's still taking up the entire screen. I even tried some advice I saw on another post which suggested putting the UITableView in a UIView that was sized, but that did not work either.
Any suggestions on how to stop the UITableView from resizing and filling the screen? I am running XCode 4.2.1 with iOS5.
You can give frame size to your tableView like this-
1) make your tableView's IBOutlet property in .h class, and synthesize in .m class.
2) connect it in Xib.
3) than in your .m class place this code in viewDidLoad-
tblView.frame = CGRectMake(0.0f, 30.0f, 320.0f, 50.0f); // you can give any size to your table

Cocoa: NSView drawRect painting over IBOutlets

I have an NSView in IB which sits above the app window. I have a subclass of NSView (AddSource) which I assign to the NSView.
On awakeFromNib I instantiate the view:
//add a new Add Source class
addSourceView = [[AddSource alloc] initWithFrame:NSMakeRect(0.0, 959.0, 307.0, 118.0)];
[[winMain contentView] addSubview:addSourceView];
in addSourceView's drawRect method I am adding a white background to the view:
[[NSColor whiteColor] set];
NSRectFill(rect);
[self setNeedsDisplay:YES];//added this to see if it might solve the problem
In winMain's contentView I have a NSButton that when clicked slides the addSourceView onto the window:
NSRect addSourceViewFrame = [addSourceView frame];
addSourceViewFrame.origin.y = 841.0;
[[addSourceView animator] setFrame:addSourceViewFrame];
But it seems as if the app is painting over the IBOutlets I placed on the NSView in IB. If, in IB, I repoistion the NSView so that it is on screen when the app launches everything works fine, the IBOutlets are there as well as the background color.
I'm not sure why this is happening. I've done this before with no problems. I must be doing something different this time.
Thanks for any help.
*note - on the 3rd screen capture, when I say this is what the app looks like when opened, that's when I hard code the Y position of the NSView. When it is functioning correctly it should open as screen capture 1.
Most likely your buttons and custom view are siblings, i.e. they are both subviews of your window's content view. Since siblings are "Stacked" depending on the order in which they are added, when you add the view in code it is being added on top of the buttons. You should be able to fix it by explicitly specifying where the view should be positioned relative to its new siblings like so:
[[winMain contentView] addSubview:addSourceView positioned:NSWindowBelow relativeTo:nil];
which should place it below any existing subviews of your window's content view. Also, remove the setNeedsDisplay: line in drawRect, that leads to unncessary, possibly infinite, redrawing.
EDIT: OK I see what you're doing.
I would suggest creating a standalove view in the NIB by dragging a "Custom View" object into the left hand side (the vertically-aligned archived objects section) and adding your controls there, that should ensure the controls are actualy subviews of the view, then you can just create a reference to the archived view in code, and add/remove it dynamically as needed.
Honestly though, you should probably be using a sheet for these kinds of modal dialogs. Why reinvent the wheel, and make your app uglier in the process?
You added TWO AddSource views to the window. You added one in IB - this view contains your textFields and buttons that are connected to the IBOutlets and it is positioned outside the window.
Then in -awakeFromNib you create another, blank AddSource view (containing nothing) and animate it into the window.
I can't recommend highly enough the Hillegass as the best introduction to IB and the correct way to build Cocoa Apps.
Also, Assertions can be useful to make sure what you think is happening is actually what is happening.
If you are certain you added a button to your view in IB, assert it is so:-
- (void)awakeFromNib {
NSAssert( myButton, #"did i hook up the outlet?");
}
NSAssert is a macro that has zero overhead in a release build.
Calling [self setNeedsDisplay:YES] from -drawRect just causes the same -drawRect to be called again. This will give you big problems.

How to set up background image of the UIView?

In a case of a custom view, the only way i can think of is to lay an UIImageView on top is it and set it's background to some image.
Can image be overlaid onto the regular UIView?
I prefer to place an UIImageView covering whole UIView and arrange it to back in Interface Builder. I think it is the most convenient way to do it.
You can add image as background with image pattern. Use the following line of code.
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"YouImageName.png"]]];
In case you are not applying it to self.view, but to some other view in you xib file, then you need to make it IBOutlet first.

iOS. How Do Enable a Transparent Image to Pass Touches to a UIButton Below it?

For an iPad app I am writing I have a container UIView with two subview that are UIView subclasses:
A UIImageView whose image has a portion of it cut away to reveal what is below it.
A UIButton below the UIImageView that is revealed through the cut away portion of the UIImageView.
Since the UIImageView overlaps the UIButton spatially it is preventing touches from reaching the UIButton even though the UIButon is fully visible due to the alpha matte cutout in the UIImageView. How do I allow the UIImageView to pass touches to it's sibling UIButton?
Thanks,
Doug
UIImageView usually won't block touches, UIViews do.
You can set the userInteractionEnabled property on the overlapping views to NO, then touches should go through them.
An other approach would be writing a custom hitTest that redirects the thouches to the button.
In addition to Bastian's answer it was also necessary for me to uncheck the Opaque drawing attribute in interface builder for my UIImageView
Even with user interaction enabled, which is the default value when placing a UIImageView in Interface Builder, the touches should pass through to your button underneath, even if your image view has a solid background. Something else must be going on like a UIView sitting on top of the button.
If you are trying to do something more complex to get touches to pass through to underlying views or a separate view controller whose view is underneath, I created this simple open source library:
https://github.com/natrosoft/NATouchThroughView
The REAMDE and demo show how to use it.

How to customize / style a UIPopoverController

I'm working on an iPad application and I'm using UIPopoverControllers. I'm at the part where the app needs to be branded and styled and i'm wondering how to change the color / tint of the UIPopoverController? Standard is dark blue but it needs to be another color..
is this possible?
Greets, Thomas
This is possible starting in iOS 5.0 by subclassing the abstract class UIPopoverBackgroundView and assigning your subclass to the popoverBackgroundViewClass property on your UIPopoverController instance. Unfortunately there is no tintColor property as the popover needs to use images for it's arrow and border in order to achieve smooth animations during dynamic resizing. You can learn more about how to customize the appearance of a UIPopoverController in the UIPopoverBackgroundView Class Reference
It's impossible for now.
It's what I call the "Box in a Box" model. You get control of the box inside of the box (the UIViewController inside of the UIPopoverController), but you have very limited control over the actual popover itself. Outside of the arrow direction and the size, you can't change much else. There are also options for a modal effect popover, which dims everything else when it shows up, but I haven't tried to get it working.
I'm sure you've noticed there is no UIPopover class by now.
The answer you want to hear:
If you really want to style one that bad, just write your own. It's really not that hard.
The link you want to click:
Cocoacontrols is an index of iOS and OSX components available on GitHub, they have some popover stuff.
iOS 7 introduces backgroundColor property of UIPopoverController which affects/includes the navigation background color as well as arrows of popover.
#property (nonatomic, copy) UIColor *backgroundColor NS_AVAILABLE_IOS(7_0);
Usage example:
if ([self.popoverVC respondsToSelector:#selector(setBackgroundColor:)]) { // Check to avoid app crash prior to iOS 7
self.popoverVC.backgroundColor = [UIColor greenColor]; // [UIColor colorWithPatternImage:#"..."] doesn't reflect the color on simulator but on device it works!
}
Note - As of now (iOS 7.0.3), in some cases (like set color using colorWithPatternImage:), the simulator (and even some devices) doesn't honor the color.
Throwing my hat in here;
I've leveraged UIPopoverBackgroundViews in iOS 5+ to add a simple tintColor property onto UIPopoverControllers.
PCPopoverController: https://github.com/pcperini/PCPopoverController
I try to trick it by customizing the view controller inside the popover and then hiding the popover border using this code:
UIView * border = [[insideViewController.view.superview.superview.superview subviews] objectAtIndex:0];
border.hidden = YES;
The app is actually still in development so I'm hoping other people will comment on this solution.
check out these latest projects leveraging UIPopoverBackgroundView
https://github.com/CRedit360/C360PopoverBackgroundView
https://github.com/GiK/GIKPopoverBackgroundView
from ios 5 onward it is can be done, here is a library
https://github.com/ddebin/DDPopoverBackgroundView
just look at the documentation , and it is quite easy
good luck
You can use Elegant Popover cocoapod for just that. You can customise shape and colour of the arrow and the popover itself. Also, you can add colourful borders to the popover.
I know this is a lousy constructed answer, but I've just been playing with the UIPopoverController's views. They do exist.
The only way to access them is from your view that is sitting in the UIPopovercontroller.
I have a navigation controller so I follow this hierarchy
UIView *test = ((UIView *)[[[self.navigationController.view.superview.superview.subviews objectAtIndex:0] subviews] objectAtIndex:1]);
UIView *test2 = ((UIView *)[[[self.navigationController.view.superview.superview.subviews objectAtIndex:0] subviews] objectAtIndex:1]);
test.backgroundColor = [UIColor greenColor];
test2.backgroundColor = [UIColor greenColor];
This isn't exactly the end goal, but it is really close.
you'll find that the_view_in_the_popover.superview.superview (maybe just one superview if you are not reaching out from a navigation controller view) is a UIPopoverView. If you cast it as a UIView and treat it as a UIView you're not really breaking any rules. I guess that is really up to apple though.
Remove UIPopoverController border:
NSArray* subviews = ((UIView*)[popupController.contentViewController.view.superview.superview.superview.subviews objectAtIndex:0]).subviews;
for(UIView *subview in subviews){
[subview removeFromSuperview];
}

Resources