使旋转(垂直)UISlider看起来很漂亮

Question

我目前正在设计一个旨在利用垂直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];

谢谢, - 很多.

Answer 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>