ios - UIView 不会从右到左水平动画

Question

我在水平 UIStackView 中有两个 UIButtons。我想添加一个 UIView 作为 subview ，这样当我按下其中一个按钮时， View 会水平移动到所选按钮。

我有这个代码:

let selectionView = UIView(frame: CGRect(x: 0, y: 0, width: 70, height: 19))
selectionView.backgroundColor = UIColor.greenColor()
self.incomeButton.addSubview(selectionView) // left button


// left button touched
@IBAction func incomeDidTouch(sender: AnyObject) {
    self.incomeButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
    self.expensiveButton.setTitleColor(UIColor.grayColor(), forState: .Normal)

    UIView.animateWithDuration(0.3) {
        self.selectionView.backgroundColor = UIColor.greenColor()
        self.selectionView.center = self.incomeButton.center
    }
}

// right button touched   
@IBAction func expensiveDidTouch(sender: AnyObject) {
    self.expensiveButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
    self.incomeButton.setTitleColor(UIColor.grayColor(), forState: .Normal)

    UIView.animateWithDuration(0.3) {
        self.selectionView.backgroundColor = UIColor.redColor()
        self.selectionView.center = self.expensiveButton.center
    }

当 View 被添加到左按钮时，这段代码实际上起作用了。单击按钮时， View 将从左向右和从右向左移动。

但是如果我从选择了右键开始:

    let selectionView = UIView(frame: CGRect(x: 0, y: 0, width: 70, height: 19))
    selectionView.backgroundColor = UIColor.redColor()
    self.expensiveButton.addSubview(selectionView)  // right button

View 只改变颜色，不会从右向左移动。

这是为什么呢？如何修复我的代码，以便可以任意移动 View ？

更新:

我尝试在 UIView 中添加堆栈 View ，并在其中添加 selectionView。这是一个快照:

当我在选择右键的情况下运行应用程序时，我仍然遇到问题，selectionView 出现在 containerView 之外(它应该出现在 Expensive 文本的右侧):

当我检查应该选择哪个按钮时，这是 viewDidLoad 中的代码:

if type == .Income {
    self.selectionView.backgroundColor = UIColor(hex: "28BB9D")
    self.selectionView.center = self.incomeButton.center
} else {
    self.selectionView.backgroundColor = UIColor(hex: "E5344A")
}

UPDATE 2:

selectionView 的当前约束:

Answer 1

目标:

以编程方式创建一个 selectionView 以在子级时切换两个 UIButton。

为了更好地解释这种情况，我将 selectionView 添加(开始)到 expensiveButton(您遇到问题的按钮......)

您可以在项目中进行一些更正，以确保其正常运行。

class ViewController: UIViewController {
    @IBOutlet weak var stackView: UIStackView!
    @IBOutlet weak var incomeButton: UIButton!
    @IBOutlet weak var expensiveButton: UIButton!
    var selectionView : UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        selectionView = UIView(frame: CGRect(x: 0, y: 0, width: 70, height: 19))
        selectionView.backgroundColor = UIColor.greenColor()
        selectionView.tag = 666
    }
    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        self.expensiveButton.addSubview(selectionView)
        self.selectionView.backgroundColor = UIColor.redColor()
        self.selectionView.center = CGPointMake(self.expensiveButton.bounds.midX, self.expensiveButton.bounds.midY)
    }
    @IBAction func incomeDidTouch(sender: AnyObject) {
        if let _ = sender.viewWithTag(666) {} else {
            self.incomeButton.addSubview(selectionView)
        }
        self.expensiveButton.viewWithTag(666)?.removeFromSuperview()
        self.incomeButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        self.expensiveButton.setTitleColor(UIColor.grayColor(), forState: .Normal)

        UIView.animateWithDuration(0.3) {
            self.selectionView.backgroundColor = UIColor.greenColor()
            self.selectionView.center = CGPointMake(self.incomeButton.bounds.midX, self.incomeButton.bounds.midY)
        }
    }
    @IBAction func expensiveDidTouch(sender: AnyObject) {
        if let _ = sender.viewWithTag(666) {} else {
            self.expensiveButton.addSubview(selectionView)
        }
        self.incomeButton.viewWithTag(666)?.removeFromSuperview()
        self.expensiveButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        self.incomeButton.setTitleColor(UIColor.grayColor(), forState: .Normal)

        UIView.animateWithDuration(0.3) {
            self.selectionView.backgroundColor = UIColor.redColor()
            self.selectionView.center = CGPointMake(self.expensiveButton.bounds.midX, self.expensiveButton.bounds.midY)
        }
    }
}

一些解释:

首先，在您的项目中，您没有报告对 selectView 的全局引用，但我认为您只是忘记在问题中写下它。

所以，一个好办法是为你的 selectionView 设置一个标签，比如一个 id 号，可以在他 future 父 View 的 subview 之间识别它(在你的例子中它将是一个 UIButton)

如您所见，我添加了 viewDidAppear 方法，为什么？因为当你在 viewDidLoad 时你的按钮没有完全准备好，所以你有一个错误的中心，当你的 View 最终被绘制时，拥有这个值的正确位置是 viewDidAppear 。

现在让我们谈谈 selectionView:它是一个 View ，因此您可以将它添加到 incomeButton 但如果您已经将它添加到另一个按钮中，则必须将其从expensiveButton 只需用这一行:

self.expensiveButton.viewWithTag(666)?.removeFromSuperview()

最后是中心点:记住你在自动布局中，所以找到它的好方法可能是使用边界:

self.selectionView.center = CGPointMake(self.expensiveButton.bounds.midX, self.expensiveButton.bounds.midY)

这是我的项目结构，我看到你在处理它:

更新:

在我看到您的更新后(您从以编程方式创建的 selectionView 开始)一些关于您的问题的评论和回答，我怀疑您想要实现自定义 UISegmentedControl。我认为使用 UIStackView 来实现类似它的小控件不是一个好主意，您可以在 UISegmentedControl 周围找到许多项目，子类 UIControl 喜欢示例 BetterSegmentedControl :

代码示例:

let control = BetterSegmentedControl(
    frame: CGRect(x: 0.0, y: 100.0, width: view.bounds.width, height: 44.0),
    titles: ["One", "Two", "Three"],
    index: 1,
    backgroundColor: UIColor(red:0.11, green:0.12, blue:0.13, alpha:1.00),
    titleColor: .whiteColor(),
    indicatorViewBackgroundColor: UIColor(red:0.55, green:0.26, blue:0.86, alpha:1.00),
    selectedTitleColor: .blackColor())
control.titleFont = UIFont(name: "HelveticaNeue", size: 14.0)!
control.selectedTitleFont = UIFont(name: "HelveticaNeue-Medium", size: 14.0)!
control.addTarget(self, action: #selector(ViewController.controlValueChanged(_:)), forControlEvents: .ValueChanged)
view.addSubview(control)

一张图片: