Question

当四个按钮中的任何一个被轻按时，指示器始终会自动向最左按钮下方的位置移动。但是我想看到的是指示器滑到刚刚点击的按钮正下方的位置。这四个按钮在情节提要中标记为0、1、2、3。为什么？预先谢谢你！

class MainViewController: UIViewController {

    @IBOutlet weak var weatherBtn: UIButton!
    @IBOutlet weak var tourismBtn: UIButton!
    @IBOutlet weak var tectonicsBtn: UIButton!
    @IBOutlet weak var foodBtn: UIButton!
    @IBOutlet weak var indicator: UIImageView!

    var btnsArray: [UIButton]!
    let tin = UIColor(red: 145/255, green: 145/255, blue: 145/255, alpha: 1)

    override func viewDidLoad() {
        super.viewDidLoad()
        btnsArray = [weatherBtn, tourismBtn, tectonicsBtn, foodBtn]

        indicator.image = UIImage().solidColor(.black, size: indicator.frame.size)
    }

    @IBAction func topicBtnTapped(_ sender: UIButton) {
        indicate(button: sender)
    }


    func indicate(button: UIButton) {
        UIView.animate(withDuration: 0.3) {
            self.indicator.center.x = (button.superview?.frame.minX)! + button.frame.width * 0.5 * (2 * CGFloat(button.tag) + 1)
        }

        for btn in btnsArray {
            btn.titleLabel?.textColor = tin
        }
        button.setTitleColor(.black, for: .normal)
    }
}

extension UIImage {
    func solidColor(_ color: UIColor, size: CGSize) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
}

Answer 1

假设您使用的是自动布局约束...

对于“指示器” UIImageView，在“天气”按钮的底部设置宽度和高度约束以及垂直间距约束。

然后，将其水平居中限制在“天气”按钮上。

为该centerX约束添加一个IBOutlet：

@IBOutlet var indicatorCenterXConstraint: NSLayoutConstraint!

然后，当您要移动“指示器”时：

    // deactivate indicator's current centerXAnchor
    self.indicatorCenterXConstraint.isActive = false

    // re-init to center aligned to selected button
    self.indicatorCenterXConstraint = self.indicator.centerXAnchor.constraint(equalTo: button.centerXAnchor)

    // set it active
    self.indicatorCenterXConstraint.isActive = true

    // animate it into place
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }

因此，每次您点击“菜单”按钮时，都将停用当前的centerXAnchor，将其重新初始化为被轻击的按钮的centerXAnchor，然后重新激活它并为其设置动画。

这是完整的课程：

class MenuMainViewController: UIViewController {

    @IBOutlet weak var weatherBtn: UIButton!
    @IBOutlet weak var tourismBtn: UIButton!
    @IBOutlet weak var tectonicsBtn: UIButton!
    @IBOutlet weak var foodBtn: UIButton!
    @IBOutlet weak var indicator: UIImageView!

    // outlet to control the position of the indicator
    @IBOutlet var indicatorCenterXConstraint: NSLayoutConstraint!

    var btnsArray: [UIButton]!
    let tin = UIColor(red: 145/255, green: 145/255, blue: 145/255, alpha: 1)

    override func viewDidLoad() {
        super.viewDidLoad()
        btnsArray = [weatherBtn, tourismBtn, tectonicsBtn, foodBtn]

        indicator.image = UIImage().solidColor(.black, size: indicator.frame.size)

        // init button title colors
        for btn in btnsArray {
            btn.setTitleColor(tin, for: .normal)
        }
        // set first button to "active" color
        weatherBtn.setTitleColor(.black, for: .normal)

    }

    @IBAction func topicBtnTapped(_ sender: UIButton) {
        indicate(button: sender)
    }


    func indicate(button: UIButton) {
        // deactivate indicator's current centerXAnchor
        self.indicatorCenterXConstraint.isActive = false

        // re-init to center aligned to selected button
        self.indicatorCenterXConstraint = self.indicator.centerXAnchor.constraint(equalTo: button.centerXAnchor)

        // set it active
        self.indicatorCenterXConstraint.isActive = true

        // animate it into place
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }

        // update button title colors
        for btn in btnsArray {
            btn.setTitleColor(tin, for: .normal)
        }
        button.setTitleColor(.black, for: .normal)
    }
}

顺便说一句，您可以为UIView使用普通的.backgroundColor = .black和{{1}}，而不是为“ indicator” imageView创建单色图像。

首次操作按钮不正确

1 个答案: