TabView Header样式咨询：移除底部边框与添加项间分隔符

Hey Chen, let's sort out those two TabView styling issues for you! Here's step-by-step solutions depending on the framework you're using:

1. Remove the TabView Header's border-bottom #

If you're using SwiftUI #

If your TabView has a top-aligned header (like a segmented control or custom tab bar), you can target the underlying UIKit components to remove the border:

• For a system-provided segmented tab header (using .pickerStyle(.segmented)):

  init() {
      // Remove divider between segments
      UISegmentedControl.appearance().setDividerImage(UIImage(), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
      // Remove the outer border of the entire control
      UISegmentedControl.appearance().layer.borderWidth = 0
      UISegmentedControl.appearance().backgroundColor = .clear
  }
  

• If you built a custom HStack-based tab header, just ensure you haven't added a border(.bottom) modifier explicitly, or remove it if present.

If you're using UIKit #

If you're referring to the bottom tab bar as the "header" (terminology can get mixed up sometimes), you can remove its top border by adjusting the tab bar appearance:

let appearance = UITabBarAppearance()
// Remove shadow/border by setting empty images
appearance.shadowImage = UIImage()
appearance.backgroundImage = UIImage()
tabBar.standardAppearance = appearance
tabBar.scrollEdgeAppearance = appearance

2. Add separators between TabView Header options #

SwiftUI solution #

For a custom HStack-based tab header, insert vertical separators directly between tab items:

HStack(spacing: 0) {
    TabButton(title: "Tab 1", isSelected: $selectedTab == 1)
    // Gray semi-transparent separator
    Rectangle()
        .frame(width: 1, height: 24)
        .foregroundColor(.gray.opacity(0.5))
    TabButton(title: "Tab 2", isSelected: $selectedTab == 2)
    Rectangle()
        .frame(width: 1, height: 24)
        .foregroundColor(.gray.opacity(0.5))
    TabButton(title: "Tab 3", isSelected: $selectedTab == 3)
}

If you're using a segmented control, you can restore or customize the divider image:

// Use a custom image as separator, or a colored image
UISegmentedControl.appearance().setDividerImage(UIImage(color: .gray.opacity(0.5)), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)

UIKit solution #

For a UITabBar, add custom separators by subclassing UITabBar and drawing them manually:

class CustomTabBar: UITabBar {
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        let separatorWidth: CGFloat = 1
        let separatorColor = UIColor.gray.withAlphaComponent(0.5)
        let verticalPadding: CGFloat = 10
        
        guard let tabItems = items, tabItems.count > 1 else { return }
        for index in 0..<tabItems.count - 1 {
            let itemFrame = tabItems[index].frame
            let separatorFrame = CGRect(
                x: itemFrame.maxX,
                y: verticalPadding,
                width: separatorWidth,
                height: bounds.height - verticalPadding * 2
            )
            separatorColor.setFill()
            UIRectFill(separatorFrame)
        }
    }
}

Then assign this custom class to your tab bar in the storyboard or programmatically.

内容的提问来源于stack exchange，提问作者Chen Cohen