FoldingCell与CoreGraphics：自定义绘制折叠指示器-优快云博客

FoldingCell与CoreGraphics：自定义绘制折叠指示器

【免费下载链接】folding-cell :octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion 项目地址: https://gitcode.com/gh_mirrors/fo/folding-cell

你是否在iOS应用开发中遇到过这样的问题：表格单元格展开/折叠时缺乏直观的视觉反馈？用户常常不确定某个单元格是否可以交互，或者点击后会发生什么。本文将通过FoldingCell框架，结合CoreGraphics（图形绘制框架），教你如何为折叠单元格添加清晰的视觉指示器，让用户体验提升一个档次。读完本文，你将能够自定义折叠指示器的样式、动画和交互效果，使应用界面更加专业和友好。

FoldingCell框架简介

FoldingCell是一个由Ramotion开发的iOS开源框架，它提供了一种带有平滑折叠动画效果的表格单元格。该框架的核心文件是FoldingCell/FoldingCell/FoldingCell.swift，其中定义了FoldingCell类，继承自UITableViewCell。

FoldingCell的主要特性包括：

平滑的折叠/展开动画效果
可自定义的折叠层数（通过itemCount属性设置）
前后视图分离（foregroundView和containerView）
可定制的动画时长和过渡效果

在实际使用中，我们通常会创建FoldingCell的子类来实现自定义功能，如示例中的FoldingCell/FoldingCell-Demo/DemoCell.swift。

为什么需要自定义折叠指示器

默认情况下，FoldingCell并没有提供明显的折叠状态指示器。用户可能无法直观地知道某个单元格是可以折叠或展开的。添加一个清晰的指示器有以下好处：

提升可用性：让用户一眼就能识别可交互的单元格
提供状态反馈：显示当前是展开还是折叠状态
增强视觉吸引力：通过动画效果提升用户体验
保持界面一致性：与应用中的其他交互元素保持风格统一

CoreGraphics基础

CoreGraphics是iOS开发中用于2D图形绘制的核心框架。它提供了一套强大的API，允许开发者直接在屏幕上绘制图形、文本和图像。在FoldingCell中，我们可以利用CoreGraphics来自定义绘制折叠指示器。

CoreGraphics的主要概念包括：

图形上下文（CGContext）：绘制操作的画布
路径（CGPath）：定义绘制的形状
颜色（CGColor）：用于填充和描边
变换（CGAffineTransform）：对绘制内容进行旋转、缩放等变换

自定义折叠指示器的实现步骤

步骤1：创建自定义FoldingCell子类

首先，我们需要创建一个FoldingCell的子类，例如CustomIndicatorFoldingCell。在这个子类中，我们将添加指示器的绘制代码。

import FoldingCell
import UIKit

class CustomIndicatorFoldingCell: FoldingCell {
    // 自定义代码将在这里添加
}

步骤2：添加指示器属性

在自定义类中添加用于控制指示器外观的属性：

// 指示器颜色
@IBInspectable var indicatorColor: UIColor = .darkGray
// 指示器大小
@IBInspectable var indicatorSize: CGFloat = 24
// 指示器边距
@IBInspectable var indicatorMargin: CGFloat = 16

步骤3：重写draw方法绘制指示器

利用CoreGraphics在单元格上绘制指示器。我们将重写foregroundView的draw方法：

override func draw(_ rect: CGRect) {
    super.draw(rect)
    
    // 获取图形上下文
    guard let context = UIGraphicsGetCurrentContext() else { return }
    
    // 设置指示器位置（右上角）
    let indicatorRect = CGRect(
        x: rect.width - indicatorSize - indicatorMargin,
        y: indicatorMargin,
        width: indicatorSize,
        height: indicatorSize
    )
    
    // 绘制指示器
    context.saveGState()
    context.translateBy(x: indicatorRect.midX, y: indicatorRect.midY)
    
    // 根据展开状态旋转指示器
    let angle: CGFloat = isUnfolded ? .pi : 0
    context.rotate(by: angle)
    
    // 绘制向下箭头
    let path = UIBezierPath()
    path.move(to: CGPoint(x: -indicatorSize/4, y: -indicatorSize/4))
    path.addLine(to: CGPoint(x: 0, y: indicatorSize/4))
    path.addLine(to: CGPoint(x: indicatorSize/4, y: -indicatorSize/4))
    
    indicatorColor.setStroke()
    path.lineWidth = 2
    path.lineCapStyle = .round
    path.lineJoinStyle = .round
    path.stroke()
    
    context.restoreGState()
}

步骤4：处理状态变化时的重绘

当单元格的展开状态发生变化时，我们需要更新指示器。重写unfold方法：

override func unfold(_ value: Bool, animated: Bool = true, completion: (() -> Void)? = nil) {
    super.unfold(value, animated: animated) {
        // 状态变化后重绘指示器
        self.setNeedsDisplay()
        completion?()
    }
}

自定义指示器样式示例

箭头指示器

上面的代码实现了一个简单的箭头指示器，它会根据单元格状态旋转。当单元格展开时，箭头指向上方；当单元格折叠时，箭头指向下方。

加号/减号指示器

你也可以将指示器改为加号/减号样式：

// 绘制加号/减号指示器
let path = UIBezierPath()

// 水平线
path.move(to: CGPoint(x: -indicatorSize/4, y: 0))
path.addLine(to: CGPoint(x: indicatorSize/4, y: 0))

// 如果是展开状态，添加垂直线（形成减号）
if isUnfolded {
    path.move(to: CGPoint(x: 0, y: -indicatorSize/4))
    path.addLine(to: CGPoint(x: 0, y: indicatorSize/4))
}

使用图像作为指示器

除了绘制基本形状，你还可以使用图像作为指示器：

// 使用图像作为指示器
if let image = UIImage(named: "indicator_arrow") {
    // 根据状态旋转图像
    let rotatedImage = isUnfolded ? 
        image.rotated(by: .pi) : 
        image
    
    rotatedImage.draw(in: indicatorRect)
}

集成到现有项目

要将自定义指示器集成到现有FoldingCell项目中，只需将原来使用FoldingCell的地方替换为我们的CustomIndicatorFoldingCell即可。

例如，在FoldingCell/FoldingCell-Demo/TableViewController.swift中，将单元格注册和重用的类名改为CustomIndicatorFoldingCell。

动画效果优化

为了使指示器的状态变化更加平滑，我们可以添加过渡动画：

// 添加指示器过渡动画
UIView.transition(with: self, duration: 0.3, options: .transitionCrossDissolve, animations: {
    self.setNeedsDisplay()
}, completion: nil)

实际应用示例

下面是一个完整的自定义FoldingCell子类示例，包含了折叠指示器和其他自定义功能：

import FoldingCell
import UIKit

class CustomIndicatorFoldingCell: FoldingCell {
    @IBInspectable var indicatorColor: UIColor = .darkGray
    @IBInspectable var indicatorSize: CGFloat = 24
    @IBInspectable var indicatorMargin: CGFloat = 16
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // 初始设置
        foregroundView.addObserver(self, forKeyPath: "bounds", options: [.new, .old], context: nil)
    }
    
    deinit {
        foregroundView.removeObserver(self, forKeyPath: "bounds")
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "bounds" {
            setNeedsDisplay()
        }
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        // 指示器绘制代码
        // ...（如前面步骤所示）
    }
    
    override func unfold(_ value: Bool, animated: Bool = true, completion: (() -> Void)? = nil) {
        super.unfold(value, animated: animated) {
            if animated {
                UIView.transition(with: self, duration: 0.3, options: .transitionCrossDissolve, animations: {
                    self.setNeedsDisplay()
                }, completion: nil)
            } else {
                self.setNeedsDisplay()
            }
            completion?()
        }
    }
}

常见问题与解决方案

在实现自定义折叠指示器时，可能会遇到一些常见问题。下面是解决方案：

问题1：指示器位置不固定

如果发现指示器位置在单元格大小变化时不固定，可能是因为没有正确处理边界变化。解决方案是监听bounds变化，并在变化时重绘指示器。

问题2：动画不流畅

如果指示器动画不流畅，可以尝试以下优化：

减少绘制复杂度
使用shouldRasterize提高性能
优化动画时长，与FoldingCell的动画保持一致

问题3：指示器在某些状态下不可见

这通常是因为绘制顺序问题，确保指示器绘制在其他内容之上：

// 确保指示器绘制在最上层
foregroundView.layer.zPosition = 100

总结

通过本文的介绍，你已经了解了如何使用CoreGraphics为FoldingCell添加自定义折叠指示器。我们学习了基本的绘制方法、状态管理和动画优化技巧。这些知识不仅适用于FoldingCell，还可以应用到iOS开发中的其他图形绘制场景。

官方文档：README.md 核心实现：FoldingCell/FoldingCell/FoldingCell.swift 示例代码：FoldingCell/FoldingCell-Demo/DemoCell.swift

希望本文对你有所帮助，让你的iOS应用界面更加专业和用户友好！

【免费下载链接】folding-cell :octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion 项目地址: https://gitcode.com/gh_mirrors/fo/folding-cell

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考