抖音首页的头部滑动标签(通常称为"Segmented Control"或"Tab Bar")是一个常见的UI组件，可以通过以下几种方式实现：
1. 使用UISegmentedControl
最简单的实现方式是使用系统自带的UISegmentedControl：
swift
let segmentedControl = UISegmentedControl(items: ["推荐", "关注", "同城"])
segmentedControl.selectedSegmentIndex = 0
segmentedControl.addTarget(self, action: #selector(segmentChanged(_:)), for: .valueChanged)
navigationItem.titleView = segmentedControl
@objc func segmentChanged(_ sender: UISegmentedControl) {
// 处理标签切换
print("Selected segment: \(sender.selectedSegmentIndex)")
}2. 自定义实现（更接近抖音效果）
抖音的效果通常是水平滚动的标签栏，可以这样实现：
swift
import UIKit
class TikTokTabBar: UIView {
private let scrollView = UIScrollView()
private var buttons: [UIButton] = []
private let indicator = UIView()
private var currentIndex: Int = 0
var titles: [String] = [] {
didSet {
setupButtons()
}
}
var onTabSelected: ((Int) -> Void)?
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setupUI()
}
private func setupUI() {
scrollView.showsHorizontalScrollIndicator = false
addSubview(scrollView)
indicator.backgroundColor = .red
scrollView.addSubview(indicator)
}
override func layoutSubviews() {
super.layoutSubviews()
scrollView.frame = bounds
var x: CGFloat = 0
let buttonHeight = bounds.height - 4
let padding: CGFloat = 20
for (index, button) in buttons.enumerated() {
let width = button.sizeThatFits(CGSize(width: CGFloat.greatestFiniteMagnitude,
height: buttonHeight)).width + padding * 2
button.frame = CGRect(x: x, y: 0, width: width, height: buttonHeight)
x += width
if index == currentIndex {
indicator.frame = CGRect(x: button.frame.minX + padding,
y: buttonHeight,
width: button.frame.width - padding * 2,
height: 3)
}
}
scrollView.contentSize = CGSize(width: x, height: bounds.height)
}
private func setupButtons() {
buttons.forEach { $0.removeFromSuperview() }
buttons.removeAll()
for (index, title) in titles.enumerated() {
let button = UIButton(type: .custom)
button.setTitle(title, for: .normal)
button.setTitleColor(index == 0 ? .white : .lightGray, for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
button.tag = index
scrollView.addSubview(button)
buttons.append(button)
}
}
@objc private func buttonTapped(_ sender: UIButton) {
selectTab(at: sender.tag, animated: true)
onTabSelected?(sender.tag)
}
func selectTab(at index: Int, animated: Bool) {
guard index >= 0 && index < buttons.count else { return }
let button = buttons[index]
currentIndex = index
UIView.animate(withDuration: animated ? 0.25 : 0) {
self.buttons.forEach {
$0.setTitleColor($0.tag == index ? .white : .lightGray, for: .normal)
}
self.indicator.frame = CGRect(x: button.frame.minX + 20,
y: button.frame.height,
width: button.frame.width - 40,
height: 3)
// 确保选中的标签可见
let visibleRect = CGRect(x: button.frame.minX - 30,
y: 0,
width: button.frame.width + 60,
height: self.scrollView.frame.height)
self.scrollView.scrollRectToVisible(visibleRect, animated: animated)
}
}
}3. 结合PageViewController实现完整效果
要实现抖音首页的完整效果（滑动标签同时控制页面切换），可以结合UIPageViewController：
swift
class TikTokHomeViewController: UIViewController {
private let tabBar = TikTokTabBar()
private var pageViewController: UIPageViewController!
private var viewControllers: [UIViewController] = []
override func viewDidLoad() {
super.viewDidLoad()
// 设置标签栏
tabBar.titles = ["推荐", "关注", "同城"]
tabBar.onTabSelected = { [weak self] index in
self?.selectPage(at: index, animated: true)
}
navigationItem.titleView = tabBar
// 设置页面控制器
pageViewController = UIPageViewController(transitionStyle: .scroll,
navigationOrientation: .horizontal,
options: nil)
pageViewController.delegate = self
pageViewController.dataSource = self
// 添加子控制器
viewControllers = [
RecommendationViewController(),
FollowingViewController(),
NearbyViewController()
]
addChild(pageViewController)
view.addSubview(pageViewController.view)
pageViewController.didMove(toParent: self)
pageViewController.setViewControllers([viewControllers[0]], direction: .forward, animated: false)
}
private func selectPage(at index: Int, animated: Bool) {
guard index >= 0 && index < viewControllers.count else { return }
let direction: UIPageViewController.NavigationDirection = index > tabBar.currentIndex ? .forward : .reverse
pageViewController.setViewControllers([viewControllers[index]], direction: direction, animated: animated)
tabBar.selectTab(at: index, animated: animated)
}
}
extension TikTokHomeViewController: UIPageViewControllerDelegate, UIPageViewControllerDataSource {
func pageViewController(_ pageViewController: UIPageViewController,
viewControllerBefore viewController: UIViewController) -> UIViewController? {
guard let index = viewControllers.firstIndex(of: viewController), index > 0 else { return nil }
return viewControllers[index - 1]
}
func pageViewController(_ pageViewController: UIPageViewController,
viewControllerAfter viewController: UIViewController) -> UIViewController? {
guard let index = viewControllers.firstIndex(of: viewController), index < viewControllers.count - 1 else { return nil }
return viewControllers[index + 1]
}
func pageViewController(_ pageViewController: UIPageViewController,
didFinishAnimating finished: Bool,
previousViewControllers: [UIViewController],
transitionCompleted completed: Bool) {
if completed, let currentVC = pageViewController.viewControllers?.first,
let index = viewControllers.firstIndex(of: currentVC) {
tabBar.selectTab(at: index, animated: true)
}
}
}高级优化
1. 动画效果：可以添加更流畅的滑动动画和指示器动画
2. 字体缩放：选中的标签可以放大字体，未选中的缩小
3. 预加载：预加载相邻的页面以提高响应速度
4. 性能优化：对于大量标签，实现重用机制
下面是优化的具体实现
1. 平滑滑动动画与指示器效果优化
实现思路
- 监听UIScrollView的滚动偏移量
- 根据偏移量动态计算指示器位置和宽度
- 实现标签颜色渐变效果
代码实现
swift
// 在TikTokTabBar类中添加以下方法
private var lastContentOffset: CGFloat = 0
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard scrollView.isTracking || scrollView.isDragging || scrollView.isDecelerating else { return }
let offsetX = scrollView.contentOffset.x
let scrollViewWidth = scrollView.bounds.width
let progress = (offsetX / scrollViewWidth) - CGFloat(currentIndex)
// 防止快速滑动时progress超出范围
let clampedProgress = max(-1, min(1, progress))
updateTabAppearance(progress: clampedProgress)
updateIndicatorPosition(progress: clampedProgress)
lastContentOffset = offsetX
}
private func updateTabAppearance(progress: CGFloat) {
let absProgress = abs(progress)
for (index, button) in buttons.enumerated() {
// 当前标签和下一个标签
if index == currentIndex || index == currentIndex + (progress > 0 ? 1 : -1) {
let isCurrent = index == currentIndex
let targetIndex = isCurrent ? (progress > 0 ? currentIndex + 1 : currentIndex - 1) : currentIndex
guard targetIndex >= 0 && targetIndex < buttons.count else { continue }
let targetButton = buttons[targetIndex]
// 颜色渐变
let currentColor = UIColor.white
let targetColor = UIColor.lightGray
let color = isCurrent ?
currentColor.interpolate(to: targetColor, progress: absProgress) :
targetColor.interpolate(to: currentColor, progress: absProgress)
button.setTitleColor(color, for: .normal)
// 字体缩放
let minScale: CGFloat = 0.9
let maxScale: CGFloat = 1.1
let scale = isCurrent ?
maxScale - (maxScale - minScale) * absProgress :
minScale + (maxScale - minScale) * absProgress
button.transform = CGAffineTransform(scaleX: scale, y: scale)
} else {
// 其他标签保持默认状态
button.setTitleColor(.lightGray, for: .normal)
button.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
}
}
}
private func updateIndicatorPosition(progress: CGFloat) {
guard currentIndex >= 0 && currentIndex < buttons.count else { return }
let currentButton = buttons[currentIndex]
var nextIndex = currentIndex + (progress > 0 ? 1 : -1)
nextIndex = max(0, min(buttons.count - 1, nextIndex))
let nextButton = buttons[nextIndex]
let absProgress = abs(progress)
// 计算指示器位置和宽度
let currentFrame = currentButton.frame
let nextFrame = nextButton.frame
let originX = currentFrame.minX + (nextFrame.minX - currentFrame.minX) * absProgress
let width = currentFrame.width + (nextFrame.width - currentFrame.width) * absProgress
indicator.frame = CGRect(
x: originX + 20,
y: currentFrame.height,
width: width - 40,
height: 3
)
}
// UIColor扩展，用于颜色插值
extension UIColor {
func interpolate(to color: UIColor, progress: CGFloat) -> UIColor {
var fromRed: CGFloat = 0, fromGreen: CGFloat = 0, fromBlue: CGFloat = 0, fromAlpha: CGFloat = 0
var toRed: CGFloat = 0, toGreen: CGFloat = 0, toBlue: CGFloat = 0, toAlpha: CGFloat = 0
self.getRed(&fromRed, green: &fromGreen, blue: &fromBlue, alpha: &fromAlpha)
color.getRed(&toRed, green: &toGreen, blue: &toBlue, alpha: &toAlpha)
let red = fromRed + (toRed - fromRed) * progress
let green = fromGreen + (toGreen - fromGreen) * progress
let blue = fromBlue + (toBlue - fromBlue) * progress
let alpha = fromAlpha + (toAlpha - fromAlpha) * progress
return UIColor(red: red, green: green, blue: blue, alpha: alpha)
}
}2. 字体缩放效果优化
实现思路
- 根据滑动进度动态调整标签字体大小
- 当前选中标签放大，相邻标签适当缩小
- 其他标签保持最小尺寸
代码实现
上面的updateTabAppearance方法已经包含了字体缩放逻辑，这里补充字体缩放的具体参数：
swift
// 在updateTabAppearance方法中添加以下参数
let minScale: CGFloat = 0.9 // 最小缩放比例
let maxScale: CGFloat = 1.1 // 最大缩放比例
let scale = isCurrent ?
maxScale - (maxScale - minScale) * absProgress :
minScale + (maxScale - minScale) * absProgress
button.transform = CGAffineTransform(scaleX: scale, y: scale)3. 页面预加载机制
实现思路
- 预加载当前页面相邻的页面
- 使用UIPageViewController的缓存机制
- 监听滑动方向提前准备内容
代码实现
swift
// 在TikTokHomeViewController中添加预加载逻辑
private var pendingIndex: Int?
private var direction: UIPageViewController.NavigationDirection = .forward
func pageViewController(_ pageViewController: UIPageViewController,
willTransitionTo pendingViewControllers: [UIViewController]) {
if let pendingVC = pendingViewControllers.first,
let index = viewControllers.firstIndex(of: pendingVC) {
pendingIndex = index
}
}
func pageViewController(_ pageViewController: UIPageViewController,
didFinishAnimating finished: Bool,
previousViewControllers: [UIViewController],
transitionCompleted completed: Bool) {
if completed, let pendingIndex = pendingIndex {
currentIndex = pendingIndex
tabBar.selectTab(at: currentIndex, animated: true)
// 预加载相邻页面
preloadAdjacentPages()
}
pendingIndex = nil
}
private func preloadAdjacentPages() {
// 预加载前一个页面
if currentIndex > 0 {
let previousIndex = currentIndex - 1
if let previousVC = pageViewController.dataSource?.pageViewController(
pageViewController,
viewControllerBefore: viewControllers[currentIndex]
) {
// 确保视图已加载
_ = previousVC.view
}
}
// 预加载后一个页面
if currentIndex < viewControllers.count - 1 {
let nextIndex = currentIndex + 1
if let nextVC = pageViewController.dataSource?.pageViewController(
pageViewController,
viewControllerAfter: viewControllers[currentIndex]
) {
// 确保视图已加载
_ = nextVC.view
}
}
}
// 修改selectPage方法以支持方向判断
private func selectPage(at index: Int, animated: Bool) {
guard index >= 0 && index < viewControllers.count else { return }
direction = index > currentIndex ? .forward : .reverse
pageViewController.setViewControllers([viewControllers[index]], direction: direction, animated: animated) { [weak self] _ in
self?.preloadAdjacentPages()
}
currentIndex = index
tabBar.selectTab(at: index, animated: animated)
}4. 性能优化与标签重用
实现思路
- 对于大量标签，实现重用机制
- 只保留可视区域附近的标签
- 动态加载和卸载标签
代码实现
swift
// 在TikTokTabBar中添加重用逻辑
private let reusableQueue = NSMutableSet()
private var visibleButtons =
private var allTitles =
func setTitles(_ titles: [String]) {
allTitles = titles
updateVisibleButtons()
}
private func updateVisibleButtons() {
// 计算当前可见范围
let visibleRange = calculateVisibleRange()
// 移除不再可见的按钮
for (index, button) in visibleButtons {
if !visibleRange.contains(index) {
button.removeFromSuperview()
reusableQueue.add(button)
visibleButtons.removeValue(forKey: index)
}
}
// 添加新可见的按钮
for index in visibleRange {
if visibleButtons[index] == nil {
let button = dequeueReusableButton()
configureButton(button, at: index)
scrollView.addSubview(button)
visibleButtons[index] = button
}
}
// 更新布局
setNeedsLayout()
}
private func calculateVisibleRange() -> ClosedRange<Int> {
let contentOffsetX = scrollView.contentOffset.x
let visibleWidth = scrollView.bounds.width
// 计算第一个和最后一个可见的索引
var startIndex = 0
var endIndex = allTitles.count - 1
// 这里可以添加更精确的计算逻辑
// 例如根据按钮宽度和偏移量计算
// 扩展可见范围，预加载左右各2个
startIndex = max(0, startIndex - 2)
endIndex = min(allTitles.count - 1, endIndex + 2)
return startIndex...endIndex
}
private func dequeueReusableButton() -> UIButton {
if let button = reusableQueue.anyObject() as? UIButton {
reusableQueue.remove(button)
return button
}
return UIButton(type: .custom)
}
private func configureButton(_ button: UIButton, at index: Int) {
button.setTitle(allTitles[index], for: .normal)
button.setTitleColor(index == currentIndex ? .white : .lightGray, for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
button.tag = index
}
// 在scrollViewDidScroll中调用updateVisibleButtons
func scrollViewDidScroll(_ scrollView: UIScrollView) {
updateVisibleButtons()
// 其他滚动逻辑...
}5. 综合优化与细节处理
5.1 弹性效果限制
swift
// 在TikTokTabBar中
scrollView.bounces = false
scrollView.alwaysBounceHorizontal = false 5.2 点击动画效果
swift
@objc private func buttonTapped(_ sender: UIButton) {
// 点击动画
UIView.animate(withDuration: 0.1, animations: {
sender.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
}) { _ in
UIView.animate(withDuration: 0.1) {
sender.transform = .identity
}
}
selectTab(at: sender.tag, animated: true)
onTabSelected?(sender.tag)
}5.3 性能优化提示
swift
// 在TikTokTabBar的初始化中
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale 5.4 内存管理优化
swift
// 在视图控制器中
deinit {
scrollView.delegate = nil
}总结
通过以上高级优化实现，你可以获得一个接近抖音效果的滑动标签栏，具有以下特点：
- 平滑的滑动动画和指示器过渡效果
- 动态字体缩放和颜色渐变
- 高效的页面预加载机制
- 优化的性能与内存管理
- 标签重用机制支持大量标签
这些优化可以显著提升用户体验，使滑动更加流畅，响应更加迅速，同时保持良好的内存使用效率。