I'm trying to create a 3x3 menu, based on a grid of buttons, and I'm facing a lot of problems trying to adapt it to different screen sizes.
Since I want my menu to be equally spaced on the screen (using autolayout tricks on the Storyboard), I have created a custom class with this menu that i'm adding to the center part of the main controller view. The problem is that the menu doesn't fit in small screen (3,5" screens).
Trying to solve this problem, I have created a scrollView in the main screen to add the menu and be able to scroll in small screens.
The problem is that since the view I'm loading in the scrollview, automatically fits to the size of the container (in this case the UIScrollView), only a small part of the menu is appearing in the 3,5" screen, without the option of scrolling (In bigger views it appears equally spaced and everything appears correctly).
How can I solve this UIScrollView problem? Or there is a better solution for this problem?
p.s: I'm sorry, but I don't have enough reputation to add images :(
Uiscrollview with autolayout has some pain into it.
You need to place you're inner views so the scrollview Will be able to understand the contentsize it should use.
You can find more detailed info here
http://infinite-edward.tumblr.com/post/66865604683/uiscrollview-contentsize-and-autolayout-gotcha
Related
I'm new to programming and I'm trying to work with Xcode. I have no experience. I'm trying to make an app with Xcode. I'm done with the code, the only issue i have is with the storyboard constraints. I need some one who can help me to set them up.
So, i have 28 buttons as you can see in the picture, I want to keep the size of 65x65 pixels. that means that the distance between them should vary in different device sizes(4inch, 4.7inch and 5.5inch). i also should mention that i want it to be only in portrait view and only for iPhone.i hope someone can help because I'm to noob for this, I've searched a lot on the internet but I'm not able to do it.
UIStackView (iOS 9+)
UIStackView was introduced in iOS 9, which is very useful in your case.
Edit: Before getting started, make sure to have size classes to be w Any, h Any, this will make thing easier.
To use this, search UIStackView in your utility panel.
Drag an drop a Vertical Stack View on the view of your view controller and set the constraints so it spans the whole screen.
Select the stack view we just placed and set the distribution to Fill Equally.
Drag and drop a Horizontal Stack View onto the vertical one.
Select the horizontal one and set the distribution to Fill Equally.
Place your buttons in the Horizontal Stack View.
Copy and paste the horizontal stack view multiple times based on number of rows you want.
That's it.
You can control the buttons' background images to make it smaller (65px), or you can place a view as its' parent then align horizontally/vertically to place it to the center, like this:
Orientation
If you'd like to lock the orientation throughout the app, go to the settings of your project.
Sample project
I made a sample project for this question, you can check it out here: https://github.com/cyhsutw/UIStackView-example
I am starting a new project which should be working on every iOS device size possible.
The project is rather simple. The main view will be a scroll view and it will hold a '+' button (where it says 'button' in the image) in the top right corner. (It does not really matter, I'm just trying to give the general idea of what I'm trying to understand and implement.)
A small example:
What is the right approach for this kind of problem?
Should I create a different storyboard for each device?
Should I start creating an adjustable scroll view that will hold the needed buttons with some constraints (if at all possible)?
I have read this tutorial:
auto layout
which explains the auto layout nicely, but does not mention the issue I'm trying to figure out.
Any thoughts?
Use AutoLayout and position your views relative to one another (so no x pixels spacing between views). Make only one storyboard for all devices, when a different view should be loaded on another device (like a completely different layout), select the appropriate size class and adapt the views and constraints.
Then it will be recalculated on every device.
The storyboard has a preview section where you can choose a device to simulate the view on.
I designed about 40 view controllers using a 5.5 inch storyboard layout. After all of that I tested it on the iPhone 4S...big mistake. everything is jumbled together being for a larger screen size. I was able to fix one view controller up using Size Classes. I am wondering if there is any way I can adjust all 40 at the same time, or at least avoid doing this for every single one. It is really frustrating finding this out now. Thanks!
This is a relatively complicated issue you are attempting to solve, but I have two potential solutions. Both suggestions are based on moving your current interface into containing UIScrollView instances
If you are using storyboards, then for each of your view controller scenes, put a UIScrollView as a descendent of the view controller's view. From there, provided your subviews are contained within other views (like a container view for a set of buttons), you can move those into your scroll view. You will have to setup constraints to define the size of the scroll view's content, but this will allow the size of the device to have a smaller impact on the interface as you will get scrolling as needed.
If you are using nib files (.xib) then it is essentially the same thing, but easier. In this case, move a UIScrollView onto the canvas, but not as a subview of the default view. Once that is out there, move the original view to be a subview of the scroll view and set constraints to be 0 from the subview to the scroll view. Finally, right click drag from the File's Owner icon to the scroll view and set that as the view outlet.
Hopefully one of these will help you.
I'm trying to use Auto Layout for a custom Table View Cell in my app.
I can't seem to get the constraints quite right.
I layed the labels out in the custom Table View Cell, but the labels are still getting cut off. Any ideas?
Thanks! Will post anything else needed. Tried to show needed info in picture below:
Debugging in Xcode. Somehow what shows in Simulator looks different than in Xcode debug.
Here's the width of my TableView shown:
UPDATE:
The problem here was related to what user matt said in the accepted answer, but I wanted to make the Q&A a bit clearer now that I have it figured out for anyone else that comes across this.
In his initial comment, he mentioned the Xcode View debugging, which was great and I was able to dig into a little bit more. Its called the Assistant Editor: Device Preview, where you are able to see the layout and layers of what is onscreen to see if maybe you have labels overlapping or going offscreen based on the device it is running on. If you want to check multiple device sized, just hit the plus icon in the lower left hand corner of this picture.
This helped me find overlapping layers and sizing issues with the TableView. I was able to see how it looked on each device size.
What also helps here sometimes to use the Pin menu. Sometimes the labels can run off screen because it doesn't know where the constraints of the cell are based on the device size. So your label can run offscreen if the label is based off of a landscape layout but the device is an iPhone 5 and is in Portrait for example. This is the Pin menu:
Hope that makes sense and gives some more color to the problem. Let me know if you have any questions at all, thanks for the help everyone!
The problem is that you are using auto layout but you have not done anything about sizing the table view. The table view here is not your view controller's view; it is a subview. Your view controller's view is automatically sized to the size of the device / window, but its subviews are not automatically resized. So you are ending up with the table view much too wide for the device; the whole table is sticking off into space on the right side.
Use a trailing space from the right side of your labels to the edge of their superview, and set it to greater than instead of equals with a value of ~ 5
Review the constraints of your tableview with the View. Draw cell border, label border and tableview border with different colors to know which elements do not display correctly.
Ex:
#import <QuartzCore/QuartzCore.h>
...
cell.layer.border.width = 1;
cell.layer.border.color = [UIColor blackColor].CGColor;
The thing that worked for me to solve views being clipped was to uncheck "Constrain to margins" in Auto Layout.
I have a problem adapting my apps to the new iphone5 layout, I've made the following passes:
Added a retina 4" splash image
Modified the interface in my storyboard with "Size inspector" to change the anchoring of the widgets
Tested the app with iOS6 "retina 4" simulator.
The app works as expected except when the user pop up the keyboard to edit a text, I use the "stretching scrollview" method for this particular situation and this seems not compatibile with the "autosizing" properties of my widgets, here is an example, from iOS6 simulator, without and with keyboard:
And here is what happens:
I'm quite sure this is a coherent behaviour since my main view is stretched so the other items inside it are stretched following their anchoring, the fact is that I'd like to have the same behaviour of my previous fixed position (all widgets anchored to the top left corner) with the iphone5 gui expansion, is this possibile?
How do you solve the problem of showing a keyboard and scroll hidden content in an iphone 5 compatible way?
I have been having similar problems. From what I have found thus far, we may need to remove all constraints on the view within the scrollable view, because it appears that it's contents are being resized along with the frame of the scrollView. I know that setting the internal view's frame manually in viewWillAppear will work, but then you are stuck having a view that is the same size for both iPhone4 and iPhone5 (albeit it will scroll). Or you could "pin height and pin width" of the internalView right there in storyboard.
Two potential approaches that may work. Sorry I can't confirm these as I'm giving up and redesigning around this problem.
1. Programmatically add constraints to your internal view's subviews. The programmatic constraints will allow you to "spring" the distance between your elements proportionally. When adding constraints programmatically, you are given access to a factor called "multiplier" (not to be confused with priority), which I saw someone else on stackoverflow posting about.
2. You can design the internalView in Interface Builder as a separate viewController with it's .xib file, and then use storyboard to load it as an embedded viewController to a "containerView" object, which you would put in place as the new "internal view" of the scrollView. Perhaps then the .xib would first resize to the correct iOS device, and then you could use its frame to resize the containerView.
My advice is create a small test-case of these before implementing, else you end up like me, having spent hours down the wrong path and facing a dead-end.
UPDATE 12/4/12
Make your life easier by NOT setting the ScrollView as the main view of the ViewController.
--Instead, make ViewController.view a dummy/blank view, and embed a scrollView inside that view. Then, embed another view (my CustomView) in the ScrollView. CustomView contains all the visible controls and text boxes and buttons. There is NO HEIGHT CONSTRAINT on CustomView.