从零打造Apple Music风格气泡选择器：Magnetic完全开发指南

从零打造Apple Music风格气泡选择器：Magnetic完全开发指南

【免费下载链接】Magnetic SpriteKit Floating Bubble Picker (inspired by Apple Music) 🧲 项目地址: https://gitcode.com/gh_mirrors/ma/Magnetic

你是否曾惊叹于Apple Music中优雅的音乐风格选择界面？那些悬浮的气泡标签随着手势灵动响应，既美观又直观。现在，借助Magnetic框架，你也能在自己的iOS应用中实现同款交互体验。本文将带你深入理解这个强大的SpriteKit组件，从基础集成到高级自定义，全方位掌握气泡选择器开发技巧。

读完本文你将获得：

• 掌握Magnetic框架的核心架构与工作原理
• 实现完整的气泡选择交互系统（包括添加/删除/多选功能）
• 定制符合App风格的气泡外观与动画效果
• 解决性能优化与特殊场景适配问题
• 探索3个实战案例的完整实现方案

框架概述：Magnetic核心架构解析

Magnetic是一个基于SpriteKit构建的iOS气泡选择器框架，其设计灵感源自Apple Music的流派选择界面。该框架采用面向对象的设计思想，主要由以下核心组件构成：

Magnetic框架的核心优势在于：

• 物理引擎驱动：利用SpriteKit的物理系统实现气泡间的自然排斥与吸引效果
• 高度可定制：从气泡形状到动画曲线，几乎所有视觉元素均可自定义
• 轻量级设计：核心代码不足1000行，易于理解和扩展
• 完整的交互支持：原生支持选择、取消选择、长按删除等手势操作

技术特性矩阵

功能特性	支持程度	关键API
气泡添加/删除	✅ 完整支持	addChild(_:) / removeFromParent()
多选功能	✅ 可配置	allowsMultipleSelection
自定义动画	✅ 支持重写	selectedAnimation() / deselectedAnimation()
图像支持	✅ 内置支持	image 属性设置
多行文本	✅ 原生支持	SKMultilineLabelNode
无障碍访问	✅ 完整支持	isAccessibilityElement
性能优化	✅ 已优化	物理体缓存 / 节点筛选

环境准备与基础集成

开发环境要求

Magnetic框架对开发环境有明确要求，在开始集成前请确保你的开发环境满足以下条件：

• iOS 13.0+ （Magnetic 3.3.x版本）
• Xcode 14.0+
• Swift 5.9+
• SpriteKit框架（通常随Xcode自动安装）

安装方式对比

Magnetic提供多种安装方式，你可以根据项目需求选择最合适的集成方案：

CocoaPods安装

这是最常用的集成方式，只需在Podfile中添加：

use_frameworks!
pod "Magnetic"

然后执行安装命令：

pod install

Swift Package Manager安装

在Xcode中选择File > Add Packages...，输入仓库URL：

https://gitcode.com/gh_mirrors/ma/Magnetic

选择合适的版本规则，点击"Add Package"完成安装。

手动集成

如果你需要对框架进行深度定制，可以选择手动集成：

1. 克隆仓库代码：

git clone https://gitcode.com/gh_mirrors/ma/Magnetic.git

2. 将Sources目录下的所有.swift文件添加到你的Xcode项目中
3. 确保项目已链接SpriteKit框架

基础集成步骤

完成安装后，只需几步即可将Magnetic集成到你的应用中：

1. 导入框架

import Magnetic

2. 创建Magnetic视图容器

class ViewController: UIViewController {
    var magnetic: Magnetic?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建Magnetic视图并添加到控制器视图
        let magneticView = MagneticView(frame: self.view.bounds)
        magnetic = magneticView.magnetic
        self.view.addSubview(magneticView)
        
        // 设置代理以接收选择事件
        magnetic?.magneticDelegate = self
    }
}

3. 实现代理方法

extension ViewController: MagneticDelegate {
    func magnetic(_ magnetic: Magnetic, didSelect node: Node) {
        print("选中了节点: \(node.text ?? "未命名")")
    }
    
    func magnetic(_ magnetic: Magnetic, didDeselect node: Node) {
        print("取消选中节点: \(node.text ?? "未命名")")
    }
}

4. 添加气泡节点

// 创建并添加一个圆形气泡节点
let node = Node(
    text: "Rock", 
    image: UIImage(named: "rock_music"), 
    color: .systemPurple, 
    radius: 40
)
magnetic?.addChild(node)

完成以上步骤后，你将看到一个基本的气泡选择器界面，气泡会自动排列并响应手势操作。

核心功能实现详解

气泡节点系统

Node类是Magnetic框架的核心视觉组件，它继承自SKShapeNode，提供了丰富的自定义选项。创建节点的方式有两种：使用预设的圆形或自定义路径。

创建圆形节点

最常用的是创建圆形气泡节点，只需指定半径即可：

// 创建基本圆形节点
let basicNode = Node(
    text: "Jazz", 
    image: UIImage(named: "jazz_icon"), 
    color: .systemBlue, 
    radius: 35
)

// 配置节点属性
basicNode.fontName = "SFProDisplay-Bold"
basicNode.fontSize = 14
basicNode.selectedColor = .systemIndigo // 选中状态颜色
basicNode.animationDuration = 0.3 // 动画持续时间

创建自定义形状节点

如果需要非圆形的气泡形状，可以通过CGPath创建自定义节点：

// 创建星形路径
let starPath = createStarPath(
    points: 5, 
    center: CGPoint(x: 0, y: 0), 
    outerRadius: 40, 
    innerRadius: 20
)

// 使用自定义路径创建节点
let customNode = Node(
    text: "Pop", 
    image: UIImage(named: "pop_music"), 
    color: .systemPink, 
    path: starPath,
    marginScale: 1.05
)

其中createStarPath函数实现如下：

func createStarPath(points: Int, center: CGPoint, outerRadius: CGFloat, innerRadius: CGFloat) -> CGPath {
    let path = UIBezierPath()
    let angleIncrement = CGFloat.pi * 2 / CGFloat(points)
    
    for i in 0..<points {
        let angle = CGFloat(i) * angleIncrement - CGFloat.pi / 2
        let outerPoint = CGPoint(
            x: center.x + cos(angle) * outerRadius,
            y: center.y + sin(angle) * outerRadius
        )
        
        if i == 0 {
            path.move(to: outerPoint)
        } else {
            path.addLine(to: outerPoint)
        }
        
        let innerAngle = angle + angleIncrement / 2
        let innerPoint = CGPoint(
            x: center.x + cos(innerAngle) * innerRadius,
            y: center.y + sin(innerAngle) * innerRadius
        )
        path.addLine(to: innerPoint)
    }
    
    path.close()
    return path.cgPath
}

交互系统详解

Magnetic框架提供了丰富的交互功能，这些交互通过SpriteKit的触摸事件系统实现，并通过代理模式将事件传递给应用层。

核心交互类型

1. 选择/取消选择：轻触气泡可切换其选择状态
2. 拖动交互：拖动任意气泡时，所有气泡会产生相应的物理运动
3. 长按删除：长按未选中的气泡可将其删除（默认禁用，需手动开启）

交互功能配置

// 启用长按删除功能
magnetic?.removeNodeOnLongPress = true
// 设置长按触发时间（默认0.35秒）
magnetic?.longPressDuration = 0.5
// 禁用多选功能
magnetic?.allowsMultipleSelection = false

自定义交互行为

通过重写Node类的交互方法，可以实现完全自定义的交互行为：

class CustomNode: Node {
    // 自定义选中动画
    override func selectedAnimation() {
        // 缩放动画
        let scaleAction = SKAction.scale(to: 1.2, duration: 0.2)
        // 旋转动画
        let rotateAction = SKAction.rotate(byAngle: .pi/4, duration: 0.2)
        // 组合动画
        let groupAction = SKAction.group([scaleAction, rotateAction])
        run(groupAction)
    }
    
    // 自定义取消选中动画
    override func deselectedAnimation() {
        let scaleAction = SKAction.scale(to: 1.0, duration: 0.2)
        let rotateAction = SKAction.rotate(toAngle: 0, duration: 0.2)
        let groupAction = SKAction.group([scaleAction, rotateAction])
        run(groupAction)
    }
    
    // 自定义删除动画
    override func removedAnimation(completion: @escaping () -> Void) {
        let scaleDown = SKAction.scale(to: 0, duration: 0.3)
        let fadeOut = SKAction.fadeOut(withDuration: 0.3)
        let group = SKAction.group([scaleDown, fadeOut])
        run(group) {
            completion() // 必须调用completion通知框架动画完成
        }
    }
}

物理系统调优

Magnetic的流畅交互依赖于SpriteKit物理系统的精确配置。理解这些物理参数的作用，可以帮助你根据项目需求优化交互体验。

核心物理参数

// 物理世界重力（默认为0，因为我们使用自定义力场）
magnetic?.physicsWorld.gravity = CGVector(dx: 0, dy: 0)

// 磁场强度（控制气泡间的排斥力大小）
magnetic?.magneticField.strength = Float(max(size.width, size.height))

// 磁场作用半径
magnetic?.magneticField.region = SKRegion(radius: 500)

每个Node的物理体属性也会影响交互效果：

// 气泡物理体配置（在Node类中）
body.allowsRotation = false // 禁止旋转
body.friction = 0 // 摩擦系数
body.linearDamping = 3 // 线性阻尼（控制运动衰减速度）

性能优化技巧

当气泡数量较多（超过20个）时，可能会出现性能下降。以下是一些优化建议：

1. 调整物理计算频率：

// 降低物理计算频率（默认60Hz）
magnetic?.physicsWorld.speed = 0.8

2. 优化碰撞检测：

// 设置碰撞掩码，减少不必要的碰撞计算
node.physicsBody?.categoryBitMask = 0x1 << 0
node.physicsBody?.collisionBitMask = 0x1 << 0

3. 动态物理体开关：

// 只在交互时启用物理体
magnetic?.isPaused = true

// 触摸开始时启用物理
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    magnetic?.isPaused = false
}

// 触摸结束后延迟禁用物理
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
        magnetic?.isPaused = true
    }
}

高级自定义与扩展

气泡外观深度定制

Magnetic允许你从多个维度定制气泡的视觉外观，打造完全符合App风格的选择器。

气泡内容定制

每个气泡可以包含文本、图像，或两者的组合。通过调整相关属性，可以实现丰富的视觉效果：

// 创建图文混合的气泡
let musicNode = Node(
    text: "Classical", 
    image: UIImage(named: "classical_music"), 
    color: .systemTeal, 
    radius: 40
)

// 配置文本样式
musicNode.fontName = "SFProRounded-Bold"
musicNode.fontSize = 13
musicNode.fontColor = .white

// 配置多行文本
musicNode.label.numberOfLines = 2 // 设置最大行数
musicNode.label.verticalAlignmentMode = .center // 垂直居中

// 调整内边距
musicNode.padding = 15
// 启用内容自适应大小
musicNode.scaleToFitContent = true

气泡背景效果

通过组合不同的SKShapeNode属性，可以创建复杂的气泡背景效果：

// 创建带边框的气泡
let borderedNode = Node(text: "Jazz", color: .systemPurple, radius: 40)
borderedNode.strokeColor = .white // 边框颜色
borderedNode.lineWidth = 2 // 边框宽度
borderedNode.glowWidth = 1 // 发光效果

// 创建渐变填充的气泡
let gradientNode = Node(text: "Rock", color: .clear, radius: 40)
let gradient = SKSpriteNode(
    texture: SKTexture(image: createGradientImage()),
    size: CGSize(width: 80, height: 80)
)
gradientNode.addChild(gradient)
gradientNode.zPosition = -1 // 确保在文本下方

其中createGradientImage()函数实现如下：

func createGradientImage() -> UIImage {
    let size = CGSize(width: 100, height: 100)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    defer { UIGraphicsEndImageContext() }
    
    let context = UIGraphicsGetCurrentContext()!
    let colors = [UIColor.systemPink.cgColor, UIColor.systemRed.cgColor] as CFArray
    let locations: [CGFloat] = [0, 1]
    
    let gradient = CGGradient(
        colorsSpace: CGColorSpaceCreateDeviceRGB(),
        colors: colors,
        locations: locations
    )!
    
    context.drawRadialGradient(
        gradient,
        startCenter: CGPoint(x: size.width/2, y: size.height/2),
        startRadius: 0,
        endCenter: CGPoint(x: size.width/2, y: size.height/2),
        endRadius: size.width/2,
        options: []
    )
    
    return UIGraphicsGetImageFromCurrentImageContext()!
}

动画系统详解

Magnetic内置了丰富的动画效果，这些动画基于SpriteKit的SKAction系统实现，可以通过重写方法或组合预定义动画来创建自定义效果。

预定义动画类型

框架提供了多种基础动画组件，可直接使用或组合：

1. 颜色过渡动画：平滑过渡节点颜色
2. 缩放动画：改变节点大小
3. 旋转动画：节点旋转效果
4. 移动动画：节点位置变化

组合动画示例

// 创建复杂的组合动画
func createComplexAnimation() -> SKAction {
    // 缩放序列
    let scaleUp = SKAction.scale(to: 1.3, duration: 0.2)
    let scaleDown = SKAction.scale(to: 1.1, duration: 0.2)
    let scaleSequence = SKAction.sequence([scaleUp, scaleDown])
    
    // 旋转动画
    let rotate = SKAction.rotate(byAngle: .pi/2, duration: 0.4)
    
    // 颜色动画
    let colorChange = SKAction.colorTransition(
        from: .systemBlue, 
        to: .systemPurple, 
        duration: 0.4
    )
    
    // 组合所有动画
    return SKAction.group([scaleSequence, rotate, colorChange])
}

// 使用自定义动画
let customNode = Node(text: "Custom", color: .systemBlue, radius: 40)
customNode.run(createComplexAnimation())

动画曲线定制

通过调整SKAction的timingMode属性，可以改变动画的时间曲线，实现更自然的动画效果：

// 创建弹性动画
let bounceScale = SKAction.scale(to: 1.5, duration: 0.5)
bounceScale.timingMode = .easeInEaseOut // 缓入缓出
bounceScale.timingFunction = CAMediaTimingFunction(name: .bounceOut)

// 创建弹簧动画
let springScale = SKAction.scale(to: 1.5, duration: 0.5)
springScale.timingMode = .easeInEaseOut
springScale.timingFunction = CAMediaTimingFunction(
    controlPoints: 0.1, 0.9, 0.2, 1.0
)

实战案例：打造音乐发现App

现在，让我们通过一个完整的实战案例，将Magnetic框架应用到音乐发现App中，实现一个功能完善的音乐风格选择器。

案例需求分析

我们需要实现一个音乐风格选择界面，具有以下功能：

• 显示20种音乐风格的气泡标签
• 支持单选模式（一次只能选择一种风格）
• 选中风格后显示相关推荐音乐
• 支持自定义风格标签（添加新的音乐风格）
• 提供重置选择功能

完整实现代码

1. 主视图控制器实现

import UIKit
import Magnetic

class MusicGenreSelectorViewController: UIViewController {
    
    // MARK: - Properties
    private var magnetic: Magnetic?
    private var selectedGenre: String?
    
    // 音乐风格数据
    private let musicGenres = [
        ("Pop", "pop", UIColor.systemPink),
        ("Rock", "rock", UIColor.systemRed),
        ("Jazz", "jazz", UIColor.systemTeal),
        ("Classical", "classical", UIColor.systemIndigo),
        ("Hip Hop", "hiphop", UIColor.systemOrange),
        ("Electronic", "electronic", UIColor.systemPurple),
        ("Country", "country", UIColor.systemGreen),
        ("R&B", "rnb", UIColor.systemBrown),
        ("Blues", "blues", UIColor.systemGray),
        ("Folk", "folk", UIColor.systemMint),
        ("Reggae", "reggae", UIColor.systemYellow),
        ("Metal", "metal", UIColor.systemGray6),
        ("Punk", "punk", UIColor.systemCyan),
        ("Soul", "soul", UIColor.systemOrange),
        ("Funk", "funk", UIColor.systemPurple),
        ("Latin", "latin", UIColor.systemRed),
        ("Indie", "indie", UIColor.systemBlue),
        ("Alternative", "alternative", UIColor.systemGray),
        ("World", "world", UIColor.systemGreen),
        ("New Age", "newage", UIColor.systemTeal)
    ]
    
    // MARK: - Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        setupMagnetic()
        populateGenres()
    }
    
    // MARK: - Setup
    private func setupUI() {
        title = "Select Music Genres"
        view.backgroundColor = .systemBackground
        
        // 添加重置按钮
        navigationItem.rightBarButtonItem = UIBarButtonItem(
            barButtonSystemItem: .refresh,
            target: self,
            action: #selector(resetSelection)
        )
        
        // 添加添加按钮
        navigationItem.leftBarButtonItem = UIBarButtonItem(
            barButtonSystemItem: .add,
            target: self,
            action: #selector(addCustomGenre)
        )
    }
    
    private func setupMagnetic() {
        // 创建Magnetic视图
        let magneticView = MagneticView(frame: view.bounds)
        magneticView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(magneticView)
        
        // 配置Magnetic实例
        magnetic = magneticView.magnetic
        magnetic?.magneticDelegate = self
        magnetic?.allowsMultipleSelection = false // 启用单选模式
        magnetic?.backgroundColor = .systemBackground
    }
    
    // MARK: - Data Population
    private func populateGenres() {
        for (name, imageName, color) in musicGenres {
            addGenreNode(name: name, imageName: imageName, color: color)
        }
    }
    
    private func addGenreNode(name: String, imageName: String, color: UIColor) {
        guard let magnetic = magnetic else { return }
        
        // 获取图像
        let image = UIImage(named: imageName)
        
        // 创建节点
        let node = Node(
            text: name,
            image: image,
            color: color,
            radius: 45
        )
        
        // 配置节点属性
        node.fontName = "SFProDisplay-Semibold"
        node.fontSize = 14
        node.selectedColor = UIColor(
            hue: color.hue,
            saturation: color.saturation * 0.8,
            brightness: color.brightness * 0.9,
            alpha: 1.0
        )
        node.scaleToFitContent = true
        node.padding = 15
        
        // 添加到磁场
        magnetic.addChild(node)
    }
    
    // MARK: - Actions
    @objc private func resetSelection() {
        magnetic?.reset()
        selectedGenre = nil
        showRecommendation(nil)
    }
    
    @objc private func addCustomGenre() {
        let alert = UIAlertController(
            title: "Add Custom Genre",
            message: "Enter name for custom music genre",
            preferredStyle: .alert
        )
        
        alert.addTextField { textField in
            textField.placeholder = "Genre name"
            textField.autocapitalizationType = .words
        }
        
        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
        alert.addAction(UIAlertAction(title: "Add", style: .default) { [weak self] _ in
            guard let self = self,
                  let text = alert.textFields?.first?.text,
                  !text.isEmpty else { return }
            
            // 创建随机颜色
            let randomColor = UIColor(
                hue: CGFloat.random(in: 0...1),
                saturation: CGFloat.random(in: 0.5...0.8),
                brightness: CGFloat.random(in: 0.7...0.9),
                alpha: 1.0
            )
            
            // 添加自定义节点
            self.addGenreNode(
                name: text,
                imageName: "custom",
                color: randomColor
            )
        })
        
        present(alert, animated: true)
    }
    
    // MARK: - Recommendation
    private func showRecommendation(_ genre: String?) {
        // 更新推荐显示逻辑
        if let genre = genre {
            print("Showing recommendations for \(genre)")
            // 在实际应用中，这里会更新UI显示推荐内容
        } else {
            print("No genre selected")
            // 清除推荐显示
        }
    }
}

// MARK: - MagneticDelegate
extension MusicGenreSelectorViewController: MagneticDelegate {
    func magnetic(_ magnetic: Magnetic, didSelect node: Node) {
        selectedGenre = node.text
        showRecommendation(selectedGenre)
    }
    
    func magnetic(_ magnetic: Magnetic, didDeselect node: Node) {
        if selectedGenre == node.text {
            selectedGenre = nil
            showRecommendation(nil)
        }
    }
    
    func magnetic(_ magnetic: Magnetic, didRemove node: Node) {
        if selectedGenre == node.text {
            selectedGenre = nil
            showRecommendation(nil)
        }
    }
}

2. 自定义节点实现

import Magnetic

class MusicGenreNode: Node {
    // 自定义选中动画
    override func selectedAnimation() {
        let scaleUp = SKAction.scale(to: 1.2, duration: 0.2)
        let scaleDown = SKAction.scale(to: 1.1, duration: 0.1)
        let scaleSequence = SKAction.sequence([scaleUp, scaleDown])
        
        let glow = SKAction.run {
            self.glowWidth = 3.0
        }
        
        let group = SKAction.group([scaleSequence, glow])
        run(group)
    }
    
    // 自定义取消选中动画
    override func deselectedAnimation() {
        let scaleAction = SKAction.scale(to: 1.0, duration: 0.2)
        let glowAction = SKAction.run {
            self.glowWidth = 0.0
        }
        
        let group = SKAction.group([scaleAction, glowAction])
        run(group)
    }
    
    // 自定义删除动画
    override func removedAnimation(completion: @escaping () -> Void) {
        let scaleDown = SKAction.scale(to: 0, duration: 0.3)
        let fadeOut = SKAction.fadeOut(withDuration: 0.3)
        let moveUp = SKAction.moveBy(x: 0, y: 50, duration: 0.3)
        let group = SKAction.group([scaleDown, fadeOut, moveUp])
        run(group) {
            completion()
        }
    }
}

3. 界面布局与约束

MagneticView需要正确设置以适应不同屏幕尺寸：

// 在视图控制器的viewDidLoad方法中
let magneticView = MagneticView(frame: view.bounds)
magneticView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
// 添加顶部约束以避开导航栏
magneticView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
magneticView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
magneticView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
magneticView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

性能优化策略

对于这个音乐风格选择器，我们采取了以下性能优化措施：

1. 图像资源优化：所有气泡图像使用相同尺寸（90x90px）并预先缓存
2. 物理计算优化：当气泡数量超过15个时，降低物理世界速度
3. 节点回收：重置时重用现有节点而非创建新节点
4. 渲染优化：禁用未显示区域的节点渲染

// 性能优化代码示例
func optimizePerformance() {
    // 动态调整物理计算频率
    let nodeCount = magnetic?.children.count ?? 0
    if nodeCount > 15 {
        magnetic?.physicsWorld.speed = 0.8
    } else {
        magnetic?.physicsWorld.speed = 1.0
    }
    
    // 启用纹理缓存
    SKTextureAtlas.preloadTextureAtlases([SKTextureAtlas(named: "GenreIcons")]) {
        print("Texture atlas preloaded")
    }
}

高级应用与扩展

与SwiftUI集成

虽然Magnetic是基于UIKit和SpriteKit构建的，但我们可以通过UIViewRepresentable协议将其集成到SwiftUI应用中：

import SwiftUI
import Magnetic

struct MagneticSwiftUIView: UIViewRepresentable {
    // 选中的风格
    @Binding var selectedGenres: [String]
    // 风格数据
    var genres: [(name: String, image: UIImage?, color: UIColor)]
    
    // 创建协调器
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    // 创建UIView
    func makeUIView(context: Context) -> MagneticView {
        let magneticView = MagneticView(frame: .zero)
        magneticView.magnetic.magneticDelegate = context.coordinator
        magneticView.magnetic.allowsMultipleSelection = true
        
        // 添加风格节点
        for genre in genres {
            let node = Node(
                text: genre.name,
                image: genre.image,
                color: genre.color,
                radius: 40
            )
            magneticView.magnetic.addChild(node)
        }
        
        return magneticView
    }
    
    // 更新UIView
    func updateUIView(_ uiView: MagneticView, context: Context) {
        // 同步选中状态
        let magnetic = uiView.magnetic
        let currentSelected = magnetic.selectedChildren.map { $0.text ?? "" }
        
        if currentSelected != selectedGenres {
            // 这里可以根据需要更新节点选中状态
        }
    }
    
    // 协调器类，处理代理事件
    class Coordinator: NSObject, MagneticDelegate {
        var parent: MagneticSwiftUIView
        
        init(_ parent: MagneticSwiftUIView) {
            self.parent = parent
        }
        
        func magnetic(_ magnetic: Magnetic, didSelect node: Node) {
            guard let text = node.text else { return }
            parent.selectedGenres.append(text)
        }
        
        func magnetic(_ magnetic: Magnetic, didDeselect node: Node) {
            guard let text = node.text else { return }
            parent.selectedGenres.removeAll { $0 == text }
        }
    }
}

// 使用SwiftUI组件
struct GenreSelectorView: View {
    @State private var selectedGenres: [String] = []
    
    var body: some View {
        MagneticSwiftUIView(
            selectedGenres: $selectedGenres,
            genres: [
                ("Pop", UIImage(named: "pop"), .systemPink),
                ("Rock", UIImage(named: "rock"), .systemRed),
                ("Jazz", UIImage(named: "jazz"), .systemTeal)
            ]
        )
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

跨平台适配

Magnetic主要面向iOS平台，但通过适当修改，也可以使其在iPadOS上提供更好的体验：

// iPad适配代码
func adaptForIPad() {
    // 增大节点尺寸
    let nodeSize: CGFloat = UIDevice.current.userInterfaceIdiom == .pad ? 55 : 40
    
    // 调整物理参数
    if UIDevice.current.userInterfaceIdiom == .pad {
        magnetic?.magneticField.strength *= 1.5
        magnetic?.magneticField.region = SKRegion(radius: 800)
    }
}

无障碍功能增强

为了确保所有用户都能使用气泡选择器，我们需要增强其无障碍功能：

// 无障碍功能增强
func enhanceAccessibility(for node: Node) {
    // 设置无障碍标签
    node.accessibilityLabel = node.text
    
    // 设置无障碍提示
    node.accessibilityHint = node.isSelected 
        ? "Double tap to deselect" 
        : "Double tap to select"
    
    // 设置无障碍特征
    node.accessibilityTraits = node.isSelected 
        ? .selected 
        : .none
    
    // 添加自定义无障碍操作
    node.accessibilityCustomActions = [
        UIAccessibilityCustomAction(name: "Remove") { _ in
            node.removeFromParent()
            return true
        }
    ]
}

常见问题与解决方案

性能优化

问题：当气泡数量超过20个时，界面出现卡顿

解决方案：

1. 降低物理世界更新频率：magnetic?.physicsWorld.speed = 0.7
2. 减少每个节点的物理计算复杂度：简化碰撞路径
3. 实现节点重用机制，避免频繁创建和销毁节点

// 节点重用池实现
class NodePool {
    private var unusedNodes = [Node]()
    
    // 获取节点
    func getNode(
        text: String, 
        image: UIImage?, 
        color: UIColor, 
        radius: CGFloat
    ) -> Node {
        if let node = unusedNodes.popLast() {
            node.text = text
            node.image = image
            node.color = color
            node.update(radius: radius)
            node.isHidden = false
            return node
        } else {
            return Node(text: text, image: image, color: color, radius: radius)
        }
    }
    
    // 回收节点
    func recycleNode(_ node: Node) {
        node.isHidden = true
        node.removeAllActions()
        unusedNodes.append(node)
    }
}

布局问题

问题：气泡在不同屏幕尺寸上分布不均匀

解决方案：

1. 使用相对尺寸而非固定尺寸创建节点
2. 根据屏幕尺寸动态调整磁场参数
3. 实现自适应的节点大小计算

// 自适应节点大小
func adaptiveNodeRadius() -> CGFloat {
    let screenWidth = UIScreen.main.bounds.width
    // 根据屏幕宽度计算节点大小
    return min(max(screenWidth / 10, 35), 55)
}

兼容性问题

问题：在iOS 13以下系统上崩溃

解决方案：

1. 确保使用Magnetic 3.2.1版本（支持iOS 9+）
2. 添加条件编译以处理不同版本的API差异
3. 避免使用iOS 13+特有的API

// 版本兼容代码
if #available(iOS 13.0, *) {
    node.selectedColor = UIColor { traitCollection in
        traitCollection.userInterfaceStyle == .dark 
            ? .systemPurple 
            : .systemBlue
    }
} else {
    node.selectedColor = .systemBlue
}

总结与未来展望

Magnetic框架为iOS开发者提供了一个功能强大且高度可定制的气泡选择器解决方案。通过本文的介绍，你已经了解了从基础集成到高级自定义的全部知识，包括框架架构、核心功能、自定义技巧和性能优化策略。

关键知识点回顾

• Magnetic基于SpriteKit构建，利用物理引擎实现自然的气泡交互
• 核心组件包括Magnetic（管理物理世界）、Node（气泡实体）和MagneticDelegate（事件回调）
• 通过重写Node类的方法可以实现完全自定义的视觉效果和交互行为
• 性能优化关键在于合理配置物理参数和实现节点重用

未来发展方向

Magnetic框架仍在不断发展中，未来可能会加入以下功能：

• 支持3D气泡效果
• 增强的文本排版功能
• 更多内置动画效果
• 与ARKit集成实现AR气泡选择器

无论你是要为音乐App创建风格选择器，还是为电商App实现商品分类标签，Magnetic都能为你提供优雅而强大的解决方案。现在就动手尝试，为你的App添加这一引人入胜的交互元素吧！

【免费下载链接】Magnetic SpriteKit Floating Bubble Picker (inspired by Apple Music) 🧲 项目地址: https://gitcode.com/gh_mirrors/ma/Magnetic