Tag: Segmentedcontrol

如何创建自定义分段控件-Swift

通常,我们的设计器会创建一些不是UIKit模式的组件。 大多数时候,我们可以做出一些改变,但有时却不能改变。 今天,我将教您如何创建自定义分段控件。 首先,让我们来一个UIKit分段控件。 在大多数情况下,我们都有边框,色调颜色和区域,我们可以自定义此分段控件。 假设您要创建此组件。 您在界面构建器中没有底视图来修改或删除所选节的背景。 让我们开始吧! 注意:我不会使用IBInspectable / IBDesignable,但是如果您知道如何使用它们,则可以。 我们的CustomSegmentedControl是UIView的子类,而不是UISegmentedControl 首先,我们需要创建变量: 我们有三个私有变量,为什么要私有? 因为我们不希望其他类可以在没有updateView的情况下更改此值。 使用默认值来自定义视图的三个变量。 现在我们需要显示按钮,但是我们有一个数组,这个数组可以是无限的。 最好的方法是创建一个水平堆栈视图 。 堆栈视图使子视图具有相等的间距,而不使用任何约束。 您如何意识到我们创建了四个约束来使我们的堆栈视图充满所有自定义视图。 现在,让我们创建选定的视图。 我们希望所选视图具有相同的按钮宽度。 我们需要用相等的部分数划分视图框架。 让我们在数组中添加一些按钮,我们该怎么做? 使用我们的buttonTitles数组。 首先,我们删除按钮中的任何元素,并删除视图中的所有子视图。 我们可以从按钮标题创建一个for,并从我们的标题创建一个单独的按钮,让我们设置标题,颜色和动作也添加到按钮数组中。 在本教程中,我考虑始终选择零部分。 让我们实现这种情况,将颜色设置为索引零的按钮。 在我们的动作函子中,我们必须创建一个用于从数组按钮中枚举的for,因为我们可以访问单个按钮和数组中的索引。 首先,我们需要将按钮设置标题颜色设置为默认颜色,之后我们需要进行比较以找到单击了哪个按钮。 我们需要找到X位置,并使用UIView.animated将我们的selectorView移到该位置,然后将按钮标题颜色设置为selectedColor 现在,我们创建一个名为updateView的功能,以调用其他三个配置功能。 很简单。 我们可以创建一个便利初始化或/和创建一个传递数组的函子。 我要创建这两个。 为什么? 因为与您一起使用的是“查看代码”,我们将使用我们的init,但是如果我们要创建IBOutlet,则需要调用函数。 如果您运行代码,它应该可以工作。 记住在viewDidLoad()中调用CustomSegmentedControl

快速创建自定义分段控件

大家好,这是我的第一个故事,与您分享ios分段控制。 ios中的默认边框带有边框和自定义功能,这并不容易。 如今,有些应用程序被设计为在Android和IOS上看起来一样,我们需要自定义许多组件,即使用户更换设备(IOS←→Android)也要给用户相同的体验。 因此,让我们创建一个分段控件,它看起来像Android中没有边框的选项卡式栏。 可以用作幻灯片菜单或XLPagerTabStrip中的滑块标签,也可以用作Android中带有滚动标签的滑块标签。 我通过观看Mark Tutorial youtube频道创建了此自定义分段控件,并根据我的要求进行了更多自定义。 让我们深入研究代码… 众所周知,UIControl继承自UIView。 所有IOS或Xcode UIComponent都继承自UIControl,后者已封装或绑定了组件的所有操作和侦听器(UIControlEvents,如.tpuchUpInside,.changeValue等)。 因此,为customSegmentedControl创建一个UIControl的子类。 @IBDesignable类CustomSegmentedContrl:UIControl { } 2.现在,添加按钮数组,其作用类似于段。 要突出显示所选按钮/细分,我们可以使用单独的视图。 在这里,我称其为“选择器”。 我还在细分控件的底部放置了底层视图 var按钮= [UIButton]() var underLiner:UIView! var选择器:UIView! 3.在这里,我给出一个选项,选择带有标志的衬板。 var isUnderLinerNeeded:Bool = false { didSet { updateView() } } 4.在这里,还有两个可以用于分段控件的属性 var selectedSegmentIndex = 0 { didSet { updateSegmentedControlSegs(index:selectedSegmentIndex) } } var numberOfSegments:Int = 0 { didSet { numberOfSegments […]