TabView 初始化与自定义 TabBar 属性相关

这篇具有很好参考价值的文章主要介绍了TabView 初始化与自定义 TabBar 属性相关。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

SWift TabView 与 UIKit 中的 UITabBarController 如出一辙.在 TabView 组件中配置对应的图片和标题;
其中,Tag 用来设置不同 TabView 可动态设置当前可见 Tab;另也有一些常用的属性与 UIKit 中的类似,具体可以按需参考 api 中属性进行单独修改定制;
在 iOS 15.0 之后还可设置角标记 .badge

一、初始化

// MARK: ****** TabView
TabView {
    Text("").tabItem {
        Image("homePage_tabBar_Normal_Image")
        Text("首页")
    }.tag(0)
//                .badge(Text("new")) // iOS 15.0
    Text("").tabItem {
        Image("BookShelf_tabBar_Normal_Image")
        Text("医师在线")
    }.tag(1)
    Text("").tabItem {
        Image("Exam_tabbar_Normal_Image")
        Text("考试")
    }.tag(2)
    Text("").tabItem {
        Image("Integration_tabbar_Normal_Image")
        Text("教学")
    }.tag(3)
    Text("").tabItem {
        Image("my_tabBar_Normal_Image")
        Text("我的")
    }.tag(4)
}

二、简易修改 TabBar 属性相关

对 TabBar 标签文字和背景简易修改可通过如下方式:

方式一,直接通过 onAppear 进行修改设定

// MARK: ****** TabView
TabView {
    Text("").tabItem {
        Image("homePage_tabBar_Normal_Image")
        Text("首页")
    }.tag(0)
//                .badge(Text("new")) // iOS 15.0
    Text("").tabItem {
        Image("BookShelf_tabBar_Normal_Image")
        Text("医师在线")
    }.tag(1)
    Text("").tabItem {
        Image("Exam_tabbar_Normal_Image")
        Text("考试")
    }.tag(2)
    Text("").tabItem {
        Image("Integration_tabbar_Normal_Image")
        Text("教学")
    }.tag(3)
    Text("").tabItem {
        Image("my_tabBar_Normal_Image")
        Text("我的")
    }.tag(4)
}
.onAppear { // 渲染时
    // MARK: UIKit 方式
    // 标签栏背景色
    UITabBar.appearance().backgroundColor = UIColor.orange
    // 标签文字未选中颜色
    UITabBar.appearance().unselectedItemTintColor = UIColor.white
}

方式二,也可在 init 中进行重设定

struct YHContentView: View {
    @Environment(\.presentationMode) private var mode
    
    // MARK: - ****** 初始化 ******
    init() {
        // MARK: UIKit 方式
        // 标签栏背景色
        UITabBar.appearance().backgroundColor = UIColor.orange
        // 标签文字未选中颜色
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
    }
    
    // MARK: - ****** 声明 ******
    // 创建变量(私有变量 private 外部不可调用)
    // 通过 @State 修饰变量,用来绑定至所对应视图上,该变量即真实数据源与视图绑定并动态更改数据
    @State private var weightText: String = ""
    @State private var heightText: String = ""
    @State var isToggleState: Bool = true
    
    // MARK: - ****** UI ******
    var body: some View {
        
        // MARK: ****** TabView
        TabView {
            Text("").tabItem {
                Image("homePage_tabBar_Normal_Image")
                Text("首页")
            }.tag(0)
        //                .badge(Text("new")) // iOS 15.0
            Text("").tabItem {
                Image("BookShelf_tabBar_Normal_Image")
                Text("医师在线")
            }.tag(1)
            Text("").tabItem {
                Image("Exam_tabbar_Normal_Image")
                Text("考试")
            }.tag(2)
            Text("").tabItem {
                Image("Integration_tabbar_Normal_Image")
                Text("教学")
            }.tag(3)
            Text("").tabItem {
                Image("my_tabBar_Normal_Image")
                Text("我的")
            }.tag(4)
        }
    }

    // MARK: - ****** 方法相关 ******
    // MARK: 导航返回
    private func goback() {
        withAnimation {
            self.mode.wrappedValue.dismiss()
        }
    }
}

三、自定义 TabBar 属性

在官方 api 中提供了很多属性可供自定制化修改,如下简单列举一些常用的属性参考
注:其作用域需要基于 iOS 15 以上版本

// MARK: - ****** 初始化 ******
init() {
    if #available(iOS 15.0, *) {
        // MARK: SwiftUI 方式,作用域 iOS 15 以上版本
        let itemApperance = UITabBarItemAppearance()
        // 标签图标颜色(未选中 & 选中)
        itemApperance.normal.iconColor = UIColor.gray
        itemApperance.selected.iconColor = UIColor.red
        // 标签文字颜色(未选中 & 选中)
        itemApperance.normal.titleTextAttributes = [.foregroundColor: UIColor.green]
        itemApperance.selected.titleTextAttributes = [.foregroundColor: UIColor.white]
        // 标签气泡背景颜色
        itemApperance.normal.badgeBackgroundColor = UIColor.blue
        itemApperance.selected.badgeBackgroundColor = UIColor.yellow
        // 标签气泡文字颜色
        itemApperance.normal.badgeTextAttributes = [.foregroundColor: UIColor.gray]
        itemApperance.selected.badgeTextAttributes = [.foregroundColor: UIColor.black]
        // 标签气泡位置
        itemApperance.normal.badgePositionAdjustment = UIOffset(horizontal: -10, vertical: -10)
        itemApperance.selected.badgePositionAdjustment = UIOffset(horizontal: 10, vertical: 10)
        // 标签气泡标题位置
        itemApperance.normal.badgeTitlePositionAdjustment = UIOffset(horizontal: -10, vertical: -10)
        itemApperance.selected.badgeTitlePositionAdjustment = UIOffset(horizontal: 10, vertical: 10)
        
        let appearance = UITabBarAppearance()
        // 将自定义 item 属性应用到 UITabBarAppearance 的 stackedLayoutAppearance 属性中
        appearance.stackedLayoutAppearance = itemApperance
        // TabBar 背景图
        appearance.backgroundImage = UIImage(named: "")
        // TabBar 背景色
        appearance.backgroundColor = UIColor.orange
        // TabBar 顶部线条颜色
        appearance.shadowColor = UIColor.yellow
        // TabBar 子元素布局样式
        appearance.stackedItemPositioning = .centered // 默认: automatic 填充满: fill 居中: centered
        // TabBar 子元素间距
        appearance.stackedItemSpacing = 1000
        // 将自定义配置同步到应用中
        UITabBar.appearance().scrollEdgeAppearance = appearance // 作用域 iOS 15 以上版本
    } else {
        // MARK: UIKit 方式
        // 标签栏背景色
        UITabBar.appearance().backgroundColor = UIColor.orange
        // 标签文字未选中颜色
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
    }
}

以上便是此次分享的全部内容,希望能对大家有所帮助!文章来源地址https://www.toymoban.com/news/detail-686684.html

到了这里,关于TabView 初始化与自定义 TabBar 属性相关的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • android 添加ro属性字段并初始化

    硬件平台:QCS6125 软件平台:Android11 需求:硬件需通过硬件电路区分为多款型号,需要初始化到相应的系统属性字段展示。   这种型号属性适合做成ro类型,类似于原生系统的ro.product.model,由于android层面拿到这个具体的型号值是内核通过传递cmdline而获取的,内核层面拿到硬

    2024年01月16日
    浏览(84)
  • Spring 填充属性和初始化流程源码剖析及扩展实现

    在上一篇博文 讲解 Spring 实例化的不同方式及相关生命周期源码剖析 介绍了 Spring 实例化的不同方式,本文主要围绕实例化过后对象的填充属性和初始化过程进行详细流程剖析 回顾前言知识,doCreateBean-createBeanInstance,通过 Supplier 接口、FactoryMethod、构造函数反射 invoke,创建

    2024年02月06日
    浏览(44)
  • 结构体声明、定义和初始化的几种方式

    五种结构体声明方式: 直接声明结构体类型 声明结构体类型的同时定义结构体变量 不指定结构体名而直接定义结构体变量 使用结构体标记和类型别名 直接声明结构体别名 在C语言中,标记(tag)是在定义struct, union或enum之后使用的标识符。 之所以称其为结构体的“

    2023年04月11日
    浏览(46)
  • cv库学习,一 Mat类矩阵的定义初始化

    1,由多维数组定义初始化Mat类矩阵;      double m[2][2]={{1.0,2.0},{3.0,4.0}};       Mat M(2,2,CV_64F,m); 2,构造函数定义法      Mat M(2,2,CV_32FC3,Scalar(100,200,300));       Mat M(2,2,CV_32FC2,Scalar(100,200));       Mat M(2,2,CV_8UC1,Scalar(100)); 3,   M.create(Size(10, 20), CV_32FC3); 在原有的M矩阵上修改大

    2023年04月24日
    浏览(39)
  • Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序)

    写在前面: 本篇内容内容主要讲述了,在使用 Konva 进行开发过程中遇到的一些问题。(既然是组件加载顺序,主要牵扯到的就是,父子组件的关系,父子组件的生命周期) 众所周知, Vue 中父子组件生命周期的执行顺序为: 然而,在某些情况下我们有其他需求,例如我们不

    2024年02月12日
    浏览(49)
  • C语言——结构体类型(一)【结构体定义,创建,初始化和引用】

    📝前言: 在实际编程过程中,我们可能会希望把一些关联的数据存放在一起,这样方便我们使用。但是这些数据的类型有时候并不一致,例如一个学生的信息:有名字(字符串),有年龄(整数),性别(字符)······这时候,我们就可以使用 自定义类型——结构体类型

    2024年02月03日
    浏览(48)
  • 面试之快速学习c++11- 列表初始化和 lambda匿名函数的定义

    学习地址: http://c.biancheng.net/view/3730.html 我们知道,在 C++98/03 中的对象初始化方法有很多种,请看下面的代码: 2 .为了统一初始化方式,并且让初始化行为具有确定的效果,C++11 中提出了列表初始化(List-initialization)的概念。 3 . 在上面我们已经看到了,对于普通数组和

    2024年02月13日
    浏览(42)
  • 【数据结构】顺序栈和链栈的基本操作(定义,初始化, 入栈,出栈,取栈顶元素,遍历,置空)

    🎊专栏【数据结构】 🍔喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。 🎆音乐分享【勋章】 大一同学小吉,欢迎并且感谢大家指出我的问题🥰   目录 ⭐栈的分类 ✨顺序栈 🎈优点: 🎈缺点: ✨链栈 🎈优点: 🎈缺点: ⭐基本概念 ✨栈: ✨栈顶: ✨栈顶: ✨图片理

    2023年04月22日
    浏览(56)
  • 基于mysql5.7制作自定义的docker镜像,适用于xxl-job依赖的数据库,自动执行初始化脚本(ddl语句和dml语句)

    xxl-job-admin依赖mysql数据库,且需执行初始化脚本,包括ddl和dml语句。 具体的步骤总结如下: 1、新建数据库xxl_job 2、创建mysql表table 3、执行dml语句,包括新建admin用户及密码,创建执行器和任务。 毫无疑问,人工每次去操作这些,不仅耗费人力和时间,还容易出错。 所以,本

    2024年02月11日
    浏览(163)
  • Pytorch权重初始化/参数初始化

    refer: 【Pytorch】各网络层的默认初始化方法 https://blog.csdn.net/guofei_fly/article/details/105109883 其实Pytorch初始化方法就在各自的层的 def reset_parameters(self) - None: 方法中。 有人可能会问 为什么这个方法和Pytorch直接出来的权重初始值不一样 ?单步调试会发现其实这个方法运行了至少两

    2024年02月11日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包