I am absolutely new in iOS programming. I wonder if a View contains 4 narrow rectangle subviews where they are constraints to four sides, like a picture frame, if I can make this program works in portrait, landscape; in all devices, iPad, iPhone( different version). The reason I am asking is to find out if not possible to consider concentrating and finding out about the possible options.
thanks
Yes, auto layout will do it. you might want to take a look at this tutorial to get started:
https://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2
Related
One screen of my application involves displaying a form - asking the user to enter details which can be posted and saved eventually. In my form, I'm asking for the title, date, description, and attach any images. So there are UILabels, UITextFields, UIButtons, and UITextView involved. And they are displayed using interface builder + constraints.
Now as I view this screen on phones ranging from 8 to XR, I notice, for example in the XR, there is a lot of white space not being utilized. I understand the problem is due to my constraints. How do I adapt my constraints to help with this issue? So in the case of a longer screen such as an XR, my UIViews make use of the space provided rather than being bunched on the top half of the screen. I'm still a beginner w/iOS so I'm assuming it has to do something with constraints but not sure. How can I tackle this issue/change my approach when envisioning iOS applications?
Need some expert to enlighten me w/some iOS wisdom!
It's important to understand how autolayout and constraint works. After that you'll just need to create the UI ONCE in most cases and it will be good for all devices.
Since you're new I suggest putting one object(eg: UILabel) at a time and add constraints on it and see if it works before you add another object
Kindly see this link:
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html
and there are a lot of tutorial videos in youtube you can watch.
happy coding
I am fairly new to developing for iOS. I have a fully functioning program written in Swift and the UI was created in the scene builder on Xcode. I created an app for my work to simplify closing out the registers and other financial aspects. The app is complete and works perfectly, but was designed on the iPhoneX. The problem is that only a few of the employees have an iPhoneX, but they all have some kind of iPhone. I have tried setting up constraints but it never works. Ive tried scaling restraints and position restraints but I can't get the layout to look right on any other phone, and when I add the constraints it affects the view on the iPhoneX as well and doesn't look good on any iPhone. I need help getting this to work on all iPhones. I would like it to look and act the exact same regardless of the size of the phone, basically just scaled down. There are a lot of things on the screen and I can't figure out how to do this. Please help!!!
I have been working on this for a long time and I really need help. Please let me know if I need to clarify anything. I have posted links to some pictures of my UI so you have an idea of whats going on.
Constraints I tried adding, although I have played around with some other options.
Here's what it looks like on the iPhoneX, this is how I want it to look.
What it looks like on iPhoneSE (with constraints).
One thing I noticed in your Xcode project that none of your features are in UIView. Without it, it will be quite challenging and somewhat always different results. In theory, if you use AutoLayout features correctly it should work without UIView, but they make life so much easier. This is something I learned the hard way at the beginning of my iOS development. First set up your UIViews without any content inside it, give them some background colour to differentiate, once they are working on all devices. You can pin your features to superviews with no difficulty.
Since you have a repetitive features, you could also consider using Stack Views. You don't have complicated features, so as long as AutoLayout is set up correctly you should have no problems seeing it ok on all devices
I am designing my first iOS app at the moment. Every view of the app needs to be available in portrait aswell landscape. Also all iPhone versions need to be supporrted.
As someone always working with windows and never owning any apple product it was a pain in the ass getting started but slowly things seem to work out. But before the whole design approach takes a wrong direction I rather ask here:
What I want to do is have constraints based on multipliers as much
as possible.
I will try to avoid constant values as much as possible since from
my understanding they arent scaling. I read that you can change them
programmatically but if possible I want to stay in the designer for
frontend related stuff.
Since the multiplier cant be changed based on the current size class
I plan to have a set of constraints for all kind of portrait size
classes and another one for landscape (using installed feature of
xcode)
To up and downscale labels and textviews I want to have a height
constraint to the superview with a very tiny multiplier (will
probably be complicated to keep all textviews the same height when
there are different parents across them?)
In theory this should produce views which up and downscale well and look the same on all kind of iPhone screens. Now I am curious what more experienced iOS designers think about my "plan":
Do you have different approaches?
Is there any book/tutorial/page you can suggest?
Thanks in advance! :)
I've been struggling with this issue for a while and hours of research and experimentation didn't produce any acceptable results.
I have a login screen that contains a lot of UI elements. The view looks great on iphone 7 and 6 variations but when I test it on SE or 4S the constraints fail to position the elements so they fit nicely on their tiny screen. Simply there is not enough room. I read that I must support all screen sizes but at this point I am not sure how can I get all the ui elements to fit in the smaller screens.
I watched hours of youtube videos and tried all possible ways including a vertical stack view but no matter what I try, it either looks good on 7 and 6 but terrible on SE/4S or vice versa (good on SE/4S but way too much white space on 7/6).
At this point I am not sure what else I can do. I know it is not possible to design a UI just for a specific screen size and vary for traits is not what I need because I only intend to support vertical orientation.
Any help or suggestion will be greatly appreciated.
As you have said in your own comment, you can restrict the device sizes indirectly by restricting the iOS version. However that is not a good solution: If you are creating the app for commercial reasons that will unnecessarily restrict your market (there are a lot of 4S users out there); If you are learning app development, now is a good time to work out how to manage GUI layout problems properly (there will always be a wide range of display sizes to cope with).
There are several tools available to assist:
Auto Layout
As others have said in comments, Auto Layout can help a lot. Don't just use it to position things though, but also to resize them to make best use of the available space.
Understanding Auto Layout (Apple)
Size Classes
Size Classes allow you to use different constraints and turn on or off controls depending on the general size and orientation of your user's device. For example, where space is restricted you could hide individual controls and instead display a single control to take the user to them elsewhere (another view or a popover for example).
Size-Class-Specific Layout (Apple)
Scroll Views
You can make part or all of your GUI a scroll view that on larger devices will show all the controls whilst on smaller devices initially show just the top ones but still give your users access to the others (don't forget to flash the scroll bars when the view first appears to show them that there is more to see though).
Separate Storyboards
Although you have not mentioned iPad support, you can also specify completely separate storyboards to help layout universal apps.
See this SO answer and it's linked reference for details.
I'm taking a few first steps in Xamarin for iOS and having a very hard time figuring out how to create a view that is resolution independent.
I have a single textbox in the view, aligned so that its edges meet the edge of a iPhone 6S. When I change the View to a Iphone 4S the edges of the textbox are outside of the view.
I have tried to drag the constrains to the edges, pretty much clicked every button and tried to find some example of how to make it so the view resizes to fit the viewport but I cannot make it work. Ive also fiddled with the different modes of the View (Aspect Fit, Scale to Fill, etc) but that makes no difference.
I would love to se a simple example of how to create a resolution independent or multi-resolution form or view that is displayed similarily no matter the screen resolution on the iPhone.
Having gone through very much the same pain as you, my recommendation is two-fold:
Have a look at the Cirrious FluentLayouts package, which you can
get from NuGet.
A tremendous help in simplifying various issues with auto-layout, especially if you decide (like I did) to just give up on the GUI layout tools and go with a full programmatic approach.
It will allow constructs like:
this.AddConstraints
(
_navBar.AtTopOf(this, UIApplication.SharedApplication.StatusBarFrame.Height),
_navBar.AtLeftOf(this),
_navBar.WithSameWidth(this),
_navBar.Height().EqualTo(Hamburger.HamburgerHeight),
_scrollView.Below(_navBar),
_scrollView.AtLeftOf(this),
_scrollView.WithSameWidth(this),
_scrollView.Bottom().EqualTo().TopOf(_pageControl),
_pageControl.Above(_toolBar),
_pageControl.AtLeftOf(this),
_pageControl.WithSameWidth(this),
_pageControl.Height().EqualTo(pageControlHeight),
_toolBar.Above(_button),
_toolBar.AtLeftOf(this),
_toolBar.WithSameWidth(this),
_toolBar.Height().EqualTo(toolHeight),
_button.AtRightOf(this),
_button.AtBottomOf(this),
_button.Height().EqualTo(buttonHeight)
);
Be aware that since... iOS 8 I believe? ... you now need to use a
LaunchScreen.xib to have your app correctly pick up device
resolution which will then be used by auto-layout.
This was the one area I still needed to use the graphical layout tool for - just once, happy to say.