创建一个自定义UISlider

介绍

这篇博客文章描述了自定义UISlider的创建，该UISlider具有默认滑块的一些附加功能。 我们将使用的类是UISlider，它是UIKit的一部分。 它是一种视觉控件，用于从连续的值范围中选择一个值。

先决条件

首先，我们需要已经对面向对象的概念有所了解，并且需要了解Objective-C语言。

硬件：我们需要有一台Mac，这是iOS开发的基本要求。

软件：要开始开发iPhone和iPad应用程序，Xcode是我们唯一需要的工具。 Xcode是Apple提供的集成开发环境（IDE），它提供了我们启动应用程序开发所需的一切。

默认UISlider的概述：

UISlider由各种元素组成，例如轨道 -它为我们提供了一系列可供选择的值， 拇指 -这是一个旋钮，可帮助我们在轨道上滑动所需的值。 移动滑块的拇指时，会将其更新后的值传递给附加的任何操作。 滑块的外观是可配置的； 您可以为轨迹和拇指着色，并提供要显示在滑块末端的图像（minimumValueImage和maximumValueImage）。 您可以通过编程方式或使用Interface Builder将滑块添加到界面中。

让我们从创建演示项目开始。

1.创建一个新的Xcode 8项目

我们将为演示目的创建一个Single View应用程序 。

2.将UISlider添加到视图

在此演示中，我们将使用情节提要将UISlider添加到视图中。 将UISlider拖到Main.Storyboard文件中的视图上，并将元素附加到IBOutlets和IBActions。 从属性检查器中，我们可以根据需要提供MinimumValueImage，MaximunValueImage，MinimunTrackColor，MaximumTrackColor，Slider最小值和最大值等。

默认的UISlider几乎没有功能，例如刻度或工具提示，它们通过移动滑块来显示用户刚刚设置的滑块的值。 因此，我们将构建自定义的UISlider。

3.建立一个自定义的UISlider子类

在Main.storyboard文件中，转到UISlider，然后在身份检查器中将自定义类命名为CustomSlider。

4.添加刻度到滑块

现在，向滑块添加刻度线，我们将在滑块下方插入一个视图。 设置一个属性noofTicks，以在CustomSlider.h类的滑块中定义所需的刻度数。

在您的CustomSlider.m类中添加以下代码。 此方法将添加一个视图以显示滑块上的刻度。

现在，您只需从ViewController.m类调用此方法即可将刻度功能添加到滑块。

所以您的滑块现在看起来像这样。

现在，刻度线的目的是，每当您滑动到特定值时，旋钮都会捕捉到最近的刻度线。 为了实现相同的功能，我们重写了UISlider子类中的UIControl方法。

4.将工具提示添加到UISlider

我们可以向UISlider添加另一个有用的功能，即ToolTip。 工具提示用于向用户提供反馈，告知他或她通过移动它刚刚设置的值。

为了确定滑块值，无论何时将其更新为新值，我们都必须在UISlider子类实现中重写一些UIControl方法：

在beginTrackingWithTouch中：我们必须检查触摸是否在滑块的旋钮边界内，然后相应地显示工具提示弹出窗口。 我们在工具提示的外观/消失上添加了一些淡入/淡出效果。 这里的工具提示是一个自定义UIView，用于显示滑块值。

5.添加ToolTip UIView子类

我们必须构建一个小的视图来表示滑块值（给它一个外观一样的工具提示）。 为此，我们将使用UIBezierPath创建两个路径：一个是矩形，另一个是连接到它的箭头。 为了提供所需的外观，将两个路径合并在一起，并使用浮点值表示滑块的旋钮位置。 我们可以在子类的drawRect：方法中完成所有这些操作，通过该方法，每次值更改时都可以获取更新的视图。

因此带有工具提示的滑块将如下所示：

结论

这篇文章展示了如何自定义UISlider来添加刻度和捕捉功能，并显示在移动滑块的旋钮（工具提示）时设置了哪个值。 这些功能非常有用，并且使用此自定义类，无论您以前使用过UISlider视图如何，都可以将其用作嵌入式替换。 谢谢阅读。

您可以从以下网址下载相同的文件：https://github.com/0209Neha/ExploringSlider