CODEWITHSUNDEEP
iosswiftxcodelayoutconstraints
user3795616
user3795616

Reputation:

How to build responsive layout in Xcode (not auto layout)?

I am making chat app and have create persona component which is implemented in view using Container view. I want it to have maximum width so on iPhone it will be full-width but on iPad in centre with fixed width. Also on iPhone in landscape orientation it should be scrollable (I already use Scroll view but exactly in landscape orientation it behaves weirdly).

Create persona component

This is how create persona component looks like. It had all elements in View but Xcode told that their are errors. Now it has all elements separate, they have width <= 350 and trailing and leading margins >= 0 – and all this works well but when I insert this component in view (it looks like this):

It looks like this

...using Container view wrapped with Scroll view it behaves weirdly. I gave Container view constraints at top, bottom, left and right all equal to 0 but Xcode show warning that y is not equal to expected. It can't make Container view as large as Scroll view. Also I want to make it scrollable so when screen height is not enough to show whole form you can scroll it. But now when you rotate screen to landscape view size of Container view also changes so Scroll view is not scrollable. Any ideas?

Upvotes: 0

Views: 2311

Answers (1)

David Pasztor
David Pasztor

Reputation: 54726

You can either do this in Storyboard by selecting the Attributes inspector of the element you want to customise based on the screen size and clicking on the + sign on the left of the property you want to customise. However, this only provides very limited options, so you are better off doing this either in code and checking the screen size programatically or using different Storyboards for both iPad and iPhone.

To use different storyboards, you can do the following:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

    let screenWidth = UIScreen.main.bounds.width
    let orientation = UIDevice.current.orientation

    if screenWidth > x { //use iPad storyboard
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let vc = storyboard.instantiateViewController(withIdentifier: "identifier")
        self.window.rootViewController = vc
    } else {
                    let storyboard = UIStoryboard(name: "OtherStoryboard", bundle: nil)
        let vc = storyboard.instantiateViewController(withIdentifier: "otherIdentifier")
        self.window.rootViewController = vc
    }
...
}

Upvotes: 1

Related Questions