在SwiftUI中实现自定义的高度灵活的标签栏

在SwiftUI中实现自定义的高度灵活的标签栏

标签栏组件是UI界面中非常重要的组件,它通过创建一组清晰的选项卡按钮(标签),使得用户能够轻松地识别并切换到不同的内容区域,从而在一个界面上展现多个不同主题的丰富内容 。

SwiftUI提供了一个内置的标签栏组件,即TabView组件,但这个组件不够灵活,虽然通过定制可以解决一些问题,但很难适应一些更复杂的场景。

这篇博文介绍一种完全自定义的高度灵活的标签栏实现方式,可以作为SwiftUI 的标签栏组件的补充。

设计思路

通常标签栏组件可以分解为三部分: 标签部分(Tab),标签栏部分(TabBar),以及标签内容部分,即TabPage。我们的思路是,将这三部分独立设计,让它们独立发展,从而可以提供各种组合以实现高度灵活性。 标签部分需要数据支持,可以是数组,也可以是枚举,或者其他类型的数据, 我们用协议实现;标签栏的主要功能是对一组标签进行布局排列,我们用定制的组件实现;标签内容部分主要显示当前标签的内容,这个和具体业务需求相关,无需任何设计,直接在业务代码中实现,但需要遵循一定规范。 如下是我们的设计代码:

swift 复制代码
//标签协议
protocol HDXTab
{
    associatedtype TAB:View
    @ViewBuilder  
    func makeTab(isSelected:Bool,action:@escaping ()->Void)->TAB
}

//标签栏组件 
struct HDXTabBar<Content:View>:View
{
    var content: ()->Content  
    var body:some View 
    {
        self.content() 
    }
}

上面代码中,大家可能会觉得标签栏组件很奇怪,似乎和标签(Tab)没有任何关联,诀窍在于: 在标签栏的Content闭包中,我们可以直接引用标签的数据: 数组或者枚举。换句话说,这个关联是在闭包中完成的。

其实整个标签栏组件也是可以完全省略的,因为它的工作主要是对各标签进行排列布局,用SwiftUI提供各种内置布局组件就可以实现。之所以要设计标签栏组件,仅仅是需要通过一个组件名称以强化语义。

代码示例

下面按上述思路实现一个简单的普通的标签栏。效果如下图:。

我们用枚举为该组件建模。

枚举和标签栏组件有一种天然的联系,建议优先考虑用枚举为标签栏组件建模

swift 复制代码
//用枚举建模
enum  DemoTab:CaseIterable  
{
    case 首页  
    case 地址  
    case 收藏  
    case 我的  
    func getText()->String
    {
        return "\(self)"
    }
}

//对DemoTab进行扩展,使其遵循HDXTab协议:

extension DemoTab:HDXTab
{
     
    @ViewBuilder
    func makeTab(isSelected  : Bool, action: @escaping () -> Void) ->some View 
    {
        Button
        {
            action()
        } label:
        {
                 Text( self.getText())
                    .foregroundColor(isSelected ? .blue : .black)
         }
    }
}

下面是使用DemoTab组件的代码:

swift 复制代码
struct TabViewDemo:View 
{
    @State var selectedTab = DemoTab.首页 
    var body :some View
    {
        VStack
        { 
            ZStack
            {  
                //TabPage
                // Text(  selectedTab.getText()) 
                switch selectedTab {
                case .首页:  homeView()
                case .地址:  addressView()
                case .收藏:  favoriteView()  
                case .我的:  profileView()
                }
            }.frame(width:200,height:100)
            //TabBar
            HDXTabBar 
            {
                HStack { 
                 Spacer()
                    ForEach (DemoTab.allCases,id:\.self) { 
                       item  in   
                        //Tab
                        item.makeTab(isSelected:selectedTab == item) 
                        {
                            selectedTab = item   
                        }
                        Spacer()
                    }
                }
            }
           
        } 
    }
    
    @ViewBuilder
     func homeView()->some View
     {
       Text("this is home view")            
     }
      
    @ViewBuilder
    func addressView()->some View
    {
        Text("this is address view")            
    }
   
    @ViewBuilder
    func favoriteView()->some View
    {
        Text("this is favorite  view")            
    }
   
    @ViewBuilder
    func profileView()->some View
    {
        Text("this is profile view")            
    }
}

上述代码中,我们在标签栏组件中直接引用DemoTab枚举的各个枚举项,并调用其makeTab()方法构造标签,然后对标签进行布局。 另外,请特别注意标签切换的代码,以及展示标签内容(标签页)的代码,看起来似乎有些多,但由于使用了枚举建模,显得清晰和有条理。 HDXTabBar 这一层可以完全拿掉,如前所叙,仅仅是为了强调语义。

可以尝试对上面标签栏进行一些定制。比如,给每个标签加上图标,动画等等,将标签内容放置在标签栏之上,或者左面,或者右面,亦或者当标签比较多时,使用两行布局标签标签等等,这些需求在我们的实现中都非常容易实现。

小结

本文介绍了一种实现标签栏的方式,主要特点是让标签(Tab),标签栏(TabBar)以及标签内容(TabPage)独立变化,灵活组合,从而具有高度的灵活性。灵活性包括但不限于下面几个方面:

  • 定制的Tab风格

  • 定制的TabBar风格

  • 定制TabBar和TabPage之间的位置关系

相关推荐
袁代码9 天前
SwiftUI开发教程系列 - 第十二章:本地化与多语言支持
开发语言·前端·ios·swiftui·swift·ios开发
袁代码15 天前
SwiftUI开发教程系列 - 第1章:简介与环境配置
开发语言·ios·swiftui·swift·ios开发
今天也想MK代码19 天前
在Swift开发中简化应用程序发布与权限管理的解决方案——SparkleEasy
前端·javascript·chrome·macos·electron·swiftui
東三城24 天前
【ios】---SwiftUI开发从入门到放弃
ios·swiftui·swift·1024程序员节
今天也想MK代码1 个月前
基于swiftui 实现3D loading 动画效果
ios·swiftui·swift
胖虎11 个月前
SwiftUI(五)- ForEach循环创建视图&尺寸类&安全区域
ios·swiftui·swift·foreach·安全区域
zyosasa1 个月前
SwiftUI 精通之路 11: 栅格布局
前端·swiftui·swift
小溪彼岸1 个月前
【iOS小组件实战】灵动岛实时进度通知
swiftui·swift
提笔忘字的帝国1 个月前
【ios】SwiftUI 混用 UIKit 的 Bug 解决:UITableView 无法滚动到底部
swiftui·bug·xcode
zyosasa1 个月前
SwiftUI 精通之路 09:ForEach 视图构造器的基础应用
swiftui·swift