一款易于使用、可自定义的仅包含图像的 UISwitch/Toggle

IMSwitch

lMSwitch 一览

IMSwitch 是一款带有图像选项的 SwiftUI 切换组件。它提供了一种视觉吸引力和可自定义的方式在两个选项之间切换。

一款简单易用、可自定义且包含图像的 UISwitch。完全基于 SwiftUI 构建

演示 IMSwitch

特性

  • 流畅动画
  • 可自定义外观
  • 支持从右到左 (RTL) 布局

要求

  • Swift 5.5+
  • iOS 15.0+

安装

Swift 包管理器 (SPM)

将以下内容添加到你的 Package.swift 文件:

.package(url: "https://github.com/mohamed-arradi/IMSwitch.git", from: "1.0.0")

用法

// 创建 ToggleState 实例
let toggleState = ToggleState()

// 使用图像和颜色初始化 IMSwitch
let imSwitch = IMSwitch(
    leftImage: Image(systemName: "bicycle"),
    rightImage: Image(systemName: "parkingsign.circle"),
    activeColor: .white,
    circleFilledColor: .blue,
    backgroundColor: Color.white.opacity(0.85),
    animation: .easeInOut,
    animationLength: 0.35,
    toggleState: toggleState
)

属性

  • leftImage:在切换处于左侧(非活动)状态时显示的图像。
  • rightImage:在切换处于右侧(活动)状态时显示的图像。
  • activeColor:应用于状态图像的颜色。
  • circleFilledColor:沿切换移动的填充圆圈颜色。
  • backgroundColor:切换的背景颜色。
  • animation:用于状态转换的动画类型。
  • animationLength:动画的持续时间(以秒为单位)。
  • isPrimaryOptionSelected:表示主要选项的状态。
  • isRTL:表示从右到左 (RTL) 的布局方向。

观察更改

import SwiftUI

struct YourView: View {
    @StateObject var toggleState = ToggleState()

    var body: some View {
        IMSwitch(
            // ... other parameters ...
            toggleState: toggleState
        )
        .onReceive(toggleState.$isPrimaryOptionSelected) { newValue in
            // React to changes in isPrimaryOptionSelected
            print("isPrimaryOptionSelected changed to \(newValue)")
        }
    }
}

包含 RTL 的示例

IMSwitch(
    // ...