iOS中使用自动布局实现垂直滑块UISlider

18

根据我的iPad应用需求,我需要垂直显示UISlider。
我使用的是iOS7编译器,部署目标是iOS6。
在storyboard中,我添加了宽度为600像素的水平UISlider。我在我的视图控制器中创建了IBOutlet。 我没有设置自动布局约束。 我正在使用以下代码进行旋转并使其垂直。

self.slider.transform = CGAffineTransformMakeRotation(M_PI_2);

在旋转前和旋转后,我打印了滑块的框架大小,并且是正确的。但是滑块看起来不正常。它只显示中心的旋钮。我该如何旋转UISlider?


这个解决方案对我有效。 - Lion
10个回答

16

我使用Xcode 6和iOS 8实现了一个垂直滑块,只用了Storyboard中三个约束和一行代码。以下是一个界面的截图:

enter image description here

垂直滑块与旁边的UIImageView之间有三个约束:

  1. vSlider.Center Y = Image View.Center Y
  2. vSlider.Width = Image View.Height
  3. vSlider.Center X = Image View.Trailing + 16

当然,只需要一行代码:

self.vSlider.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))

在Xcode 6的故事板中设置这些约束非常容易,但我认为在代码中编写这些约束以支持iOS 7或6应该是简单的。


10

我用以下方法使其正常工作:

viewDidLoad:中添加了以下内容

[self.slider removeConstraints:self.slider.constraints];
[self.slider setTranslatesAutoresizingMaskIntoConstraints:YES];

这样它会在旋转滑块之前被调用。

self.slider.transform=CGAffineTransformRotate(self.slider.transform,270.0/180*M_PI);

而且没有必要将其从父视图中移除并重新添加。


7

这是一个旧话题,但这里有个Swift解决方案,使用storyboard中的自动布局约束,不需要其他任何东西。

1/ 您需要将IBOutlet添加旋转功能:

@IBOutlet weak var mySlider: UISlider! {
    didSet {
        mySlider.transform = CGAffineTransform(rotationAngle: -CGFloat.pi/2)
    } // didSet
} // IBOutlet

2/ 在Storyboard中定义约束条件,记住Slider将会围绕其中心旋转。

例如,如果您想要将mySlider定位在myView的左侧,则需要三个约束条件:

  1. myView.Leading = mySlider.CenterX - 20
  2. mySlider.width = myView.Height(例如使用乘数0.8)
  3. mySlider.CenterY = myView.CenterY

在Storyboard中,mySlider当然会水平出现,但大小和中心位置会被正确地定位。


对于右侧的滑块,您需要使用trailing而不是第一个项目的leading,如下所示:myView.Trailing = mySlider.CenterX + 20 - Bruno Bieri

2

请在您的ViewController上取消自动布局,因为在SDK 7.0下没有其他选项可以使其垂直工作 :(


1

有很多可能的解决方案可以使UISlider垂直。以下是我对于启用autoLayout的iOS7和XCode5的总结:

  1. viewDidLoad中添加方法self.slider.transform = CGAffineTransformMakeRotation(M_PI_2);

  2. 在storyboard中明确定义您喜欢的关于slider的自动布局约束。


0

尝试以下代码将UISlider旋转为垂直位置...

//To rotate the slider in Vertical Position
CGAffineTransform sliderRotation = CGAffineTransformIdentity;
sliderRotation = CGAffineTransformRotate(sliderRotation, -(M_PI / 2));
sliderBrightness.transform=sliderRotation;

0

在你的viewDidLoad中尝试一下:

UIView *superView = self.sizeSlider.superview;
[self.sizeSlider removeFromSuperview];
[self.sizeSlider removeConstraints:self.view.constraints];
self.sizeSlider.translatesAutoresizingMaskIntoConstraints = YES;
self.sizeSlider.transform = CGAffineTransformMakeRotation(M_PI_2);
[superView addSubview:self.sizeSlider];

它不适用于约束条件,因此诀窍是为您的uislider删除约束条件。 您可能需要通过设置其frame属性手动调整其大小。


0

你不能使用Storyboard来构建UISlider。 通过编码来构建UISlider。

slider = [[UISlider alloc] initWithFrame:CGRectMake(640, 150, 600, 400)];
[slider.layer setAnchorPoint:CGPointMake(0.0f, 0.0f)];
slider.transform = CGAffineTransformMakeRotation(M_PI/2);
[self.view addSubview:slider];

0

对我来说,一个两步骤的过程效果最好(结合了之前的一些解决方案)

自动布局步骤) 我在IB中添加了一个垂直视图,并使用自动布局将其链接到相邻的视图。然后我在视图中添加了一个滑块,并将其简单地连接到视图的中心。然后将滑块的宽度连接到视图的高度。最后,将滑块出口控制拖动到我的ViewController代码中(作为滑块)

代码步骤) 然后只需在我的viewWillAppear(swift-code)中添加以下内容:
let trans = CGAffineTransformMakeRotation(CGFloat(M_PI_2)); slider.transform = trans;


0

试试这个:

self.slider.transform=CGAffineTransformRotate(slideToUnlock.transform,-90.0/180*M_PI);


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接