使旋转（垂直）的 UISlider 看起来很漂亮答案

【问题标题】：Making a rotated (vertcal) UISlider look pretty使旋转（垂直）的 UISlider 看起来很漂亮
【发布时间】：2011-12-24 22:55:49
【问题描述】：

我目前正在设计一个旨在利用垂直 UI 滑块的应用程序。对 SO 的共识似乎是，为了在 iOS 中创建一个垂直的 UI 滑块，你必须使用转换函数来旋转 UIKit 的控件。

当我真正使用一个时，我的滑块最终看起来非常不精确和丑陋：

除了从头开始使用一个全新的 NSControl 从头开始构建为垂直滑块之外，有没有人知道如何使垂直 UI 滑块看起来不那么锯齿？

用于生成滑块的代码：

_slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 0, kWTFSliderHeight, 10)];
_slider.transform = CGAffineTransformMakeRotation(M_PI * 1.5);
[self addSubview:_slider];

谢谢，--丹妮。

【问题讨论】：

请编辑您的问题以包含您用于旋转滑块的代码。

标签： cocoa-touch ios5 uikit core-graphics

【解决方案1】：

问题是（未转换的）UISlider 忽略了您请求的帧高度并使用 23 的帧高度。例如我这样做了：

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(80, 100, 40, 10)];
[self.view addSubview:slider];

这是生成的帧：

(gdb) po [[(id)UIApp keyWindow] recursiveDescription]
<UIWindow: 0x6c1c9a0; frame = (0 0; 320 480); layer = <UIWindowLayer: 0x6c1ca30>>
   | <UIView: 0x6c23160; frame = (0 20; 320 460); autoresize = W+H; layer = <CALayer: 0x6c22750>>
   |    | <UISlider: 0x6c22ad0; frame = (80 100; 40 23); opaque = NO; layer = <CALayer: 0x6c21ae0>; value: 0.000000>

及其中心点：

(gdb) p (CGPoint)[0x6c22ad0 center]
$1 = {
  x = 100, 
  y = 111.5
}

请注意，它的中心位于 Y 轴的半点坐标处。如果您像这样将滑块旋转直角：

slider.transform = CGAffineTransformMakeRotation(M_PI * 1.5);

它的中心不会改变，但它的框架会改变：

(gdb) po [[(id)UIApp keyWindow] recursiveDescription]
<UIWindow: 0x6a3a000; frame = (0 0; 320 480); layer = <UIWindowLayer: 0x6a36780>>
   | <UIView: 0x6a3c420; frame = (0 20; 320 460); autoresize = W+H; layer = <CALayer: 0x6a3ba10>>
   |    | <UISlider: 0x6a3bd90; frame = (88.5 91.5; 23 40); transform = [0, -1, 1, 0, 0, 0]; opaque = NO; layer = <CALayer: 0x6a3be20>; value: 0.000000>
...
(gdb) p (CGPoint)[0x6a3bd90 center]
$1 = {
  x = 100, 
  y = 111.5
}

所以在进行直角旋转后，需要在 X 轴和 Y 轴上将中心点调整半个点：

CGPoint center = slider.center;
center.x += .5;
center.y += .5;
slider.center = center;

这样框架将位于整个点边界上：

(gdb) po [[(id)UIApp keyWindow] recursiveDescription]
<UIWindow: 0x9960aa0; frame = (0 0; 320 480); layer = <UIWindowLayer: 0x9962970>>
   | <UIView: 0x9964680; frame = (0 20; 320 460); autoresize = W+H; layer = <CALayer: 0x9963c70>>
   |    | <UISlider: 0x9964020; frame = (89 92; 23 40); transform = [0, -1, 1, 0, 0, 0]; opaque = NO; layer = <CALayer: 0x9963010>; value: 0.000000>

【讨论】：

哇，谢谢！在这里，我想我将不得不为我的应用重写 UISlider！

【解决方案2】：

确保滑块旋转后的位置在像素上，如果它以 0.3、0.2 的形式结束，那将很难看，但如果以 1、1 结束，则看起来正常。
我可以看到的一个具体问题是 kWTFSliderHeight 是否为奇数。如果是，在旋转前把它放在0.5、0上，检查一下

【讨论】：