在视图转换(旋转)后保持自动布局并调整大小(到边界)

时间:2016-11-02 02:10:50

标签: ios swift uiview autolayout core-graphics

我在视图的一角有一个带圆形子视图的视图。 我通过autolayout定义了圆圈的位置。

我需要旋转并调整基本视图的大小。

问题在于,如果我旋转然后调整视图大小,圆圈的位置将不会是我期望的位置。

如何在这种情况下保持布局?


没有调整大小或旋转。

enter image description here


旋转并调整大小

enter image description here

import UIKit

class ExampleController: UIViewController {

// UI Appearance

private let buttonWidth: CGFloat = 40
private var themeColor: UIColor = UIColor.magentaColor()



// Resizing and rotating view

let myView: UIView = {
    let v = UIView()
    v.layer.borderWidth = 1
    v.layer.borderColor = UIColor.magentaColor().CGColor

    v.frame = CGRectMake(100, 150, 150, 225)

    return v
}()

lazy var cornerButton: UIView = {
    let b = UIView()

    b.layer.cornerRadius = self.buttonWidth / 2
    b.layer.borderWidth  = 1
    b.layer.borderColor  = self.themeColor.CGColor

    return b
}()



// Control 

@IBOutlet weak var angleSlider: UISlider!
@IBOutlet weak var widthSlider: UISlider!




override func viewDidLoad() {
    super.viewDidLoad()

    setupSubviews()
}


func setupSubviews() {
    view.addSubview(myView)
    view.addSubview(angleSlider)


    // Angle Slider
    angleSlider.minimumValue = 0
    angleSlider.maximumValue = 360
    angleSlider.value        = 0

    // Width Slider
    widthSlider.maximumValue = Float(view!.frame.width)
    widthSlider.value        = Float(myView.frame.width)

    // Corner Button
    myView.addSubview( cornerButton )
    myView.addConstraintsWithFormat("H:[v0(\(buttonWidth))]", views: cornerButton) // Use extension to set width or height
    myView.addConstraintsWithFormat("V:[v0(\(buttonWidth))]", views: cornerButton) // Use extension to set width or height
    myView.addConstraint(NSLayoutConstraint(item: cornerButton, attribute: .CenterX, relatedBy: .Equal, toItem: myView, attribute: .Right, multiplier: 1, constant: 0))
    myView.addConstraint(NSLayoutConstraint(item: cornerButton, attribute: .CenterY, relatedBy: .Equal, toItem: myView, attribute: .Top,   multiplier: 1, constant: 0))
}







// Rotation

@IBAction func angleSliderDidChange(slider: UISlider) {
    print(slider.value)
    setAngle(forMyView: slider.value )
}

func setAngle(forMyView angle: Float) {
    let radian = angle.degreesToRadians
    myView.transform = CGAffineTransformMakeRotation( radian )
}





// Resize

@IBAction func widthSlider(sender: UISlider) {

    let newWidth: CGFloat = CGFloat(sender.value)

    let newSize = CGSizeMake(newWidth, myView.aspectRatioKeptHeight(forWidth: newWidth))
    myView.bounds.size = newSize

}


}

2 个答案:

答案 0 :(得分:0)

最简单的方法是将圆圈设置为要应用的矩形的子视图,并确保矩形视图的clipsToBounds设置为false。圆圈也将应用变换,鉴于您提供的信息,我不是100%确定这是您想要的。如果您提供更多详细信息,我们可以优化答案。

另一种方法是将圆形约束到矩形视图的顶部和后缘而不使其成为子视图。您再次必须确认给定的结果符合您的要求。

问题:无论您做什么,都需要更改func widthSlider(sender: UISlider)方法,因为您无法通过这种方式混合自动布局和使用框架。您在矩形上设置宽度约束和高度约束,然后调整约束的常量。这将要求您将默认尺寸存储在其他位置。

@IBAction func widthSlider(sender: UISlider) {

    let newWidth = CGFloat(sender.value)
    rectangleViewWidthConstraint.constant = newWidth
    let newHeight = myView.aspectRatioKeptHeight(forWidth: newWidth)
    rectangleViewHeightConstraint.constant = newHeigh


}

答案 1 :(得分:0)

我自己解决了这个问题。

这很棘手但非常简单。

我声明当角度为0时改变边界不会破坏布局。 这意味着当我更改边界时,我只需将临时角度设置为0。

完整的流程是......

  1. 存储当前角度
  2. 将视图的角度设置为0
  3. 设置新界限
  4. 设置存储的角度