I have a static UITableViewCell in a containerView with auto layout applied. In the containerView is a UIView. I set the border color of the containerView to orange, and the view to green. When I run it on the simulator I get the following results:
Constraints:
Portrait:
Landscape:
The green border color is applied to the outer view.
When the the simulator goes in landscape mode, the views' width doesn't become as small as it should be; as you can see the views' right green border is not shown. (I have the same issue with the second UISegmentedControl.) Can someone please explain why this happens and provide a solution?
Edit
When in portrait mode, the containerView (and another view) are 1 on top of another. When in landscape mode, they are side by side. That's why in landscape mode, the containerView is smaller.
As per your requirements
first UISegmentedControl
second UISegmentedControl
Follow these links Autolayout or Autolayout programatically
This might helps you :)
Related
I have a custom UICollectionViewCell class that sets the background view of the cell to a downloaded image and also a UILabel added to it that sits neatly at the bottom of the cell and is slightly transparent (this label is the title of the image). It looks great in portrait but when I rotate my device to landscape the UILabel stays in its position while the custom cell resizes itself to better fit the screen. I have my UILabel fully constrained to the cell so I don't know why it isn't resizing to always fit the width of the cell whether the device is in portrait/landscape.
I've attached these pictures below to better illustrate what exactly is happening:
I figured it out - for anyone who is also wondering the same thing, this is what I did:
I overrode the layoutSubviews method in my custom UICollectionViewCell class and forced my UILabel to stick to width and bottom of the cell.
It was weird because before I upgraded to xCode 6 and iOS 8 this was working perfectly without the need of this solution (the constraints within the storyboard worked), but now I had to use this approach.
Cheers!
I have a UIScrollView with a UIView as a subview. The UIView has a bunch of data entry fields arranged vertically - essentially just a fixed format data entry Form.
I want to keep the UIView's vertical size and adjust its horizontal size to match the size of the UIScrollView which changes depending on the orientation of the device. Note that this is all placed in the Detail view of a UISplitViewController.
So the user will have to scroll vertically but not horizontally as all the text fields on the UIView should resize themselves to fit horizontally on the screen.
Currently if I resize the UIView by changing the frame width to match the UIScrollView's frame width then the UIView subviews (the text fields) don't resize themselves according to the constraints setup in IB. The UIView just seems to get clipped. There is no horizontal scrolling so this aspect is working correctly.
I have autoresize subviews set on UIView and on UIScrollView.
Any tips on what to do here ? Also where would I put code to resize the UIView if the device orientation changes ?
Additional information.
I created the UIView in IB as a separate view in the same NIB as the DetailViewController containing the UIScrollView. Because it is much taller than the UIScrollView the only way I can find for creating it in IB is if I set it up as a separate view of the desired width and height. I then create an IBOutlet and add this view as a subview to UIScrollView in the viewDidLoad method. This all seems to work find with the views all displaying correctly, with the exception that the UIView subviews are not resized horizontally.
Any suggestions on what I may be doing wrong here?
Since you are using not putting the view inside scrollview directly from the xib, the IB doesn't provide the options to give constraints that has anything to do with superview. You might have to add the constraints programatically.See here.
EDIT:
Also try using the below on the view (haven't tried, should work according to documentation, but not sure with auto-layout):
self.view.autoresizesSubviews = YES;
Or if you don't want to use auto layout at all then the earlier method of setting the view to expand (horizontal/vertical) in the size inspector would do. For this you have to disable auto-layout. Select xib-> File Inspector -> Uncheck auto-layout checkbox
OK after more discovery I think I have found the right way to do what I am trying to do so i thought I should leave a note regarding this. Remember I am trying to create a scrollable form that resizes its width but not its height so the user only has to scroll up and down to access fields.
To create a large fixed size form that requires scrolling on the device make sure you set the ViewController size to Freeform in IB. Then you can create the view to be whatever size you want in IB and at runtime it will resize to the devices size.
Place the UIScrollView (I call it the scrollView) in the main view and pin it left and right and top and bottom (i.e set constraints using IB)
Place a UIView (I call it the contentView) in scrollView and make it the same size as the scrollView and also pin it on all sides to its superview (the scrollView)
Now add all the labels and text fields are required to the contentView and make sure you add vertical constraints from top to bottom and left to right so that autolayout can figure out the width and height in order to calculate the scrollView.contentSize
Set the contentView width constraint as a fixed size to make it look reasonable in IB. Bear in mind we want the width of contentView to always match the scrollView width so the user does not have to scroll sideways, only up and down. We will set the proper width in code at runtime as I have not found any way of doing this in IB only. Perhaps setting priorities on constraints might achieve this but I think UIScrollView won't do this for you.
Now add a property the ViewController.h file and connect this to the contentView width constrain you created in 5) above.
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *contentViewWidth;
Finally create a viewDidLayoutSubviews method in ViewController and add the following code to set the contentView width to be the same as the scrollView width.
- (void)viewDidLayoutSubviews
{
self.contentViewWidth.constant = self.scrollView.frame.size.width;
[self.view layoutSubviews];
}
If things don't resize properly check all your constraints are correctly set. IB seems to do some things that seem strange to me. But finally I have it working with what appears to be minimum coding.
You can also resize vertically in the same way as long as you set the constraint priority on subviews in contentView to be lower than 1,000. Also set a greater than or equal to size with a high priority if you don't want it smaller than a certain size.
If anyone can figure out how to set the contentView such that it resizes its width to match the scrollView using only IB constraints I would love to know how.
I wanna do something like THIS in my ipad application, what is the best way to do the followings:
The shadow under the upper bar.
The padding for the papers (top, left, right & bottom)
The background (as a notepad) : please think about the cells: they must still scrolled inside the paper and cropped before reaching to the paper bottom edge.
I'm looking for the optimal solution that avoids overriding as much as possible.
EDIT :
I tried to use UIViewController (with UITableVIew and has the delegate methods) inside UISplitViewController, And I tried adding UIImageView at the top of the table but this view will scroll with the cells and it'll hide when I scroll down. I tried to use viewForHeaderInSection function also for upper shadow (under the bar) but what about the papers bottom edge (what if I put one image including the shadow and the papers bottom edge and has the padding as a background for the UITableView or UITableViewController, and change this image when rotate to the portrait orientation? is this a good and possible solution?)
My guess:
Create the background in an image editing app
Cut 4 images, for header, footer, left and right sides
Create a UIViewController with 4 UIVIews and add the correct images as background
In the middle of all 4 add a UITableView
This way the images won't move and if you position the UIViews with the background properly, your TableView will scroll inside the notebook (assuming you are trying to create a notebook)
If you app is iOS 6.0 only, autolayout will be a great help. Check apple developer video on it to learn how to use this feature: WWDC 2012 Session 232 - Auto Layout by Example
One easy way to do this is from the xib:
1. In xib create image .On image view you can put background whatever you want as a image.
2. create table view above the image view and set table view background color as a clear color.
This will do it.
So I've got a pretty complex project. I'm using both interface builder and xcode directly to build objects. Right now I have UIScrollViews being built in IB, where they need to be, and UIButtons built on top of those scrollviews. There are several scrollviews in the same spot, but that really shouldn't make much of a difference.
Anyway, the issue is that it works perfectly on the iPhone 4. But when building on the iPhone 5, it moves the Scrollviews to the bottom of the screen, where before it was x=0, y=361. All my other objects are being placed correctly with some empty space underneath them. I know how to check for iPhone 5:
I don't know how to post code on here with colors and whatnot, they make it super complicated so here is how I'll do the if/then:
if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
CGSize result = [[UIScreen mainScreen] bounds].size;
if(result.height == 480){
// iPhone Classic
}
if(result.height == 568){
// iPhone 5
}
}
I don't know of a way to do if/then in IB. I tried just manually changing the location this way:
[peopleScrollView scrollRectToVisible:CGRectMake(0, 449, 320, 58) animated:NO];
That did not work. So, what I'm asking is there a way to change the location of a UIScrollView in the code itself? If there is not, then I think I will have to build all 5 UIScrollViews manually in code, which I definitely do not want to do.
If you select your Scroll View object, then click the Size Inspector module, you will notice the default Autosize Mask is set to: Left, Top.
Depending on your view "Mode" option, and your view's "Resize Subviews Automatically" option, this view and subviews will be shifted down on the 4" screen compared to the 3.5" screen.
Depending on what your particular view should look on each screen is up to you. On my project, I adjust the autosize mask to Left, Top, and Bottom,
as I want my UIScrollView and subviews to remain at the top of the screen (as drawn in IB) on the 3.5" and 4".
You can also set vertical and / or horizontal sizing arrows inside the box in the autosize graphic
. This will attempt to scale object as accordingly for dynamically sized screens.
The Autosize Mask should be your new best friend with iPhone5.
See Xcode Interface Builder. How Do These Autosizing Mask Settings Differ? for more info.
I've built an app using the UITabBar template. I have a few tabbar items, one item displays a view. That view has a UIScrollView element that has paging enabled to mimic the behaviour of the iPhone springboard i.e. pages that can be scrolled left to right.
I'm trying to drop in a UIPageControl, so I've resize the UIScrollView so that it's slightly shorter than the parent UIView height and have placed a UIPageControl below it.
When I run the app the UIScrollView is always 100% of the height of the parent UIView and I can't see the UIPageControl.
I've got the following code in my viewDidLoad method of the view controller for the tab:
UIScrollView *tempScrollView=(UIScrollView *)self.view;
tempScrollView.contentSize=CGSizeMake(640,377);
This sets the content size ok and I can scroll left to right. I've tried adding:
tempScrollView.frame=CGRectMake(0, 0, 640, 377);
To to resize the scroll view but it still shows 100%. See diagram below showing the issue:
I think you shouldn't resize the frame to 640, 377 because it would make the paging stop working, once the contentSize would be the same as the frame size.
One solution would be to set the desired frame size in the interface builder (like the left most figure) and set proper autosizing masks. I gues what you are looking for is the configuration below
To check if the changes are working, I would use a uiscrollview of height visibly smaller, just to make sure the behaviour is the desired.
If you want your view to scroll you need to change the tempScrollView.contentSize to be bigger than tempScrollView.frame
If you do this:
CGFloat contentWidth = tempScrollView.frame.size.width*2;
tempScrollView.contentSize=CGSizeMake(contentWidth,377);
You will have 2 pages.
You need to activate paging too with:
[tempScrollView setPagingEnabled:TRUE];