不同 UI 不同 iPAD 大小

Question

我们的项目针对所有 iPAD 运行，我们遇到了一个问题，例如我们有 8 个按钮垂直放置在屏幕上，并添加了垂直间距约束，它们在 [=14] 上看起来很好=] 9.7 英寸，但它们在 iPAD 12.9 上看起来真的很大，所以问题是，有没有什么好的方法可以实际使用屏幕 space 来获得更好的效果，例如添加额外的 [=21] =]查看是否为iPAD12.9。我已经研究过使用尺寸 classes，但我相信所有 iPADs 都有一个尺寸 class，我想要的是是否有一种方法可以使用不同的 [=21] =] 不同的 iPAD 尺寸使用界面生成器

Answer 1

假设您的笔尖是 Foo_pro.xib 和 Foo_ipad.xib。

@implementation Util

+(BOOL) isIpad_1024
{
    if ([UIScreen mainScreen].bounds.size.height == 1024) {
        return  YES;
    }
    return NO;
}

+(BOOL) isIpadPro_1366
{
    if ([UIScreen mainScreen].bounds.size.height == 1366) {
        return  YES;
    }
    return NO;
}

+(NSString *)convertXib:(NSString *)nibName {
    if([Util isiPadPro_1366]) {
        return [NSString stringWithFormat:@"%@_pro", nibName];
    } else {
        return [NSString stringWithFormat:@"%@_ipad", nibName];
    }
}

Foo *foo = [[Foo alloc] initWithNibName:[Util convertXib:@"Foo"] bundle:nil]

Answer 2

我想象你的情况是这个特定的 ViewController 有很多共享的东西，（比如一个公共的顶部栏，或者一个导航栏）但是中间的内容似乎不合适正确。

在这种情况下，建议使用自定义 UIView，它会根据当前设备的高度或宽度加载不同的 xib 文件。

这里的重点是，你其实只需要一个UIView subclass。

为此，您还可以使用@IBDesignable 在界面生成器中实时预览它。

要实现这一点，您必须执行以下步骤。

1) 根据大小为每个 "UIViews" 创建一个 .xib 文件。

2) 创建一个 UIView 子class.

3) 将接口构建器的属性挂接到此子class。请注意，您必须对每个要使用的 xib 文件重复此过程。重要提示：尽管它们是不同的 xib，但它们都连接到相同的 class.

4) 像这样将创建的class标记为@IBDesignable。

@IBDesignable class CustomView: UIView {
    ...
}

5) 在您的 class 中添加以下代码，它将根据您选择的任何条件加载不同的 xib。

////////// View Logic //////////

// Our custom view from the XIB file
var view: UIView!

func xibSetup() {
    view = loadViewFromNib()

    // use bounds not frame or it'll be offset
    view.frame = bounds

    // Make the view stretch with containing view
    view.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]
    // Adding custom subview on top of our view (over any custom drawing > see note below)
    addSubview(view)
}

func setup()
{
    // Extra setup goes here

}

func loadViewFromNib() -> UIView {

    let bundle = Bundle(for: type(of: self))

    let nib : UINib

    let screenRect : CGRect =  UIScreen.main.bounds;

    // Use a different Nib based on the current screen height

    if screenRect.size.height == 1024 {
        // iPad Air & Pro

        nib = UINib(nibName: "iPadNormal", bundle: bundle)
    }
    else if screenRect.size.height == 1366 {
        // Large iPad Pro

        nib = UINib(nibName: "iPadLarge", bundle: bundle)
    }
    else {
        // Fall back

        nib = UINib(nibName: "iPadFallback", bundle: bundle)
    }

    let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView

    return view
}


override init(frame: CGRect) {
    // 1. setup any properties here

    // 2. call super.init(frame:)
    super.init(frame: frame)

    // 3. Setup view from .xib file
    xibSetup()

    // 4. Other Setup
    setup()
}

required init?(coder aDecoder: NSCoder) {
    // 1. setup any properties here

    // 2. call super.init(coder:)
    super.init(coder: aDecoder)

    // 3. Setup view from .xib file
    xibSetup()  

    // 4. Other Setup
    setup()
}


////////////////

重要提示：

仅当自定义视图的内容相同或变化非常小（布局无关紧要）时才推荐使用此方法。如果内容在大小之间变化很大（比如你实际上想显示不同的东西）那么你应该用你的共享逻辑创建一个 "BaseViewController"，并为每个 iPad 大小创建一个 subclass，所以他们每个人都有自己的 ViewController + Interface Builder Screen。然后只需加载所需的屏幕，就好像它是一个完全不同的屏幕一样。

Answer 3

按照我下面的建议设置约束条件看看我为你创建的Sample。

给出您的按钮纵横比。
给宽度等于父视图的宽度。
在容器中添加约束水平居中和在容器中垂直居中。
Select 您的 Button，然后转到尺寸检查器并设置宽度的乘数（例如 0.3 或 0.4 等）。
然后为 "align center X to.." 设置乘数（如果您希望您的按钮位于中心左侧，则将乘数设置为低于 1，例如 0.8、0.7、0.5 等如果您希望您的按钮位于中心右侧然后中心将乘数值设置为大于 1，如 1.2 等）。
像第 5 步一样设置 "Align center y to.." 的乘数值。

全部完成..只需运行并检查。

希望对您有所帮助。

Answer 4

试试这个

1.Remove 限制所有按钮

将所有按钮添加到堆栈视图中
对堆栈视图设置垂直约束
为 stackview 按钮设置相同的高度和相同的宽度
如果您为任何按钮设置高度，请移除高度
如果您希望它在不同设备上运行，请不要为 stackview 设置高度。

Answer 5

你可以使用这个

所有按钮都嵌入到视图中并将其约束设置为超级视图。

确保为其添加纵横比限制。

Select所有按钮并添加约束

等宽，等高，纵横比

Answer 6

您可以为此使用自动版式。您可以将宽高比基本高度分配给按钮。请记住，可以选择将比率关系设置为 'equal to' 或 'less than equal to.' 您可以使用这些而不是给出确切的约束。所以这会导致按钮适应高度。然后在代码中你可以简单地检查是否有足够的 space 剩余来绘制一个额外的 uiview 。这也将解决 'Looking really big' 问题。

在此处查看 IB 屏幕截图以查看我指的是什么： Click on 'Relation' to see these settings

不同 UI 不同 iPAD 大小

Different UI for different iPAD sizes

ipad

ios

ipad-3

xcode8