ElegantColorPalette 1.2.0

ElegantColorPalette 1.2.0

×

由 Kevin Li 维护。

ElegantColorPalette 1.2.0

  • By
  • Kevin Li

ElegantColorPalette

platforms pod Carthage compatible Swift Package Manager compatible License: MIT

UIKit 和 SwiftUI 中缺失的优雅颜色选择器。

此示例 GIF 来自 ElegantTimeline。为了更简单的演示，您可以查看此存储库中的 3 个示例项目之一。哈哈，第二个 GIF 是我尽可能快地尝试点击尽可能多的节点。您可以看到，没有任何副作用。

介绍

ElegantColorPalette 提供了 24 种不同的主题，灵感来自于 TimePage，并且是类似演示的大型存储库的一部分： TimePage Clone。

顶级视图是一个 SKView，它显示了一个颜色节点的 SKScene。颜色节点是 SKShapeNode 的子类。对于想要学习 SpriteKit 或已经是经验丰富的开发者，包含颜色节点的 SKScene 可用于更细粒度的调整。

功能

  • 动态颜色节点 - 通过传递动态的 UIColor，可以让颜色节点适当地调整到浅色或深色模式
  • 广泛的节点可定制性 - 字体名称、字体颜色、节点颜色、节点半径等等
  • 自定义节点动画 - 吸附、缩放、淡入淡出、高亮显示等等
  • 用新颜色更新调色板
  • 横屏和竖屏支持
  • 广泛的文档 - 随着您使用此库，您将注意到 XCode 中的文档

基本用法

对于 SwiftUI

import ElegantColorPalette

struct ExampleSwiftUIView: View {

    @State private var selectedColor: PaletteColor = .kiwiGreen

    var body: some View {
        ColorPaletteBindingView(selectedColor: $selectedColor, colors: PaletteColor.allColors)
    }

}

对于 UIKit（编程方式）

import ElegantColorPalette

struct ExampleUIKitViewController: UIViewController {

    ...

    private lazy var paletteView: ColorPaletteView = {
        let paletteView = ColorPaletteView(colors: PaletteColor.allColors)
        paletteView.translatesAutoresizingMaskIntoConstraints = false
        return paletteView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        ...
        
        view.addSubview(paletteView)
        NSLayoutConstraint.activate([
            ...
        ])

        paletteView
            .didSelectColor { [unowned self] color in
                ...
            }
    }

}

对于 UIKit（storyboard 和 XIB）

import ElegantColorPalette

struct ExampleUIKitViewController: UIViewController {

    ...
    
    @IBOutlet weak var paletteView: ColorPaletteView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        ...
        
        paletteView
            .update(withColors: PaletteColor.allColors)
            .didSelectColor { [unowned self] color in
                ...
            }
    }

}

自定义

调色板颜色

调色板颜色表示单个节点的颜色模型。

public struct PaletteColor: Equatable {

    public let name: String
    public let uiColor: UIColor

    public var color: Color {
        uiColor.asColor
    }

}

由于在iOS 13中无法从Color获取UIColor，您必须使用UIColor初始化PaletteColor。如果您支持浅色和深色主题，您将希望通过资产包或其他方法（如计算属性）传递一个动态的UIColor。

对于SwiftUI用户，PaletteColor提供了一个方便的color属性。

节点自定义

节点可以通过库本身提供的多种节点修饰函数轻松自定义。您还可以通过NodeStyle和NodeModifier创建自己的节点修饰符，就像在SwiftUI中使用ButtonStyle和ViewModifier一样。

请参阅NodeConfiguration以更好地理解节点的各种状态，从而确定何时最好应用修饰符。

以下示例演示了创建一个自定义节点样式来自定义默认节点样式的过程。您必须将您的自定义修饰符应用于defaultStyledNode，以保留在演示gif中看到的抓取效果、高亮边框等。然而，您总是可以从头开始，为不同的状态创建自己的节点样式。

struct CustomNodeStyle: NodeStyle {

    func updateNode(configuration: Configuration) -> ColorNode {
        configuration.defaultStyledNode
            .radius(30)
            .font(name: "Thonburi")
    }

}

创建自己的节点修饰符需要先了解SKNode。让我们看一下ScaleFadeModifier。此修饰符负责通过SKActions对节点进行缩放和淡入淡出。

struct ScaleFadeModifier: NodeModifier {

    let scale: CGFloat
    let opacity: CGFloat
    let animationDuration: TimeInterval

    func body(content: Content) -> ColorNode {
        let scaleAction = SKAction.scale(to: scale, duration: animationDuration)
        let opacityAction = SKAction.fadeAlpha(to: opacity, duration: animationDuration)

        content.run(.group([scaleAction, opacityAction]))

        return content
    }

}

为了使用您的自定义NodeStyle，请将其传递给nodeStyle修饰符。

// For UIKit
ColorPaletteView(...)
    .nodeStyle(CustomNodeStyle())
     
// For SwiftUI
ColorPaletteBindingView(...)
    .nodeStyle(CustomNodeStyle())

聚焦自定义

使用 focus 来自定义聚焦动画的位置、速度或平滑率。

// For UIKit
ColorPaletteView(...)
    .focus(location: .zero, speed: 1600, rate: 0.2)
     
// For SwiftUI
ColorPaletteBindingView(...)
    .focus(location: .zero, speed: 1600, rate: 0.2)

使用 canMoveFocusedNode来自定义聚焦节点是否可移动。

// For UIKit
ColorPaletteView(...)
    .canMoveFocusedNode(false)
     
// For SwiftUI
ColorPaletteBindingView(...)
    .canMoveFocusedNode(false)

对于 SwiftUI，您还可以自定义选择新调色板颜色时发生的绑定动画。

ColorPaletteBindingView(...)
    .bindingAnimation(.easeInOut)

场景自定义

如介绍中所述，SKScene 驱动视图是通过名为 paletteScene 的属性公开的。如果您熟悉 SpriteKit，您可以更改场景以获得更大的灵活性。

使用 spawnConfiguration来自定义节点可以生成的区域。

// For UIKit
ColorPaletteView(...)
    .spawnConfiguration(widthRatio: 1, heightRatio: 1)
     
// For SwiftUI
ColorPaletteBindingView(...)
    .spawnConfiguration(widthRatio: 1, heightRatio: 1)

使用 rotation来自定义节点围绕聚焦位置的旋转速度。

// For UIKit
ColorPaletteView(...)
    .rotation(multiplier: 4)
     
// For SwiftUI
ColorPaletteBindingView(...)
    .rotation(multiplier: 4)

事件

使用 didSelectColor 来响应选中调色板颜色的任何变化。

// For UIKit
ColorPaletteView(...)
     .didSelectColor { paletteColor in
         // do something
     }
     
// For SwiftUI
ColorPaletteBindingView(...)
     .didSelectColor { paletteColor in
         // do something
     }

示例

共有3个示例，涵盖了UIKit故事板、XIB文件和程序化实例化，以及SwiftUI。

需求

  • iOS 13+(统计数据显示90%的用户使用iOS 13)
  • Xcode 11+
  • Swift 5.1+

安装

ElegantColorPalette不包含外部依赖。

以下是当前支持的安装选项

手动

在资源中，将ElegantColorPalette文件夹拖放到您的项目中。

CocoaPods

# Podfile
use_frameworks!

target 'YOUR_TARGET_NAME' do
    pod 'ElegantColorPalette', '~> 1.2'
end

替换YOUR_TARGET_NAME，然后在Podfile目录中输入以下内容：

$ pod install

Carthage

将以下内容添加到Cartfile

github "ThasianX/ElegantColorPalette" ~> 1.2.0

$ carthage update

Swift Package Manager

使用Xcode 11，转到文件 -> Swift Packages -> 添加包依赖并输入https://github.com/ThasianX/ElegantColorPalette

如果您使用Package.swift，您也可以轻松地将ElegantColorPalette添加为依赖项。

// swift-tools-version:5.1

import PackageDescription

let package = Package(
  name: "TestProject",
  dependencies: [
    .package(url: "https://github.com/ThasianX/ElegantColorPalette", from: "1.2.0")
  ],
  targets: [
    .target(name: "TestProject", dependencies: ["ElegantColorPalette"])
  ]
)
$ swift build

贡献

如果您发现了一个错误，或者想建议新功能或改进，首先在 问题跟踪器 中进行搜索会更好；我们虽然不介意重复的提交，但保持问题唯一可以帮我们节省时间并集中精力。如果找不到您的问题，您可以自由地 提交一个新的问题。

授权

本项目的授权协议为 MIT 许可证 - 详细内容请参阅 授权文件