如何解决将具有可变约束的对象对齐到视图上的中心 x 点
我希望下面的 swift 代码将框与 x 轴的中心对齐。您可以从下面的 gif 中看到我的代码在做什么。当按下紫色按钮时,我希望框对齐。我不知道该怎么做,因为有些约束被声明为 var 我不知道下一步该去哪里。
import UIKit
class ViewController: UIViewController {
var slizer = UiSlider()
var viewDrag = UIImageView()
var b2 = UIButton()
var panGesture = UIPanGestureRecognizer()
// Width,Leading and CenterY constraints for viewDrag
var widthConstraints: NSLayoutConstraint!
var viewDragLeadingConstraint: NSLayoutConstraint!
var viewDragCenterYConstraint: NSLayoutConstraint!
var tim: CGFloat = 50.0
var slidermultiplier: CGFloat = 0.6
override func viewDidLoad() {
super.viewDidLoad()
[viewDrag,slizer,b2].forEach{
$0.translatesAutoresizingMaskIntoConstraints = false
view.addSubview($0)
}
b2.backgroundColor = .purple
NSLayoutConstraint.activate([
b2.bottomAnchor.constraint(equalTo: slizer.topAnchor),b2.leadingAnchor.constraint(equalTo: view.leadingAnchor),b2.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.05),b2.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: 1),slizer.bottomAnchor.constraint(equalTo: view.bottomAnchor),slizer.leadingAnchor.constraint(equalTo: view.leadingAnchor),slizer.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.2),slizer.widthAnchor.constraint(equalTo: view.widthAnchor,])
slizer.addTarget(self,action: #selector(increase),for: .valueChanged)
viewDrag.backgroundColor = .orange
// no point setting a frame,since
// viewDrag has .translatesAutoresizingMaskIntoConstraints = false
//viewDrag.frame = CGRect(x: view.center.x-view.frame.width * 0.05,y: view.center.y-view.frame.height * 0.05,width: view.frame.width * 0.1,height: view.frame.height * 0.1)
// start with viewDrag
// width = "slidermultiplier" percent of view width
widthConstraints = viewDrag.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: slidermultiplier)
// Leading = "tim" pts from view leading
viewDragLeadingConstraint = viewDrag.leadingAnchor.constraint(equalTo: self.view.leadingAnchor,constant: tim)
// centered vertically
viewDragCenterYConstraint = viewDrag.centerYAnchor.constraint(equalTo: view.centerYAnchor)
NSLayoutConstraint.activate([
// viewDrag height will never change,so we can set it here
viewDrag.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.3),// activate the 3 "modifiable" constraints
widthConstraints,viewDragLeadingConstraint,viewDragCenterYConstraint,])
panGesture = UIPanGestureRecognizer(target: self,action: #selector(draggedView(_:)))
viewDrag.isUserInteractionEnabled = true
viewDrag.addGestureRecognizer(panGesture)
// start the slider at the same percentage we've used
// for viewDrag's initial width
slizer.value = Float(slidermultiplier)
b2.addTarget(self,action: #selector(press),for: .touchDown)
}
@objc func press(){
}
@objc func draggedView(_ sender: UIPanGestureRecognizer) {
// old swift Syntax
//self.view.bringSubview(toFront: viewDrag)
self.view.bringSubview(toFront: viewDrag)
let translation = sender.translation(in: self.view)
viewDragLeadingConstraint.constant += translation.x
viewDragCenterYConstraint.constant += translation.y
// don't do this
//viewDrag.center = CGPoint(x: viewDrag.center.x + translation.x,y: viewDrag.center.y + translation.y)
sender.setTranslation(CGPoint.zero,in: self.view)
}
@objc func increase() {
// get the new value of the slider
slidermultiplier = CGFloat(slizer.value)
// deactivate widthConstraints
widthConstraints.isActive = false
// create new widthConstraints with slider value as a multiplier
widthConstraints = viewDrag.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: slidermultiplier)
// activate the new widthConstraints
widthConstraints.isActive = true
}
}
解决方法
我建议直接使用框架而不是约束。 约束适用于处理可变屏幕尺寸和屏幕旋转的情况。
第 1 步:将可移动对象放入容器视图中
第 2 步:通过容器视图内的坐标处理对象
第 3 步:将容器添加到您的视图控制器的视图中,并使用其他元素对其进行约束布局
class ViewController: UIViewController {
@IBOutlet weak var container: Container!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
container.addPanGestures()
}
@IBAction func didTapLeftButton(_ sender: Any) {
container.setLeftAlign()
}
@IBAction func didTapCenterButton(_ sender: Any) {
container.setCenterXAlign()
}
@IBAction func didTapRightButton(_ sender: Any) {
container.setRightAlign()
}
@IBAction func slide(_ sender: UISlider) {
let scale = CGFloat(max(sender.value,0.1))
container.setWidthScale(scale)
}
}
class Container: UIView {
func setLeftAlign() {
for view in self.subviews {
view.frame.origin = CGPoint(x: 0,y: view.frame.origin.y)
}
}
func setRightAlign() {
for view in self.subviews {
view.frame.origin = CGPoint(x: self.frame.width - view.frame.width,y:view.frame.origin.y)
}
}
func setCenterXAlign() {
for view in self.subviews {
var center = view.center
center.x = self.frame.width / 2
view.center = center
}
}
func setWidthScale(_ ratio: CGFloat) {
for view in self.subviews {
var frame = view.frame
let center = view.center
frame.size.width = self.frame.width * ratio
view.frame = frame
view.center = center
}
}
func addPanGestures() {
for v in self.subviews {
let panGesture = UIPanGestureRecognizer(target: self,action: #selector(didPan(_:)))
v.addGestureRecognizer(panGesture)
}
}
private var initCenter: CGPoint!
@objc func didPan(_ sender: UIPanGestureRecognizer) {
let view = sender.view!
let translation = sender.translation(in: view)
switch sender.state {
case .began:
initCenter = view.center
case .changed:
view.center = CGPoint(x: initCenter.x + translation.x,y: initCenter.y + translation.y)
case .cancelled:
view.center = initCenter
default:
return
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。