Tabman 3.2.0

Tabman 3.2.0

×

测试已测试✓
语言语言 SwiftSwift
许可证 MIT
发布最新发布2024年4月
SPM支持 SPM✓

由 Merrick Sapsford 和 UI At Six 维护。

Tabman 3.2.0

⭐️特点

  • 易于实现的具有交互式指示条页视图控制器。
  • 高度适应性和强大的自定义化。
  • 完全可扩展的混合组件库。
  • 基于Pageboy，一个简单、信息丰富的页视图控制器。
  • 自动插入子视图控制器内容。

📋要求

Tabman 需要 iOS 11 或更高版本；并且兼容 Swift 5。

📲安装

Swift 包管理器

Tabman 与Swift 包管理器兼容，并且可以通过 Xcode 集成。

CocoaPods

Tabman 也可通过 CocoaPods 使用。

pod 'Tabman', '~> 3.0'

Carthage

Tabman也通过Carthage提供。

github "uias/Tabman" ~> 3.0

使用说明

基本用法

  1. 使用你想显示的视图控制器数组设置你的视图控制器。
  2. 设置TabmanViewController的PageboyViewControllerDataSource数据源。
  3. 创建、自定义并添加任意数量的TMBar。
import Tabman
import Pageboy

class TabViewController: TabmanViewController {

    private var viewControllers = [UIViewController(), UIViewController()]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.dataSource = self

        // Create bar
        let bar = TMBar.ButtonBar()
        bar.layout.transitionStyle = .snap // Customize

        // Add to view
        addBar(bar, dataSource: self, at: .top)
    }
}

添加条形码时，你可以选择将其添加到预定义区域（.top，.bottom，.navigationItem(item:)）或自定义视图（.custom(view:layout:)）。有关更多信息，请参阅添加条形的指南。

  1. 配置你的数据源。
extension TabViewController: PageboyViewControllerDataSource, TMBarDataSource {

    func numberOfViewControllers(in pageboyViewController: PageboyViewController) -> Int {
        return viewControllers.count
    }

    func viewController(for pageboyViewController: PageboyViewController,
                        at index: PageboyViewController.PageIndex) -> UIViewController? {
        return viewControllers[index]
    }

    func defaultPage(for pageboyViewController: PageboyViewController) -> PageboyViewController.Page? {
        return nil
    }

    func barItem(for bar: TMBar, at index: Int) -> TMBarItemable {
        let title = "Page \(index)"
        return TMBarItem(title: title)
    }
}

条形项目

条形码将请求每个提供给TabmanViewController dataSource的页面的TMBarItemable。TMBarItemable是一种协议，可以用于自定义项目类型，Tabman中使用的是默认的TMBarItem

let item = TMBarItem()
item.title = "Item 1"
item.image = UIImage(named: "item.png")
item.badgeValue = "New"

UIKit可拾取项

Tabman还支持某些原生UIKit类型作为TMBarItemable

  • UINavigationItem
  • UITabBarItem

这些类型很遗憾无法支持在设置属性时动态更新条形码。

选择外观

Tabman默认提供多种易于使用的模板样式

这些样式都可在TMBar+Templates中作为TMBar的类型使用。

let bar = TMBar.ButtonBar()
let tabBar = TMBar.TabBar()

定制

条形图定制可以通过条形的每个功能区域上的属性进行。每个条形由4个不同的区域组成

TMBarView

TMBarView是每个条形的根视图，为将所有其他功能区域连接在一起提供粘合剂。您可以在这里更改一些内容，例如背景样式和切换行为。

bar.background.style = .blur(style: .extraLight)
bar.transitionStyle = .snap

这也是所有其他自定义的入口点。

🧲感兴趣的性质
  • backgroundView - 提供背景样式的TMBarBackgroundView。
  • scrollMode - 允许的交互式滚动类型。
  • fadesContentEdges - 当条形的边框移出屏幕时是否要模糊化其边缘。

更多：TMBarView 文档

TMBarLayout

TMBarLayout 是 TMBarView 的基础，决定了按钮如何显示和布局。如果您想更改按钮间距、内容边距和其他布局相关的事项，请查看此处。

bar.layout.contentInset = UIEdgeInsets(top: 0.0, left: 20.0, bottom: 0.0, right: 20.0)
🧲感兴趣的性质
  • contentMode - 布局显示内容的方式；要么通过 .fit 限制在栏宽度内，要么通过 .intrinsic 内在尺寸。
  • contentInset - 应应用于布局边框的边距。
  • transitionStyle - 布局如何执行过渡动画。
  • alignment - 布局在栏中的对齐方式。

更多信息：TMBarLayout 文档

TMBarButton

TMBarButton 视图在 TMBarLayout 中填充，并对应于数据源提供的项目。这是更改字体、图像尺寸和高亮颜色等事项的地方。

由于您很可能会处理多个按钮，您可以一次性修改整个集合

bar.buttons.customize { (button) in
	button.tintColor = .orange
	button.selectedTintColor = .red
}

这将应用于现有栏按钮以及之后添加到栏中的任何按钮。

🧲感兴趣的性质
  • backgroundView - 提供背景样式的TMBarBackgroundView。
  • contentInset - 应用于按钮边框的边距。
  • transitionStyle （TMBarButtonCollection）- 按钮应该如何执行过渡动画。
  • badge - 显示来自栏项的 badgeValue 的 TMBadgeView。

更多信息：TMBarButton 文档

TMBarIndicator

最后是 TMBarIndicator - 它表示栏中当前页面索引状态。您也可以在此处更改行为特性，以及指示器的外观。

bar.indicator.overscrollBehavior = .compress
bar.indicator.weight = .heavy
🧲感兴趣的性质
  • overscrollBehavior - 指示器如何处理超出栏项目范围滚动。
  • isProgressive - 指示器在通过页面索引过渡时是否应进行渐进式操作。
  • transitionStyle - 指示器应该如何执行过渡动画。

更多信息：TMBarIndicator 文档

🎨高级定制

Tabman 提供了完全的自由来混合匹配内置组件；同时也可以自定义。

TMBarView 利用泛型来定义并服务于栏的三个不同的功能区域。这意味着...

// ...that the preset...
let bar = Bar.ButtonBar()

// ...is actually under the hood:
let bar = BarView<HorizontalBarLayout, LabelBarButton, LineBarIndicator>

所以，更换另一种类型的布局、按钮或指示器实在简单不过。

假设您想实际使用 DotBarIndicator 而不是 LineBarIndicator

let bar = BarView<HorizontalBarLayout, LabelBarButton, DotBarIndicator>

以下组件在 Tabman 中可用

条形布局

  • TMHorizontalBarLayout - 在水平轴上顺序显示条形按钮的布局。
  • TMConstrainedHorizontalBarLayout - 在水平轴上顺序显示条形按钮，但受其能显示的项目数量限制的布局。

条形按钮

  • TMLabelBarButton - 包含单个文本标签的按钮。
  • TMTabItemBarButton - 模拟 UITabBarItem 外观的按钮，包含垂直对齐的图片和标签。
  • TMBarButton.None - 不显示任何可见的条形按钮。

条形指示器

  • TMLineBarIndicator - 以水平线显示的简单指示器。
  • TMChevronBarIndicator - 在 X 轴中心显示垂直尖括号的指示器。
  • TMBlockBarIndicator - 填满条形，以显示实色。
  • TMDotBarIndicator - 在 X 轴中心显示圆形点的指示器。
  • TMBarIndicator.None - 不显示任何可见的指示器。

完全自定义

像上面一样替换布局、按钮或指示器的类型非常简单；您有能力定义自己的子类，而不需要太多麻烦。

自定义Tabman组件

还有展示自定义布局的例子项目。

  • Tinderbar - 使用Tabman构建的Tinder iOS应用布局。

📐内容内缩

Tabman会自动调整其子视图控制器中的任何内容，以确保在任意可见的栏下面正确显示。它提供了以下功能

  • 适当更新任何在子视图控制器子视图中找到的UIScrollView或其派生子类的contentInset和contentOffset。
  • 将additionalSafeAreaInsets设置为反映所需的安全区域，包括栏内容。在子视图控制器中约束于安全区域中的任何视图都将正确布局（仅在iOS 11及以上版本中可用。）

TabmanViewController还提供了一个barLayoutGuide，它是一个UILayoutGuide，提供了考虑到添加到.top或.bottom TabmanViewController.BarLocation区域的任何栏的顶部和底部锚点。原始的UIEdgeInsets也通过.barInsets提供。

可以通过将automaticallyAdjustsChildInsets设置为false来禁用自动内缩 - 然而，这必须在viewDidLoad之前完成。

Tabman不会为添加到自定义视图的栏提供任何内缩行为。

⚠️故障排除

如果您遇到Tabman的问题，请查看故障排除指南。

如果您仍然有问题，请随时提出问题。

👨🏻‍💻 关于

❤️贡献

欢迎提交GitHub上的错误报告和拉取请求https://github.com/uias/Tabman。

👮🏻‍♂️ 许可证

库以开放源代码的形式提供，遵循MIT许可。