iOS 抖音首页头部滑动标签的实现
抖音首页的头部滑动标签(通常称为"Segmented Control"或"Tab Bar")是一个常见的UI组件，可以通过以下几种方式实现：
1. 使用UISegmentedControl
最简单的实现方式是使用系统自带的UISegmentedControl：
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. 自定义实现（更接近抖音效果）
抖音的效果通常是水平滚动的标签栏，可以这样实现：
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：
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的滚动偏移量
- 根据偏移量动态计算指示器位置和宽度
- 实现标签颜色渐变效果
代码实现
// 在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方法已经包含了字体缩放逻辑，这里补充字体缩放的具体参数：
// 在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的缓存机制
- 监听滑动方向提前准备内容
代码实现
// 在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. 性能优化与标签重用
实现思路
- 对于大量标签，实现重用机制
- 只保留可视区域附近的标签
- 动态加载和卸载标签
代码实现
// 在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 弹性效果限制
// 在TikTokTabBar中
scrollView.bounces = false
scrollView.alwaysBounceHorizontal = false
5.2 点击动画效果
@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 性能优化提示
// 在TikTokTabBar的初始化中
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale
5.4 内存管理优化
// 在视图控制器中
deinit {scrollView.delegate = nil
}
总结
通过以上高级优化实现，你可以获得一个接近抖音效果的滑动标签栏，具有以下特点：
- 平滑的滑动动画和指示器过渡效果
- 动态字体缩放和颜色渐变
- 高效的页面预加载机制
- 优化的性能与内存管理
- 标签重用机制支持大量标签
这些优化可以显著提升用户体验，使滑动更加流畅，响应更加迅速，同时保持良好的内存使用效率。