垂直 UISlider 约束
Vertical UISlider constraints
我正在创建一个垂直的 UISlider。我已经使用所有代码创建了视图。 (其余故事板元素使用界面构建器进行约束)
根据我的阅读,要创建一个垂直的 UISlider,您需要为 UISlider 指定一个宽度,然后旋转它。由于 UISlider 所在容器的高度因屏幕尺寸而异,我不想给它一个固定的高度(宽度)。
这就是我的想法
// Mark: Slider View
let leftSlider = UISlider()
let centerSlider = UISlider()
let rightSlider = UISlider()
let colorSliders = [leftSlider, centerSlider, rightSlider]
for slider in colorSliders {
slider.translatesAutoresizingMaskIntoConstraints = false
sliderContainer.addSubview(slider)
let w = sliderContainer.bounds.width
slider.bounds.size.width = w
slider.center = CGPoint(x: w/2, y: w/2)
slider.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_2))
slider.value = 0
slider.minimumValue = 0
slider.maximumValue = 255
let sliderTopConstraint = slider.topAnchor.constraint(equalTo: centerHiddenView.bottomAnchor, constant: 5)
let sliderBottomConstraint = slider.bottomAnchor.constraint(equalTo: sliderContainer.bottomAnchor, constant: 5)
NSLayoutConstraint.activate([sliderTopConstraint, sliderBottomConstraint])
slider.backgroundColor = .purple
slider.isEnabled = true
slider.isUserInteractionEnabled = true
}
let sliderContainerWidth: CGFloat = sliderContainer.frame.width
let centerSliderHorizontalConstraints = centerSlider.centerXAnchor.constraint(equalTo: sliderContainer.centerXAnchor)
let widthConstraint = centerSlider.widthAnchor.constraint(equalToConstant: sliderContainerWidth)
let centerSliderWidthConstraint = centerSlider.widthAnchor.constraint(equalToConstant: 90)
NSLayoutConstraint.activate([centerSliderHorizontalConstraints, centerSliderWidthConstraint, widthConstraint])
但是当我 运行 它时,我得到了这个
这比我今天早些时候做的要好得多。但是,我希望滑块的宽度是正常的..并且看起来很正常只是垂直
对我遗漏的内容有什么想法吗?
(哦,请忽略左边那个紫色的小分支,那是我添加但尚未约束的其他 2 个滑块。)
您正在更改 UISlider
的 bounds
和 transform
,并且同时使用自动布局,因此可能会有点混乱。
我建议您不要修改 bounds
而是使用自动布局。您应该将滑块宽度设置为它的超级视图高度,并将滑块居中放置在它的超级视图中。这样,当你旋转它时,它的高度(旋转后)实际上是它的宽度(旋转前)将等于它的超级视图高度。将滑块垂直居中将确保滑块接触其父视图的底部和顶部。
slider.widthAnchor.constraint(equalTo: sliderContainer.heightAnchor
slider.centerYAnchor.constraint(equalTo: sliderContainer.centerYAnchor)
slider.centerXAnchor.constraint(equalTo: sliderContainer.centerXAnchor)
如果您想将剩余的 2 个滑块之一放置在父视图的左侧或右侧,请不要将其水平居中,而是执行以下操作:
slider.leadingAnchor.constraint(equalTo: sliderContainer.leadingAnchor)
slider.trailingAnchor.constraint(equalTo: sliderContainer.trailingAnchor)
此外,请仔细检查您的控制台是否有自动布局错误日志。
编辑:
我在一个测试项目上检查了上面的代码,这是我的视图控制器代码:
class ViewController: UIViewController {
@IBOutlet private weak var containerView: UIView!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let leftSlider = UISlider()
let centerSlider = UISlider()
let rightSlider = UISlider()
let colorSliders = [leftSlider, centerSlider, rightSlider]
var constraints = [NSLayoutConstraint]()
for slider in colorSliders {
slider.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(slider)
slider.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_2))
constraints.append(slider.widthAnchor.constraint(equalTo: containerView.heightAnchor))
constraints.append(slider.centerYAnchor.constraint(equalTo: containerView.centerYAnchor))
slider.backgroundColor = .purple
}
constraints.append(leftSlider.centerXAnchor.constraint(equalTo: containerView.centerXAnchor))
constraints.append(centerSlider.centerXAnchor.constraint(equalTo: containerView.leadingAnchor))
constraints.append(rightSlider.centerXAnchor.constraint(equalTo: containerView.trailingAnchor))
NSLayoutConstraint.activate(constraints)
}
}
这是我得到的:
(截至 2017 年 7 月 7 日)
self.customSlider = [[UISlider alloc] init]];
self.customView = [[UIView alloc] init];
//create the custom auto layout constraints that you wish the UIView to have
[self.view addSubview:self.customView];
[self.customView addSubview:self.customSlider];
self.slider.transform = CGAffineTransformMakeRotation(-M_PI_2);
/*Create the custom auto layout constraints for self.customSlider to have these 4 constraints:
//1. self.customSlider CenterX = CenterX of self.customView
//2. self.customSlider CenterY = CenterY of self.customView
//3. self.customSlider width = self.customView height
//4. self.customSlider height = self.customView width
*/
我正在创建一个垂直的 UISlider。我已经使用所有代码创建了视图。 (其余故事板元素使用界面构建器进行约束)
根据我的阅读,要创建一个垂直的 UISlider,您需要为 UISlider 指定一个宽度,然后旋转它。由于 UISlider 所在容器的高度因屏幕尺寸而异,我不想给它一个固定的高度(宽度)。
这就是我的想法
// Mark: Slider View
let leftSlider = UISlider()
let centerSlider = UISlider()
let rightSlider = UISlider()
let colorSliders = [leftSlider, centerSlider, rightSlider]
for slider in colorSliders {
slider.translatesAutoresizingMaskIntoConstraints = false
sliderContainer.addSubview(slider)
let w = sliderContainer.bounds.width
slider.bounds.size.width = w
slider.center = CGPoint(x: w/2, y: w/2)
slider.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_2))
slider.value = 0
slider.minimumValue = 0
slider.maximumValue = 255
let sliderTopConstraint = slider.topAnchor.constraint(equalTo: centerHiddenView.bottomAnchor, constant: 5)
let sliderBottomConstraint = slider.bottomAnchor.constraint(equalTo: sliderContainer.bottomAnchor, constant: 5)
NSLayoutConstraint.activate([sliderTopConstraint, sliderBottomConstraint])
slider.backgroundColor = .purple
slider.isEnabled = true
slider.isUserInteractionEnabled = true
}
let sliderContainerWidth: CGFloat = sliderContainer.frame.width
let centerSliderHorizontalConstraints = centerSlider.centerXAnchor.constraint(equalTo: sliderContainer.centerXAnchor)
let widthConstraint = centerSlider.widthAnchor.constraint(equalToConstant: sliderContainerWidth)
let centerSliderWidthConstraint = centerSlider.widthAnchor.constraint(equalToConstant: 90)
NSLayoutConstraint.activate([centerSliderHorizontalConstraints, centerSliderWidthConstraint, widthConstraint])
但是当我 运行 它时,我得到了这个
这比我今天早些时候做的要好得多。但是,我希望滑块的宽度是正常的..并且看起来很正常只是垂直
对我遗漏的内容有什么想法吗? (哦,请忽略左边那个紫色的小分支,那是我添加但尚未约束的其他 2 个滑块。)
您正在更改 UISlider
的 bounds
和 transform
,并且同时使用自动布局,因此可能会有点混乱。
我建议您不要修改 bounds
而是使用自动布局。您应该将滑块宽度设置为它的超级视图高度,并将滑块居中放置在它的超级视图中。这样,当你旋转它时,它的高度(旋转后)实际上是它的宽度(旋转前)将等于它的超级视图高度。将滑块垂直居中将确保滑块接触其父视图的底部和顶部。
slider.widthAnchor.constraint(equalTo: sliderContainer.heightAnchor
slider.centerYAnchor.constraint(equalTo: sliderContainer.centerYAnchor)
slider.centerXAnchor.constraint(equalTo: sliderContainer.centerXAnchor)
如果您想将剩余的 2 个滑块之一放置在父视图的左侧或右侧,请不要将其水平居中,而是执行以下操作:
slider.leadingAnchor.constraint(equalTo: sliderContainer.leadingAnchor)
slider.trailingAnchor.constraint(equalTo: sliderContainer.trailingAnchor)
此外,请仔细检查您的控制台是否有自动布局错误日志。
编辑: 我在一个测试项目上检查了上面的代码,这是我的视图控制器代码:
class ViewController: UIViewController {
@IBOutlet private weak var containerView: UIView!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let leftSlider = UISlider()
let centerSlider = UISlider()
let rightSlider = UISlider()
let colorSliders = [leftSlider, centerSlider, rightSlider]
var constraints = [NSLayoutConstraint]()
for slider in colorSliders {
slider.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(slider)
slider.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_2))
constraints.append(slider.widthAnchor.constraint(equalTo: containerView.heightAnchor))
constraints.append(slider.centerYAnchor.constraint(equalTo: containerView.centerYAnchor))
slider.backgroundColor = .purple
}
constraints.append(leftSlider.centerXAnchor.constraint(equalTo: containerView.centerXAnchor))
constraints.append(centerSlider.centerXAnchor.constraint(equalTo: containerView.leadingAnchor))
constraints.append(rightSlider.centerXAnchor.constraint(equalTo: containerView.trailingAnchor))
NSLayoutConstraint.activate(constraints)
}
}
这是我得到的:
(截至 2017 年 7 月 7 日)
self.customSlider = [[UISlider alloc] init]];
self.customView = [[UIView alloc] init];
//create the custom auto layout constraints that you wish the UIView to have
[self.view addSubview:self.customView];
[self.customView addSubview:self.customSlider];
self.slider.transform = CGAffineTransformMakeRotation(-M_PI_2);
/*Create the custom auto layout constraints for self.customSlider to have these 4 constraints:
//1. self.customSlider CenterX = CenterX of self.customView
//2. self.customSlider CenterY = CenterY of self.customView
//3. self.customSlider width = self.customView height
//4. self.customSlider height = self.customView width
*/