如何使圖像視圖與iOS中的自動佈局成比例增長？

Question

我正試圖在界面生成器中使用最新的XCode設計界面，並定位最新的iOS。我正在使用設備的「推測」模擬。

所以這就是我想要的，我有三個圖像視圖，每個圖像視圖都有一個放置在屏幕上的元素，如下圖所示。我一直在嘗試使用自動佈局兩天，試圖實現圖像視圖在設備更改時按比例增長 - 從小屏幕到iPad大小的屏幕。我無法讓它工作。我怎樣才能做到這一點？我是否需要用一些堆疊視圖，普通視圖來包裝它...我需要什麼樣的約束條件？應用程序標題和按鈕之間的距離應保持與圖像上的距離一致，從而導致圖像視圖按比例增長。

和

如果這是可能的，我應該使用iPad的一組圖像和iPhone一組？或者我應該只有一張非常大的圖像，並且圖像視圖大小基於圖像視圖大小？

Answer 1

添加到第一個答案，最好的方法是在故事板中設置縱橫比。按Ctrl +拖動圖像視圖到超級視圖，就像通常添加自動佈局約束一樣，並選擇相等的寬度和/或相等的高度（對您的項目更合理）。

此時，您的圖片將與整個視圖的大小相同。你可能不希望這樣。在右側工具欄的大小檢查器中，查找自動佈局約束。您可以修改乘數以按比例調整圖像的大小。如果將其設置爲0.2，則圖像的高度和/或寬度將爲超級視圖高度和/或寬度的20％。 This tutorial（部件1 & 2）將幫助你。

對於第二個問題，如果將圖像添加到默認的Assets.xcassets文件夾中，則可以爲不同的設備添加不同大小的圖像。不幸的是，我不知道這個教程是:(

Answer 2

您可以在任何視圖設置的寬高比約束。因此，您可以根據視圖寬度進行寬度計算，然後使用寬高比使其適合高度。

Answer 3

您可以使用UIStackView，支持自動佈局。

這樣你imageViews將增長/收縮根據屏幕大小。而且你可以添加更多的imageViews到。堆棧更容易

下面是代碼：

class SomeViewController: UIViewController { 


// MARK: Properties 

let stack = UIStackView() 
let imageView1 = UIImageView() 
let imageView2 = UIImageView() 
let imageView3 = UIImageView() 
let button = UIButton() 





override func viewDidLoad() { 
    super.viewDidLoad() 

    stack.axis = .Horizontal // can omit, default is .Horizontal 
    stack.alignment = .Center 
    stack.distribution = .Fill // can omit, default is .Fill 
    stack.spacing = 20 // spacing between image views 
    view.addSubview(stack) 

    imageView1.backgroundColor = UIColor.greenColor().colorWithAlphaComponent(0.36) 
    imageView2.backgroundColor = UIColor.redColor().colorWithAlphaComponent(0.5) 
    imageView3.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.1) 

    button.setTitle("Boom", forState: .Normal) 
    button.backgroundColor = UIColor.blackColor() 
    view.addSubview(button) 

    stack.addArrangedSubview(imageView1) 
    stack.addArrangedSubview(imageView2) 
    stack.addArrangedSubview(imageView3) 


    // Constraints for stack 

    stack.translatesAutoresizingMaskIntoConstraints = false 
    stack.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 20).active = true 
    stack.leadingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor).active = true 
    stack.trailingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.trailingAnchor).active = true 

    // Constraints for imageView1 

    imageView1.translatesAutoresizingMaskIntoConstraints = false 
    imageView1.widthAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 0.8).active = true // to make imageView1 smaller than the red one 
    imageView1.heightAnchor.constraintEqualToAnchor(imageView1.widthAnchor, multiplier: 1.5).active = true 

    // Constraints for imageView2 

    imageView2.translatesAutoresizingMaskIntoConstraints = false 
    imageView2.heightAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 1.5).active = true 

    // Constraints for imageView3 

    imageView3.translatesAutoresizingMaskIntoConstraints = false 
    imageView3.widthAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 0.65).active = true // to make imageView3 smaller than the red one 
    imageView3.heightAnchor.constraintEqualToAnchor(imageView3.widthAnchor, multiplier: 1.5).active = true 

    // Constraints for button 

    button.translatesAutoresizingMaskIntoConstraints = false 
    button.topAnchor.constraintEqualToAnchor(stack.bottomAnchor, constant: 50).active = true // spacing from the stack 
    button.leadingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor).active = true 
    button.trailingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.trailingAnchor).active = true 

}}