Search code examples
iosswiftlayoutdevice

Swift layout per device

What is the best manner to create a layout per device?

Right now i am working with constraints but i cant get it right. The width/height from my so called gameView is to small to fit the puzzle pieces.

This is the right width/height to fit the puzzle pieces for the iPhone 11

iPhone 11

And this is the view on the iPhone 8 iPhone 8

Pieces iPhone11 with puzzle pieces iPhone8 with puzzle pieces

My solution to get it all fit is to set the frame sizes per device But i don't know if it is the right solution.. I can imagine that there are better solutions..

      if UIDevice.current.deviceCategory() == .iPhone8 {
        turnOffConstraints()

        topView.frame = CGRect(x: 0, y: 0, width: topView.frame.width, height: 70)
        categoryLabel.frame = CGRect(x: 88, y: 23, width: 199, height: 35)
        totalMovesSV.frame = CGRect(x: 308, y: 78, width: 50.5, height: 44)
        timerSV.frame = CGRect(x: 20, y: 78, width: 50.5, height: 44)

        gameView.frame = CGRect(x: 20, y: 130, width: 335, height: 335)
        hintSV.frame = CGRect(x: 161, y: 473, width: 52, height: 80.5)

        backButtonSV.frame = CGRect(x: 52, y: 8, width: 52, height: 80.5)
        showOriginalButtonSV.frame = CGRect(x: 161, y: 8, width: 52, height: 80.5)
        levelsButtonSV.frame = CGRect(x: 275, y: 8, width: 52, height: 80.5)

        bottomView.frame = CGRect(x: 0, y: 567, width: topView.frame.width, height: 100)
    }

iphone8 pieces fits The App is working and everything fits like i wanted but now my debugger is full with this kind of messages:

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. 2020-06-12 15:24:55.282095+0200 Sliding Game[35445:2539475] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)

I am curious what the right approach is..

Solution

  • You give constant values to your all components.Its maybe looking good some devices but It doesnt mean looks fine in all.Lets say yout giving 160px height for a component. It will look ok on iPhone XsMax (height is 896px) almost One fifth of the screen. But when you run in iPhone 5, SE..(height is 568px) almost one fourth of the screen.

    Giving constant value can occur intertwine of components. This is what Debug screen want to say.

    You can estimate components to the screen or make anchor each other for avoiding it