如何實現所需的風景和肖像布局（快速）

Question

我正在嘗試通過支持橫向部分和縱向來為我的應用程序調整功能大小。 我毫不費力地實現了這幅肖像畫的布局：

誰旋轉我的模擬器，一切都會變得一團糟。 我試圖在旋轉改變時將所有組件的框架設置為所需的值。 但是，我得到的是一團糟，並且組件沒有放置在我想要的位置。 關於如何實現縱向和橫向布局的任何建議？ 我想實現這種景觀布局：

這是我在視圖控制器中的代碼：

class EditViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
@IBOutlet weak var hideKeyboardOutlet: UIButton!
@IBOutlet weak var iconPicker: UIPickerView!
@IBOutlet weak var resolutionTitleDeadLabel: UILabel!
@IBOutlet weak var achievingDateDeadLabel: UILabel!
@IBOutlet weak var chooseAnIconDeadLabel: UILabel!
@IBOutlet weak var cancelButtonOutlet: UIButton!
@IBOutlet weak var saveButtonOutlet: UIButton!


@IBOutlet weak var resolutionTitle: UITextField!

@IBOutlet weak var datePicker: UIDatePicker!

let kComponentCount: Int = 1
let kIconComponent: Int = 0
var iconStruct: Icons?

override func viewDidLoad() {
    super.viewDidLoad()
    iconStruct = Icons()
    updateInterface()
}

@IBAction func hideKeyboard(sender: AnyObject) {
    resolutionTitle.resignFirstResponder()
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

override func supportedInterfaceOrientations() -> Int {
    return Int(UIInterfaceOrientationMask.All.rawValue)
}

override func didRotateFromInterfaceOrientation(fromInterfaceOrientation: UIInterfaceOrientation) {
    updateInterface()
}


@IBAction func saveButton(sender: AnyObject) {
    var dateFormatter = NSDateFormatter()
    dateFormatter.dateFormat = "dd-MM-yyyy"
    var strDate = dateFormatter.stringFromDate(datePicker.date)
    NSLog("\(datePicker.date)")
    var currentDate = dateFormatter.stringFromDate(NSDate())
    var pickedIcon: String = iconStruct!.urlImageStrings[iconPicker.selectedRowInComponent(kIconComponent)]

    var newResolution = ["name":resolutionTitle.text,"achievingDate":strDate,"startingDate":"\(currentDate)","icon":"\(pickedIcon)","isAchieved":"N"] as Dictionary<String,String>
    //if the resolution title is not empty...
    if(!resolutionTitle.text.isEmpty){
        //... create new resolution, it and save it to the file.
        var destinationController = (presentingViewController as! UINavigationController).viewControllers[0] as! MasterViewController
        destinationController.resolutions.insert(newResolution, atIndex: 0)
        destinationController.notifyTableViewForNewInsertion()
        destinationController.saveDateToFile()
        self.dismissViewControllerAnimated(true, completion: {})
    }else{
        // Notify the user that the title text field is empty
        let alertController = UIAlertController(title: "Flower Selection", message: "Cannot create a resolution with empty title!", preferredStyle: .Alert)
        let defaultAction = UIAlertAction(title: "Ok", style: UIAlertActionStyle.Cancel, handler: nil)

        alertController.addAction(defaultAction)
        presentViewController(alertController, animated: true, completion: nil)
    }


}
@IBAction func cancelButton(sender: AnyObject) {
    self.dismissViewControllerAnimated(true, completion: {})
}

func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
    return kComponentCount
}


func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return iconStruct!.length!
}

func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent   component: Int, reusingView view: UIView!) -> UIView {
    let chosenImage: UIImageView = UIImageView(image: iconStruct?.getImageAtIndex(index: row))
    let workaroundImageView: UIImageView = UIImageView(frame: chosenImage.frame)
    workaroundImageView.backgroundColor = UIColor(patternImage: chosenImage.image!)
    return workaroundImageView
}

func pickerView(pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
    return 95
}


func updateInterface(){
    if interfaceOrientation == UIInterfaceOrientation.Portrait || interfaceOrientation == UIInterfaceOrientation.PortraitUpsideDown{
        self.hideKeyboardOutlet.frame = CGRectMake(0, 54, 375, 667)
        self.resolutionTitleDeadLabel.frame = CGRectMake(100, 39, 174, 21)
        self.resolutionTitle.frame = CGRectMake(43, 68, 289, 30)
        self.achievingDateDeadLabel.frame = CGRectMake(101, 106, 174, 21)
        self.datePicker.frame = CGRectMake(27, 135, 320, 162)
        self.chooseAnIconDeadLabel.frame = CGRectMake(101, 315, 181, 21)
        self.iconPicker.frame = CGRectMake(57,344,262,150)
        self.cancelButtonOutlet.frame = CGRectMake(86, 516, 62, 45)
        self.saveButtonOutlet.frame = CGRectMake(213, 516, 62, 45)
        NSLog("Portret")
    }else{
        self.hideKeyboardOutlet.frame = CGRectMake(0,38, 667,339)
        self.resolutionTitleDeadLabel.frame = CGRectMake(100,39,446,21)
        self.resolutionTitle.frame = CGRectMake(43,68,581,30)
        self.achievingDateDeadLabel.frame = CGRectMake(115,106,144,21)
        self.datePicker.frame = CGRectMake(43,135,255,162)
        self.chooseAnIconDeadLabel.frame = CGRectMake(391,106,181,21)
        self.iconPicker.frame = CGRectMake(352,135,258,187)
        self.cancelButtonOutlet.frame = CGRectMake(147,322,62,45)
        self.saveButtonOutlet.frame = CGRectMake(450,322,62,45)
        NSLog("Landscape")
    }

}


}

Answer 1

最簡單的方法（以國家英里為單位）是使用UIStackView （或嵌套的UIStackViews ）。

您將在視圖中擁有多個“組件”，其中每個組件都是UIStackView內視圖的UIStackView 。

1. titleStackView
2. dateStackView
3. iconStackView
4. buttonStackView

設置

每個都應該是一個UIStackView 。

titleStackView將是垂直的，因為UILabel在UITextField上方，其他都一樣，除了buttonStackView將是水平的。 （ UIStackView上有一個axis屬性）。

接下來，您需要另一個UIStackView 。 這將包含dateComponent和iconStackView 。 我將這個堆棧視圖稱為mainStackView 。

最后，您需要另一個垂直的堆棧視圖（ outerStackView ），其中包含titleStackView ， mainStackView和buttonStackView 。

開關

現在，當方向在橫向和縱向之間改變時，您要做的就是更新mainStackView上的axis屬性。 如果方向是縱向設置...

mainStackView.axis = .vertical

如果方向是橫向設置...

mainStackView.axis = .horizontal

您只需要三行代碼即可實際進行更改，而看不到一個UILayoutConstraint ！ （好吧，4將outerStackView到屏幕的邊緣，僅此而已）。