为什么这些按钮在大屏幕设备中无法正确显示？ （迅速）

Question

我使用iPhone SE视图在Xcode中布置了我的应用程序。按钮等都在测试它们应该如何。

然而，当我在大屏幕上测试时，即iPhone 7会发生一些奇怪的事情。

1）即使我将约束设置为边距为20px，按钮也会拥抱右侧

其次，我应用于我的按钮的渐变似乎在此实例中在按钮上停止3/4：

在每个按钮实例中调用的代码相同：

let orangeGradient = CAGradientLayer().orangeButtonColor()
    orangeGradient.frame = self.joinCommunityButton.bounds
    self.joinCommunityButton.layer.insertSublayer(orangeGradient, at: 0)

extension CAGradientLayer {

func bespokeColor() -> CAGradientLayer {

let topColor = UIColor(red: (46/255.0), green: (63/255.0),blue: (81/255.0), alpha: 1)
let bottomColor = UIColor(red: (22/255.0), green: (31/255.0),blue: (41/255.0), alpha: 1)
let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
let gradientLocations: [Float] = [0.0, 1.0]

let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations as [NSNumber]?

return gradientLayer

}

func orangeButtonColor() -> CAGradientLayer {

    let topColor = UIColor(red: (211/255.0), green: (115/255.0),blue: (28/255.0), alpha: 1)
    let bottomColor = UIColor(red: (171/255.0), green: (80/255.0),blue: (14/255.0), alpha: 1)
    let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
    let gradientLocations: [Float] = [0.0, 1.0]

    let gradientLayer: CAGradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations as [NSNumber]?

    return gradientLayer

}

func purpleButtonColor() -> CAGradientLayer {

    let topColor = UIColor(red: (112/255.0), green: (41/255.0),blue: (183/255.0), alpha: 1)
    let bottomColor = UIColor(red: (85/255.0), green: (19/255.0),blue: (159/255.0), alpha: 1)
    let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
    let gradientLocations: [Float] = [0.0, 1.0]

    let gradientLayer: CAGradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations as [NSNumber]?

    return gradientLayer

}

func greenButtonColor() -> CAGradientLayer {

    let topColor = UIColor(red: (35/255.0), green: (193/255.0),blue: (67/255.0), alpha: 1)
    let bottomColor = UIColor(red: (31/255.0), green: (148/255.0),blue: (53/255.0), alpha: 1)
    let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]
    let gradientLocations: [Float] = [0.0, 1.0]

    let gradientLayer: CAGradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations as [NSNumber]?

    return gradientLayer

}


}

以下是我认为自动布局设置的屏幕截图：

Answer 1

在viewDidLoad中，autoLayout尚未生效，因此您的按钮bounds不是特定于设备的。

放

orangeGradient.frame = self.joinCommunityButton.bounds或viewDidLayoutSubviews

中的

viewDidAppear

如果您使用UIView <<>确保添加渐变或执行与viewDidLayoutSubviews框架相关的任务或 autoLayout之后 /强>

此外，

请勿在{{1​​}}或CAGradientLayer()函数中初始化viewDidAppear，因为它们会被多次调用，并会不断向viewDidLayoutSubviews添加图层，你应该只改变两种方法中的界限。

Answer 2

请确保您在界面构建器中使用AutoLayout。如果您正在使用，请确保它们也留下了边距。