可定制分段控件 (CustomizableSegmentedControl)

如果您厌倦了标准的分段控件,这个框架正适合您!CustomizableSegmentedControl 是一个使用 SwiftUI 2.0 编写的可定制分段控件。

特性

要求

安装

SPM (Swift Package Manager)

使用 Package Dependencies 添加 https://github.com/Inxel/CustomizableSegmentedControl

CocoaPods

$ gem install cocoapods

要使用 CocoaPods 将 CustomizableSegmentedControl 集成到您的 Xcode 项目中,请在您的 Podfile 中指定它

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '14.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'CustomizableSegmentedControl'
end

然后,运行以下命令

$ pod install

手动

只需从 CustomizableSegmentedControl.swift 文件中复制并粘贴到您的项目中。

用法

只需使用参数设置 CustomizableSegmentedControl 视图

CustomizableSegmentedControl(
    selection: $selection,
    options: [.one, .two, .three],
    selectionView: {
        Color.white
            .clipShape(RoundedRectangle(cornerRadius: 10))
    },
    segmentContent: { option, isPressed in
        HStack(spacing: 4) {
            Text(option.title)
                .font(.system(size: 16, weight: .semibold, design: .rounded))

            option.imageName.map(Image.init(systemName:))
        }
        .foregroundColor(.white.opacity(isPressed ? 0.7 : 1))
        .lineLimit(1)
        .padding(.vertical, 10)
        .padding(.horizontal, 12)
        .frame(maxWidth: .infinity)
    }
)
.insets(.all, 4)
.segmentedControlContentStyle(.blendMode())
.segmentedControl(interSegmentSpacing: 2)
.segmentedControlSlidingAnimation(.bouncy)
.background(Color.blue)
.clipShape(RoundedRectangle(cornerRadius: 14))

image

包含一个小型演示项目,展示如何使用和定制它。 只需克隆 repo 并构建 Example 项目。

辅助功能

控件的每个分段都支持旁白。 默认情况下,会有一段像 "已选择,第一个选项,三个中的一个,按钮" 这样的文本。 您可以使用 CustomizableSegmentedControl 扩展 segmentAccessibilityValue 更改辅助功能值(在本例中为 "三个中的一个"),该扩展包含当前分段的索引和选项总数的 completion。

贡献

欢迎提交 Pull Requests 或向我发送您的反馈和建议!

作者

Artyom Zagoskin

许可证

CustomizableSegmentedControl 在 MIT 许可证下可用。 有关更多信息,请参见 LICENSE 文件。