自定义带图像的UISwitch

Question

我需要在项目中实现一个自定义开关。目前我发现无法通过修改UISwitch的方式实现如下图所示的开关。我已经阅读了一些帖子并在StackOverflow和其他博客上搜索，但没有找到所需的解决方案。一种方法是采用UISegmented控件，如此帖子中所述，但这也无法解决我的问题。

提前感谢您的帮助。

- Arshad Parwez

---

UISegmentedControl有什么问题？我认为这是您尝试做的事情的正确方法。 - Odrakir

请尝试这个：https://github.com/twotoasters/TTSwitch - Desdenova

你的答案在这里：SwiftySwitch - Sethmr

Answer 1

创建自己的开关并不难。UISwitch是一个控制器 - 基本上只是发送消息的视图 - 有两种状态。你可以像这样设置自己的自定义控制器:

• 容器视图: 一个简单的视图，具有圆角（将视图的cornerRadius设置为）和背景颜色

• 左侧图片: 显示您想要显示在左侧的图像的图像视图，例如您的示例中的勾号

• 右侧图片: 显示您想要显示在右侧的图像的图像视图，例如您的示例中的X标记

• 滑块: 显示开关的滑块部分，设置在另外两个图像视图之上。

当用户点击或滑动控件时，使用核心动画将滑块移动到开关的另一侧并更新控件的状态，并快速淡化新状态的背景颜色。将该控件的操作发送到目标。

- Caleb

---

谢谢！我已经从您的答复中得到了解决方案。 - Arshad Parwez

这并不是真的，当你切换时苹果制造的美丽效果并不那么简单实现。它是一种非线性动画，具有非线性形状。 - Curnelious

是的，我知道苹果公司为了让UISwitch看起来完美而努力工作，但这并不否定我上面所写的任何内容。由OP决定要花多少功夫来实现过渡动画，但Core Animation中可用的工具使得按照我所描述的方式实现变得非常简单且令人愉悦。 - Caleb

Answer 2

正如gasparuff所说，你也可以使用UIButton来完成它，只需设置图像：

[button setImage:[UIImage imageNamed:@"image_on"] forState:UIControlStateSelected];
[button setImage:[UIImage imageNamed:@"image_off"] forState:UIControlStateNormal];

然后当被轻敲时，只需切换所选属性。

- (void) buttonTap {
    button.selected = !button.selected;
}

它将自动更改图像。

- Odrakir

---

看不出他说过要动画化。 - Odrakir

Answer 3

你知道-[UISwitch setOnImage:]、-[UISwitch setOffImage:]以及-[UISwitch setTintColor]的用法，对吧？唯一的缺点可能是开关本身将是标准的iOS开关（圆形按钮），但除此之外，这将是最符合iOS风格的解决方案。

实现自己的on/offImage时，请记住尺寸限制，以及图像向开关的那一侧是凹形的。 tintColor可用于使开关的其余部分反映您的颜色方案。您可能需要跟踪valueChanged事件以更改着色。

如果你需要在问题中显示的确切外观（方形开关按钮），则可能需要使用自定义控件，如@Caleb所建议的那样。

- Olie

---

正确。iOS6在2013年6月的采用率为92％，并且正在上升。 - Olie

Answer 4

看起来你只想让你的控件有两种状态 - 启用和禁用。

一个简单的方法是创建2个png图像，并使用带有背景图像的自定义UIButton，每次点击按钮时只需替换这两个图像。

这是你想做的吗？还是我误解了什么？

- gasparuff

---

我猜滑动也是必需的。 - makaron

我正在尝试复制Twitter视频分享应用程序“Vine”中的效果。实际上，该应用程序中显示的标题在图像中平稳滑动。我猜添加一个改变状态的按钮不会导致标题的平稳滚动。感谢您的回复！ - Arshad Parwez

好的，那么我想你会需要一些不同的方法。不用谢。祝你好运，如果你找到了某种方法，请告诉我们 :-) - gasparuff