Segmentio

Platform License Swift 5 Carthage compatible Swift Package Manager

用 Swift 编写的动画顶部/底部分段控件。

Preview

查看 dribbble 上的这个项目

要求

安装

CocoaPods

use_frameworks! 

pod 'Segmentio'

需要 CocoaPods v1.1.0 或更高版本

Carthage

github "Yalantis/Segmentio"

用法

导入 Segmentio 模块

import Segmentio

初始化

您可以从代码初始化 Segmentio 实例

var segmentioView: Segmentio!

let segmentioViewRect = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 125)
segmentioView = Segmentio(frame: segmentioViewRect)
view.addSubview(segmentioView)

或者

在您的 .storyboard 或 .xib 中添加一个 UIView 实例,设置 Segmentio 类并连接 IBOutlet

@IBOutlet weak var segmentioView: Segmentio!

设置 Segmentio

segmentioView.setup(
	content: [SegmentioItem],
	style: SegmentioStyle,
	options: SegmentioOptions?
)

要从默认选项开始,您可以将 nil 传递给 options 参数。

segmentioView.setup(
	content: [SegmentioItem],
	style: SegmentioStyle,
	options: nil
)

配置项目

为了设置项目,您需要创建一个 SegmentioItem 实例数组

var content = [SegmentioItem]()

let tornadoItem = SegmentioItem(
	title: "Tornado",
	image: UIImage(named: "tornado")
)
content.append(tornadoItem)

处理选择

您可以手动指定选定的项目

segmentioView.selectedSegmentioIndex = 0

处理回调

segmentioView.valueDidChange = { segmentio, segmentIndex in
	print("Selected item: ", segmentIndex)
}

自定义

可以通过传递 SegmentioOptions 结构体的实例来定制 Segmentio

SegmentioOptions(
            backgroundColor: .white,
            segmentPosition: SegmentioPosition,
            scrollEnabled: true,
            indicatorOptions: SegmentioIndicatorOptions,
            horizontalSeparatorOptions: SegmentioHorizontalSeparatorOptions,
            verticalSeparatorOptions: SegmentioVerticalSeparatorOptions,
            imageContentMode: .center,
            labelTextAlignment: .center,
            segmentStates: SegmentioStates
)

分段宽度取决于 SegmentioPosition 枚举。宽度可以根据最大可见项目固定,也可以根据分段的内容大小动态调整

enum SegmentioPosition {
    case dynamic
    case fixed(maxVisibleItems: Int)
}

可以通过传递 SegmentioIndicatorOptions 实例来自定义选择指示器

SegmentioIndicatorOptions(
            type: .bottom,
            ratio: 1,
            height: 5,
            color: .orange
)

可以通过传递 SegmentioHorizontalSeparatorOptions 实例来自定义水平边框

SegmentioHorizontalSeparatorOptions(
            type: SegmentioHorizontalSeparatorType.topAndBottom, // Top, Bottom, TopAndBottom
            height: 1,
            color: .gray
)

可以通过传递 SegmentioVerticalSeparatorOptions 实例来自定义分段之间的分隔符

SegmentioVerticalSeparatorOptions(
            ratio: 0.6, // from 0.1 to 1
            color: .gray
)

为了设置 SegmentioStates,您需要创建一个 SegmentioState 实例的元组

SegmentioStates(
            defaultState: SegmentioState(
                backgroundColor: .clear,
                titleFont: UIFont.systemFont(ofSize: UIFont.smallSystemFontSize),
                titleTextColor: .black
            ),
            selectedState: SegmentioState(
                backgroundColor: .orange,
                titleFont: UIFont.systemFont(ofSize: UIFont.smallSystemFontSize),
                titleTextColor: .white
            ),
            highlightedState: SegmentioState(
                backgroundColor: UIColor.lightGray.withAlphaComponent(0.6),
                titleFont: UIFont.boldSystemFont(ofSize: UIFont.smallSystemFontSize),
                titleTextColor: .black
            )
)

告诉我们!

如果您将使用我们组件的项目的链接发送给我们,我们将非常高兴。只需发送电子邮件至 github@yalantis.com 如果您对动画有任何疑问或建议,请告诉我们。

附:我们将发布更多包含在代码中的精彩内容,以及关于如何使 iOS(Android)的 UI 变得更好的教程。敬请关注!

许可证

MIT 许可证 (MIT)

版权所有 © 2019 Yalantis

特此授予任何获得本软件及相关文档文件(“软件”)副本的人员免费许可,以便处理本软件,不受限制,包括但不限于使用、复制、修改、合并、出版、分发、再许可和/或销售本软件副本的权利,并允许向接受本软件的人员提供以下条件

上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。

本软件“按原样”提供,不作任何明示或暗示的保证,包括但不限于适销性、特定用途的适用性和不侵权保证。在任何情况下,作者或版权所有者均不对任何索赔、损害或其他责任负责,无论是在合同诉讼、侵权诉讼还是其他诉讼中,因本软件或本软件的使用或其他处理而引起、与之相关或由此产生的责任。