用 Swift 编写的动画顶部/底部分段控件。
查看 dribbble 上的这个项目。
use_frameworks!
pod 'Segmentio'
需要 CocoaPods v1.1.0 或更高版本
github "Yalantis/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!
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
特此授予任何获得本软件及相关文档文件(“软件”)副本的人员免费许可,以便处理本软件,不受限制,包括但不限于使用、复制、修改、合并、出版、分发、再许可和/或销售本软件副本的权利,并允许向接受本软件的人员提供以下条件
上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。
本软件“按原样”提供,不作任何明示或暗示的保证,包括但不限于适销性、特定用途的适用性和不侵权保证。在任何情况下,作者或版权所有者均不对任何索赔、损害或其他责任负责,无论是在合同诉讼、侵权诉讼还是其他诉讼中,因本软件或本软件的使用或其他处理而引起、与之相关或由此产生的责任。