如何在Swift中实现可展开收起的标签列表

在iOS应用开发中，可展开和收起的标签列表是一种常见的用户界面需求，特别适用于展示分组数据、分类信息或层级结构。本文将详细介绍如何使用Swift实现这一功能，涵盖UIKit和SwiftUI两种主要框架，提供完整的代码示例和优化建议，帮助开发者创建流畅、用户友好的标签列表界面。

使用UIKit的UITableView实现可展开收起的标签列表

UIKit中的UITableView是构建列表界面的核心组件，适用于实现可展开和收起的标签列表。以下是详细的实现步骤，包括数据模型设计、自定义单元格以及展开收起逻辑的实现。

1. 数据模型设计

首先，我们需要设计一个数据模型来表示每个标签及其子标签的层级结构。使用结构体（struct）来定义标签，包含名称、是否展开的状态以及子标签数组。

struct Tag {
    let name: String
    var isExpanded: Bool
    var subTags: [Tag]?
}
    

在这个结构体中：

• name：标签的名称。
• isExpanded：表示该标签当前是否处于展开状态。
• subTags：子标签的数组，为nil时表示没有子标签。

2. 创建自定义UITableViewCell

为了展示标签及其子标签，我们需要创建一个自定义的UITableViewCell，用于显示标签名称和控制展开收起的按钮。

import UIKit

class ExpandableTableViewCell: UITableViewCell {
    let tagLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let toggleButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("展开", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()
    
    var toggleAction: (() -> Void)?
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
    }
    
    private func setupViews() {
        contentView.addSubview(tagLabel)
        contentView.addSubview(toggleButton)
        
        NSLayoutConstraint.activate([
            tagLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            tagLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            
            toggleButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            toggleButton.centerYAnchor.constraint(equalTo: contentView.centerYAnchor)
        ])
        
        toggleButton.addTarget(self, action: #selector(toggleButtonTapped), for: .touchUpInside)
    }
    
    @objc private func toggleButtonTapped() {
        toggleAction?()
    }
    
    func configure(with tag: Tag) {
        tagLabel.text = tag.name
        let buttonTitle = tag.isExpanded ? "收起" : "展开"
        toggleButton.setTitle(buttonTitle, for: .normal)
    }
}
    

在上述代码中：

• tagLabel用于显示标签名称。
• toggleButton用于控制标签的展开和收起。
• toggleAction是一个闭包，当按钮被点击时执行，用于在控制器中处理展开收起逻辑。

3. 配置视图控制器

接下来，我们在视图控制器中配置UITableView，并实现数据源和代理方法，以支持标签列表的展示和交互。

import UIKit

class ExpandableTableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    let tableView = UITableView()
    var tags: [Tag] = [
        Tag(name: "水果", isExpanded: false, subTags: [
            Tag(name: "苹果", isExpanded: false, subTags: nil),
            Tag(name: "香蕉", isExpanded: false, subTags: nil),
            Tag(name: "橙子", isExpanded: false, subTags: nil)
        ]),
        Tag(name: "蔬菜", isExpanded: false, subTags: [
            Tag(name: "胡萝卜", isExpanded: false, subTags: nil),
            Tag(name: "西红柿", isExpanded: false, subTags: nil),
            Tag(name: "黄瓜", isExpanded: false, subTags: nil)
        ]),
        Tag(name: "饮料", isExpanded: false, subTags: [
            Tag(name: "水", isExpanded: false, subTags: nil),
            Tag(name: "咖啡", isExpanded: false, subTags: nil),
            Tag(name: "茶", isExpanded: false, subTags: nil)
        ])
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "可展开收起的标签列表"
        view.backgroundColor = .white
        setupTableView()
    }
    
    private func setupTableView() {
        tableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tableView)
        
        // 设置约束
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        tableView.register(ExpandableTableViewCell.self, forCellReuseIdentifier: "ExpandableCell")
        tableView.dataSource = self
        tableView.delegate = self
        tableView.tableFooterView = UIView()
    }
    
    // MARK: - UITableViewDataSource
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return tags.count
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if tags[section].isExpanded {
            return tags[section].subTags?.count ?? 0
        }
        return 0
    }
    
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 44
    }
    
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = ExpandableHeaderView()
        headerView.configure(with: tags[section].name, isExpanded: tags[section].isExpanded)
        headerView.toggleAction = { [weak self] in
            guard let self = self else { return }
            self.tags[section].isExpanded.toggle()
            self.tableView.reloadSections(IndexSet(integer: section), with: .automatic)
        }
        return headerView
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        guard let cell = tableView.dequeueReusableCell(withIdentifier: "ExpandableCell", for: indexPath) as? ExpandableTableViewCell else {
            return UITableViewCell()
        }
        if let subTag = tags[indexPath.section].subTags?[indexPath.row] {
            let dummyTag = Tag(name: subTag.name, isExpanded: false, subTags: nil)
            cell.configure(with: dummyTag)
            cell.toggleAction = {
                // 处理子标签的点击事件，如果需要的话
            }
        }
        return cell
    }
    
    // MARK: - UITableViewDelegate
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // 处理子标签的点击事件
        tableView.deselectRow(at: indexPath, animated: true)
        if let subTag = tags[indexPath.section].subTags?[indexPath.row] {
            print("选中子标签：\(subTag.name)")
        }
    }
}
    

在这个视图控制器中：

• tags数组存储了所有的标签及其子标签数据。
• numberOfSections方法返回标签的数量，每个标签为一个分组。
• numberOfRowsInSection方法根据标签的isExpanded状态决定显示子标签的数量。
• viewForHeaderInSection方法使用自定义的ExpandableHeaderView来显示标签名称和控制按钮。
• 点击展开/收起按钮后，toggleAction闭包被调用，更新标签的isExpanded状态并刷新对应的分组。

4. 创建自定义Header视图

为了更好地展示标签标题和展开收起按钮，我们需要创建一个自定义的Header视图。

import UIKit

class ExpandableHeaderView: UIView {
    let titleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let toggleButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("展开", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()
    
    var toggleAction: (() -> Void)?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
    }
    
    private func setupViews() {
        addSubview(titleLabel)
        addSubview(toggleButton)
        
        NSLayoutConstraint.activate([
            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            
            toggleButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
            toggleButton.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
        
        toggleButton.addTarget(self, action: #selector(toggleButtonTapped), for: .touchUpInside)
    }
    
    func configure(with title: String, isExpanded: Bool) {
        titleLabel.text = title
        let buttonTitle = isExpanded ? "收起" : "展开"
        toggleButton.setTitle(buttonTitle, for: .normal)
    }
    
    @objc private func toggleButtonTapped() {
        toggleAction?()
    }
}
    

此自定义header视图包含一个标签titleLabel和一个按钮toggleButton，用于显示标签名称和控制展开收起。

5. 运行效果

完成上述步骤后，运行应用程序，你将看到一个带有分组标签的列表。每个标签旁边有一个“展开”或“收起”按钮，点击按钮可以显示或隐藏子标签。用户体验流畅，界面美观。

使用SwiftUI实现可展开收起的标签列表

SwiftUI作为苹果推出的新一代声明式UI框架，提供了更为简洁和高效的方式来构建用户界面。使用SwiftUI，我们可以利用List和DisclosureGroup组件轻松实现可展开收起的标签列表。

1. 数据模型设计

与UIKit类似，我们需要一个数据模型来表示标签及其子标签。使用Identifiable协议，使得SwiftUI能够高效地处理列表数据。

import SwiftUI

struct SectionModel: Identifiable {
    let id = UUID()
    let title: String
    var isExpanded: Bool
    let items: [String]
}
    

2. 创建主视图

使用List和DisclosureGroup来构建可展开收起的标签列表。

struct ExpandableListView: View {
    @State private var sections: [SectionModel] = [
        SectionModel(title: "水果", isExpanded: false, items: ["苹果", "香蕉", "橙子"]),
        SectionModel(title: "蔬菜", isExpanded: false, items: ["胡萝卜", "西红柿", "黄瓜"]),
        SectionModel(title: "饮料", isExpanded: false, items: ["水", "咖啡", "茶"])
    ]
    
    var body: some View {
        NavigationView {
            List {
                ForEach($sections) { $section in
                    DisclosureGroup(isExpanded: $section.isExpanded) {
                        ForEach(section.items, id: \.self) { item in
                            Text(item)
                        }
                    } label: {
                        HStack {
                            Text(section.title)
                                .font(.headline)
                            Spacer()
                            Image(systemName: section.isExpanded ? "chevron.down" : "chevron.right")
                                .foregroundColor(.blue)
                        }
                    }
                }
            }
            .navigationTitle("可展开收起的标签列表")
        }
    }
}
    

在这个视图中：

• 使用ForEach遍历sections数组，展示每个标签。
• DisclosureGroup组件用于实现展开和收起功能，isExpanded绑定到数据模型的isExpanded属性。
• 每个标签行包含一个标题和一个指示展开状态的图标（箭头）。

3. 运行效果

运行上述SwiftUI代码，将会看到一个带有分组标签的列表。点击每个标签可展开或收起其子标签，操作流畅，界面简洁。

UIKit与SwiftUI实现的比较

选择使用UIKit还是SwiftUI取决于项目需求、开发者熟悉程度以及目标iOS版本。以下是两者的主要对比：

优化与最佳实践

1. 性能优化

对于包含大量数据的标签列表，应优化数据处理和UI更新，避免不必要的刷新。例如：

• 使用UITableView或SwiftUI中的懒加载技术。
• 合理使用reloadSections和withAnimation，仅刷新必要的部分。

2. 自定义样式

根据设计需求，自定义标签的样式和布局。例如，可以调整字体、颜色、添加图标或使用不同的布局方式来增强视觉效果。

3. 动画效果

为展开和收起操作添加动画效果，提升用户体验。在UIKit中，可以使用UIView.animate，在SwiftUI中则可以利用.animation()修饰符。

4. 数据持久化

如果需要记住用户的展开状态，可以使用UserDefaults或更复杂的存储机制（如Core Data）来保存并加载状态。

5. 可访问性支持

确保标签列表对所有用户友好，包括支持VoiceOver等辅助功能。例如，为按钮添加适当的accessibilityLabel和accessibilityHint。

第三方库的使用

如果需要更复杂的功能或自定义效果，可以考虑使用第三方库。这些库通常提供更多的选项和更高的灵活性，例如：

github.com

Spring

github.com

SwiftUI-ExpandableList

总结

实现一个可展开和收起的标签列表在Swift中既可以通过UIKit的UITableView实现，也可以使用SwiftUI的List和DisclosureGroup组件。选择哪种方法取决于项目的具体需求、团队的技术栈以及目标iOS版本。通过合理的设计和优化，可以为用户提供流畅且直观的交互体验。

希望本文提供的详细步骤和代码示例能够帮助你在Swift项目中成功实现可展开收起的标签列表。如果有任何问题或需要进一步的指导，欢迎在评论区交流讨论。