Understanding Creating a UIView programmatically with constraints tutorial? - ios

I'm following this tutorial:
http://matthewmorey.com/creating-uiviews-programmatically-with-auto-layout/
In it (I think) he creates a little red subview and adds constraints to the red subview.
But don't you need to add constraints to the view itself (the green part)?
Lets say you wanted to make the green view always be full screen as the image shows in his tutorial. How would you do that?

The green background will automatically fill an MDMView, whatever its frame is.
This line (already in the tutorial) sets an MDMView to be the view of an MDMViewController:
self.view = [[MDMView alloc] init];
And window.rootViewController automatically fills the window with its view:
MDMViewController *rootViewController = [[MDMViewController alloc] init];
self.window.rootViewController = rootViewController;
So, no, there is nothing more you need to do in code to get the green to fill the screen.
You will, however, need to add a Retina 4 LaunchImage asset to Images.xcassets. It should be 640 x 1136. This serves to indicate that the app should support 4-inch and larger screens. Without this asset, you'll get black bars at the top and bottom on larger screens.

What it is saying is
UIView *contentView = [[UIView alloc] init];
contentView.backgroundColor = [UIColor greenColor];
self.view = contentView;
It means the green view is main view. You don't need to set constraints for main view. It will always be full screen.

Related

Change color behind app on rotation

When an iOS app rotates it will reveal a black background when the app is between portrait and landscape. Is it possible to change this color from the default black to white? Changing the UIWindow's background color will not help. Here is an example of the black background in Safari during rotation:
I have done something similar but I couldn't find the source now, but here is the idea:
Create and add a significantly larger view as backing view and center it.
Add the UIWebView as subview of this large view whose background is white.
Re-position the center of the UIWebView, too.
You can do this way:
Add a UIViewController and set it as initial VC (in screenshot it is MainVC).
Add two UIViewContainer: first for holding your background view , and second for your other vcs.
Override viewDidLayoutSubviews in implementation file of background VC (in this case the .m file of red VC)
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
//Some hardcode :)
self.view.frame = CGRectMake(-100, -100, 1136, 1136);
}
After doing this you will have something like this:
I know this is not the best solution, but you can do this way until you find the best one.
I got the same issue. As I understand that you want to remove the black background. The easiest solution that I used is set you window clipsToBounds = true instead of your rootViewController.
window?.clipsToBounds = true
You can solve the problem by adding empty general view controller with oversized bounds into your root viewController and make it the lowest in the view hierarchy:
CGFloat length = 2*MAX(rootViewController.view.bounds.size.height, rootViewController.view.bounds.size.width);
UIView *oversizedBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, length, length)];
oversizedBackgroundView.center = vc.view.center;
oversizedBackgroundView.backgroundColor = [UIColor whiteColor];
rootViewController.view.clipsToBounds = NO;
[rootViewController.view addSubview:oversizedBackgroundView];
[rootViewController.view sendSubviewToBack:oversizedBackgroundView];
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
The key point here is to set clipsToBounds to NO

UIViewController view not size correctly when running iOS7 simulator

I have a custom UIViewController which create a view containing an action bar at the top (view with 4 buttons), a tableview and then another view below the tableview. Layout is done all in code and is not using auto layout.
Everything works perfectly on various device with iOS 7.0 and 7.0.2, but in the simulator, the root view of the controller get anchored at the top right corner of the screen (0,0) instead of below the navigation bar.
I'm going to force the relay out in the viewDidAppear: method, but this seem like a hack...
Thanks for any insights
Edit: added an image. You can see the UIView highlighted. As ManicMonkOnMac mentioned, the UIView is under the toolbar (but this only happens in the simulator, on the device, the view lines up fine)
In the loadView method on the controller, i set the frame when creating the view:
- (void)loadView
{
// Our parent view controller will resize us appropriately. The size set
// here is a convenience for initial view layout.
self.view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
}
But this frame is later changed. Not by my code, though, but by UIkit code)
Edit2: addded loadView method body
EDIT: After going through session 201 of WWDC 2013, I think I have the solution.
in iOS 7 there is a property that you can set on your view controllers to specify whether you want the views to be overlapped by navigation bar.
viewController.edgesForExtendedLayout = UIRectEdgeNone;//UIRectEdgeAll specifies that nav bars should overlap the view.
Unlike iOS 6, navigation bars are placed over the views in iOS 7.
Use the frame size that excludes the navigation bar.
code:
CGRect frame = CGRectMake(self.view.frame.origin.x,self.view.frame.origin.y+self.navigationController.navigationBar.frame.size.height,self.view.frame.size.width,self.view.frame.size.height);
CustomView *view = [[CustomView alloc] initWithFrame:frame];
[self.view addSubview: view];

MKMapView not filling view (iOS)

I am creating a view programmatically. The view is fairly simple as it only contains an MKMapView which I want to fill the screen (with the exception of the navigation bar at the top).
Here is what I am doing to setup the MKMapView:
- (void)setupMapView
{
mapView = [[MKMapView alloc] initWithFrame:self.view.frame];
mapView.delegate = self;
mapView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[self.view addSubview:mapView];
}
However, the MKMapView doesn't seem to fill the entire screen. If you look at the top of this screenshot there is a gap between the top of the map and the bottom of the navigation bar (which is added by the UINavigationController).
Please could someone suggest why this is happening and how I can fix it?
The frame of the view (self.view.frame) probably have an offset in the y position. This is to position it correctly in its superviews coordinate space. When you copy that frame onto your new view it is inappropriate because you are moving into a different coordinate space.
A cheap alternative that will work in 99.9% or cases is to use the view bounds instead:
mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
Because this usually has an origin of zero and the full size of the view.

Handling view resizing programatically heights, widths and margins

I am trying to setup a view programatically. Through preference I prefer to programme the views as opposed to using Interface Builder, I feel I have a better control for some reason...
I am setting up a view with two subviews and a button. What I am trying to acheive is the same view when the orientation changes. Initially I thought I needed to calculate the screen size then calculate some divisions to work out the changes, but it appears I can handle on UIViewAutoresizing***
The issue I experience is with the top margin. Here is my code for the subviews.
// Create sub view for Logo
UIView *logoView =[[UIView alloc] initWithFrame:CGRectMake(0,0,320,280)];
[logoView setBackgroundColor:[UIColor blueColor]];
logoView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
// Create sub view
UIView *buttonView =[[UIView alloc] initWithFrame:CGRectMake(0, logoView.bounds.size.height, 320,200)];
[buttonView setBackgroundColor:[UIColor redColor]];
buttonView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin;
Here is a picture of portrait and landscape where you can see the issue, with the 'white' space.
You either want the two views (red and blue) to end up with a proportionate amount of space after the rotation:
logoView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleBottomMargin;
buttonView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin;
Or you want the red view to end up the same size as it started out, and the blue view to adjust to make room for it:
logoView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
buttonView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin;
use autolayouts . U dont have to deal with any of these issues ...

adjusting view after hiding navigation bar

I have an app that has both navigationbar and toolbar on display with various buttons...
I have an imageview that will act as a help overlay (like you see in many apps these days) that is semi transparent with arrows pointing to the buttons on the bars plus actual view content.
First attempt displays the imageview in the view area but leaving the bars in place...not good!
So next attempt I have included the bars as part of the imageview and add this to take up the entire screen, so far so good. I then hide the bars but oh no.....the view moves up 44 pixels (as expected)
Problem is no matter what I do I cannot get the view to move down the 44 pixels?
So the imageview displays the bars giving the illusion the overlay (imageview) is on top, but the view in between is out of whack!
Does anyone know how to resolve this?
UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(20, 0, 750, 1024)];
iv.userInteractionEnabled = YES;
iv.image = [UIImage imageNamed:#"myimage.png"];
UIWindow *window = self.view.window;
[window addSubview:iv];

Resources