如何实现所需的横向和纵向布局 (swift)

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.

中的 collection 个视图

标题StackView
dateStackView
iconStackView
按钮StackView

设置

其中每一个都应该是 UIStackView。

titleStackView 将是垂直的，因为 UILabel 在 UITextField 之上，除了 buttonStackView 将是水平的，其他都一样。（在UIStackView上有一个轴属性）。

接下来你需要另一个 UIStackView。这将包含 dateComponent 和 iconStackView。我将此堆栈视图称为 mainStackView.

最后，您需要另一个堆栈视图 (outerStackView)，它是垂直的并且包含 titleStackView、mainStackView 和 buttonStackView.

开关

现在，当方向在横向和纵向之间变化时，您只需更新 mainStackView 上的 axis 属性。如果方向设置为纵向...

mainStackView.axis = .vertical

如果方向设置为横向...

mainStackView.axis = .horizontal

您只需要三行代码即可实际进行更改，而不是看到一个 UILayoutConstraint！（好吧，4 将 outerStackView 固定到屏幕边缘，仅此而已）。

如何实现所需的横向和纵向布局 (swift)

How to achieve the desired landscape and portrait layout (swift)

xcode

ios

landscape-portrait

autolayout

swift

设置

开关