美文网首页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)

    系统的UISegmentControl虽然可以动态计算宽度,但是不能滚动。0..0鉴于需求,所以还是苦逼自己撸了一...

  • Siwft中使用UIView自定义控件

    使用View自定义SegmentControl 为了能让大家更好的学习自定义控件,我将详细讲解每一步,闲话少说进入...

  • Swift

    1.Swift构建自定义控件2.Swift开发集锦3.Swift构建自定义控件4.Cocoa的Swift开发专题5...

  • Storyboard 自定义控件实现实时渲染

    OC中 自定义控件的.h文件 自定义控件的.m文件 Swift中 神奇的效果出现了

  • 自定义Swift版SegmentControl

    系统的UISegmentControl虽然可以动态计算宽度,但是不能滚动。0..0鉴于需求,所以还是苦逼自己...

  • 下拉刷新控件-SJLineRefresh

    高度自定义的线性下拉刷新控件 SJLineRefresh 完全自定义路径 多种内置动画 swift 3.0+ 使用...

  • 自定义简单的IOS控件----Button

    当系统控件不能满足我们的需求的时候,我们需要自定义控件,自定义的流程如下1,创建一个Swift类文件,继承需要自定...

  • SwiftStarRatingView使用简介

    简介 SwiftyStarRatingView 是一个用 swift 3.0 编写的评分控件,可以支持自定义图片和...

  • 如何创建iOS可视化控件

    以前写过一个文章《如何用Swift创建自定义iOS控件》,文章主要以Swift语言讲解,图个新鲜,其原理跟使用OC...

  • 组合控件2——海贼王选项菜单

    之前的自定义控件——初识自定义控件,我们了解到了自定义控件分为三种,自制控件,组合控件,拓展控件。而我们在自制控件...

网友评论

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

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