美文网首页iOS DeveloperiOS高阶UI相关
自定义SegmentControl控件(Swift)

自定义SegmentControl控件(Swift)

作者: 广州_虾 | 来源:发表于2016-11-20 23:49 被阅读0次

    系统的UISegmentControl虽然可以动态计算宽度,但是不能滚动。0..0鉴于需求,所以还是苦逼自己撸了一个Swift版。满足动态调节segment宽度,以及自动调整滚动位置,选择红点显示。

    效果图:

    display2.gif

    主要的一些思路(同时希望大神能提下意见~~):

    a.添加scrollView,然后在上面布局各个item,达到可供滚动的需求。通过autoAdjustWidth属性判断是否自动计算各个item的宽度。如果不自动的话,就width = frame/numbersOfSegment,自动的话则计算label显示所需要的宽度。

    b.在可供滚动的需求上,继续挖出一个自动调整位置的需求。让选择的item显示在可视范围,同时显示出尽头是否还有item的情况。额,挺简单的,直接上代码:

    
    private func scrollItemToPoint(index : Int,point:CGPoint) {
    
                let currentX = currentItemX(index: index)
    
                let scrollViewWidth = scrollView.bounds.size.width
    
                var scrollX = currentX - point.x + segmentWidth(index: index) * 0.5
    
                let maxScrollX = scrollView.contentSize.width - scrollViewWidth
    
                if scrollX > maxScrollX {
    
                      scrollX = maxScrollX
    
                }
    
                if scrollX < 0.0 {
    
                      scrollX = 0.0
    
                }
    
                scrollView.setContentOffset(CGPoint(x: scrollX, y: 0.0), animated: true)
    }
    
    

    c.红点添加。考虑到要显示红点,所以不直接使用UILabel当Item,而是自定义JTItemView,里面放着label,和一个红点CALayer视图。(本来想着自定义一个label子类,然后添加layer当做红点就行,但是考虑到可能以后还要扩展item的特性,所以直接使用了UIView的子类。)。

    提供了一个方法进行红点控制:func showBridge(show:Bool, index:Int)。

    0.0接下来说说肿么使用~

    1.平分布局:

    
    var frame = CGRect(x: 10.0, y: 130.0, width: self.view.bounds.size.width - 20.0, height: 44.0)
    
    let segmentControl = JTSegmentControl(frame: frame)
    
    segmentControl.delegate = self
    
    segmentControl.items = ["first", "second", "third", "fouth"]
    
    segmentControl.showBridge(show: true, index: 1)
    
    segmentControl.autoScrollWhenIndexChange = false
    
    view.addSubview(segmentControl)
    

    2.自动计算item宽度(autoAdjustWidth)

    
    frame = CGRect(x: 10.0, y: 250.0, width: self.view.bounds.size.width - 20.0, height: 44.0)
    
    let autoWidthControl = JTSegmentControl(frame: frame)
    
    autoWidthControl.delegate = self
    
    autoWidthControl.items = ["first", "second", "third", "fouth", "fifth", "sixth", "seventh", "eighth"]
    
    autoWidthControl.selectedIndex = 1
    
    autoWidthControl.autoAdjustWidth = true
    
    autoWidthControl.bounces = true
    
    view.addSubview(autoWidthControl)
    

    ~还有一些样式的属性可供修改:

    // JTSegmentPattern.swift
    
    static let itemTextColor //item字体颜色
    
    static let itemSelectedTextColor //选择状态的颜色
    
    static let itemBackgroundColor //背景色
    
    static let itemSelectedBackgroundColor //选中状态背景色
    
    //MARK - Text font
    
    static let textFont //字体
    
    static let selectedTextFont //选中状态字体
    
    //MARK - slider
    
    static let sliderColor //滑动条颜色
    
    static let sliderHeight  //滑动条高度
    
    //MARK - bridge
    
    static let bridgeColor //红点颜色
    

    提供代理方法通知外界:

    optional func didSelected(segement:JTSegmentControl, index: Int) //选择了Item后触发
    

    =============STOP=================

    //就是辣么简单。。。。。。

    //求鼓励

    https://github.com/guangzhouxia/JTSegmentControl

    相关文章

      网友评论

        本文标题:自定义SegmentControl控件(Swift)

        本文链接:https://www.haomeiwen.com/subject/hdnypttx.html