正文

手机应用如何用Swift在Segment中添加红点提示功能

/0 浏览量
0609

在iOS开发中，Segment控件是一个常用的UI组件，用于在多个选项之间切换。有时候，我们可能需要在Segment的某个选项上显示一个红点，以提示用户有新的消息或更新。以下是如何在Swift中使用Segment控件添加红点提示功能的详细教程。

准备工作

首先，确保你的项目中已经包含了SegmentedControl。如果没有，请从Storyboard中拖拽一个到你的视图控制器中，或者从UIKit库中引入。

import UIKit

步骤1：创建一个自定义的SegmentedControl

为了在Segment的某个选项上显示红点，我们需要自定义SegmentedControl。下面是一个简单的自定义类，它继承自UIControl。

class CustomSegmentedControl: UIControl {
    private let items: [String]
    private let segmentWidth: CGFloat = 100
    private let segmentHeight: CGFloat = 44
    private let selectedColor = UIColor(red: 21/255, green: 101/255, blue: 192/255, alpha: 1)
    private let normalColor = UIColor(red: 102/255, green: 102/255, blue: 102/255, alpha: 1)
    private var selectedItem: Int = 0
    private var segments = [UIView]()

    init(frame: CGRect, items: [String]) {
        self.items = items
        super.init(frame: frame)
        self.setupSegments()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupSegments() {
        for item in items {
            let segment = UIView(frame: CGRect(x: segmentWidth * CGFloat(selectedItem), y: 0, width: segmentWidth, height: segmentHeight))
            segment.backgroundColor = normalColor
            segment.tag = selectedItem
            segment.addTarget(self, action: #selector(segmentTapped(sender:)), for: .touchUpInside)
            segments.append(segment)
            selectedItem += 1
            self.addSubview(segment)
        }
    }

    @objc private func segmentTapped(sender: UIView) {
        selectedItem = sender.tag
        for segment in segments {
            segment.backgroundColor = segment.tag == selectedItem ? selectedColor : normalColor
        }
        sendActions(for: .valueChanged)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        for (index, segment) in segments.enumerated() {
            segment.frame.origin.x = CGFloat(index) * segmentWidth
        }
    }
}

步骤2：添加红点提示

接下来，我们需要在自定义的SegmentedControl中添加红点提示功能。这可以通过在相应的选项上添加一个红色圆点来实现。

private func addRedDot(toSegmentAt index: Int) {
    let redDot = UIView(frame: CGRect(x: segmentWidth * CGFloat(index) + segmentWidth / 2 - 6, y: segmentHeight / 2 - 6, width: 12, height: 12))
    redDot.backgroundColor = .red
    redDot.layer.cornerRadius = redDot.bounds.width / 2
    segments[index].addSubview(redDot)
}

你可以通过调用addRedDot(toSegmentAt:)方法来为特定的Segment添加红点。

步骤3：使用自定义的SegmentedControl

最后，在你的视图控制器中创建并使用自定义的SegmentedControl。

class ViewController: UIViewController {
    private let segmentedControl = CustomSegmentedControl(frame: CGRect(x: 0, y: 100, width: 300, height: 44), items: ["Home", "Messages", "Profile"])

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(segmentedControl)
        
        // 添加红点提示
        segmentedControl.addRedDot(toSegmentAt: 1)
    }
}

这样，你就在Swift中成功创建了一个带有红点提示功能的Segment控件。你可以根据需要调整红点的大小和位置，以及Segment的样式。

-- 展开阅读全文 --