what is a good way or a good practice in setting constraints in ios that design in fine in ipad devices

问题

I have created an app which is working fine in iphone devices , i have tried auto layout and constraints so that it would work same on iphone devices on the ipad , but the problem is its okay to look in iphone but in ipad devices distance seems too wide . for example if i have set constraints distance which is 8 its okay in iphone devices but its seems to wide in ipad device. also is there a way we can image or buttons or components would resize bigger so that will fit to the ipad? is there a good practice or the best way in setting the design that would also work on ipad. Thank You . as you have seen in the image below the distance of those numbers and possitions is how its looks on i phone. the screenshot was take in an ipad . that is how its looks on an ipad . i manage to sets contraints to button start , skip , and asnwer but i wanna resize all to ipad including the questions and the rest of the buttons with numbers as you have seen in the image i want make it big and make it equal to center.

回答1:

To simplify things, Apple recommends a new paradigm. Rather than considering your layout in terms of the many device types, resolutions, multitasking modes, and device orientation, you should focus instead on adjusting your layout to two types of widths (called compact and regular) and two types of heights (also compact and regular). These distinctions are called size classes. You can then use these size classes to define or adjust your layout.

Please refer.

回答2:

You can make use of AspectRatio for setting constraints using storyBoard

Static distance value 8 is okay for iPhone but very less in iPad , So to solve you need to provide distance according to screen Size

Steps

1) Drag a View in ViewController and set it Horizontally & vertically entered in container

2) Set Equal Width and Height with screen Size (ViewController)

3) Now select the Height Parameter and check for the multiplier its set to 1

4) Vary the multiplier value as per requirement

Now output will be same as on iPhone and iPad with equal looks

Spacing

1) Drag a Label to set spacing and Add it centre horizontaly with the View Added before

2) Set Top Space to View added for label as shown Below

3) Now select the Top Constraint added and vary its multiplier again to set spacing between them according to viewScreen size

Selecting Top Constraint looks like with multiplier 1

After Varying Multiplier / Label Moved Down

Output

回答3:

Let's say in Storyboards you have a skipButton pinned to the bottom of the screen (your not changing the bottom pin so I didn't include it), it's 44 points in height, is 8 points from the left side of the screen, and is is 8 points from the right side of the screen. That's fine for iPhones but on the iPad you want the button to be 50 points in height, 100 from the left side of the screen, and 100 points from the right side of the screen.

Inside the view controller you need to make an outlet for those constraints of type NSLayoutConstraint and there is a constant property on it that you can use to change the constant that you set inside Storyboard (see code example below).

In case you don't know how to make the constraint connection all you do is select the constraint inside Storyboard, open the Assistant Editor, then cntrl+drag the constraint to the view controller and name it whatever you want to name it. It's the same exact process as if you was connecting a button or label or imageView the only difference is your using a constraint.

Every app has a property where you can find out which type of device is currently being used: UIDevice.current.userInterfaceIdiom Apple -Type of Device Being Used

Inside viewDidLoad you find out what type of device the user is using and then you change the constraints to whatever size is suitable to you for iPads:

// skipButton is type UIButton (look at what's next to the name skipButton). You are not changing the button you are changing the constraint on the button.
@IBOutlet weak fileprivate var skipButton: UIButton! // the main focus here are the constraints for the saveButton. I just added this here to show that the saveButton is inside this vc. Your focus is changing the below constraints that help position and size the saveButton and not the saveButton itself

// ***VERY IMPORTANT*** YOU HAVE TO CONNECT THESE CONSTRAINTS via STORYBOARD (look at the 3 pics below). You do it the same way you would have connected the skipButton above. The difference is you grab the constraint that is on skipButton that you made in storyboard. The skipButton is already connected. These are the constraints that are on it and are completely different from the skipButton itself.
// the constraints are of type NSLayoutConstraint (look at the name next to skipButtonLeadingConstraint). This is what you want to change. This and the UIButton above are two completely different things
@IBOutlet weak var skipButtonLeadingConstraint: NSLayoutConstraint! // in Storyboard left constraint is set at 8 points from left side of vc
@IBOutlet weak var skipButtonTrailingConstraint: NSLayoutConstraint! // in Storyboard right constraint is set at 8 points from right side of vc
@IBOutlet weak var skipButtonHeightConstraint: NSLayoutConstraint! // in Storyboard height is set at 44 points

override func viewDidLoad() {
    super.viewDidLoad()

    // if the user is using an iPad then change the constraints to the below sizes which would make the saveButton's width smaller and also it's height taller. If the user is using anything other then an iPad then it will automatically use the Storyboard constraints and automatically ignore the below code
    if UIDevice.current.userInterfaceIdiom == .pad{

        // when using an iPad left constraint is now set at 100 points from left side of vc
        skipButtonLeadingConstraint.constant = 100

        // when using an iPad right constraint is now set at 100 points from right side of vc
        skipButtonTrailingConstraint.constant = 100

        // when using an iPad height constraint is now set at 50 points high
        skipButtonHeightConstraint.constant = 50
    }
}

Below is how to add the skipButtonLeadingConstraint in Storyboard. You can grab it inside the Document Outline under the Skip Button's Constraints (it's highlighted in blue)

1st select the constraint in the Document Outline:

2nd drag the connection to the view controller and name it skipButtonLeadingConstraint:

3rd complete the connection:

来源：https://stackoverflow.com/questions/50110815/what-is-a-good-way-or-a-good-practice-in-setting-constraints-in-ios-that-design

标签

ios

swift

autolayout

constraints