UITabBar的三种常用方法(两种自定义)即自动切换tabbar各个子控制器

        在实际的项目开发中,凡是使用UITabBarController作为导航控制器的,在使用的过程中要注意三大问题点:1 UITabBarController添加子控制的方法  2 自定义的UITabBar的继承问题  3 自定义的UITabBar, 下面就详细就这两方面进行讨论和处理

1 UITabBarController添加子控制的方法:常见有两种方法:

1.1)其中一种是使用UIViewController的添加子控制器的方法(由于UITabBarController继承至UIViewController,所以也有这个方法):addChildViewController:<#(nonnull UIViewController *)#>,使用此中方法来添加子控制时,如果UITabBarButton导航按钮的图片不存在多状态显示不同图片的需要,使用vc.tabBarItem.image来设置就可以了;但是如果导航按钮图片需要多状态显示不同状态下的图片时,必须是vc.tabBarItem.image和vc.tabBarItem.selectedImage结合使用才有效(这不再需要设置背景图片了),如果只是使用设置导航按钮的背景图片的不同状态下的图片,是无效的,因为使用这种方法添加子控制器系统只默认显示UIControlStateNormal背景图片,其他状态图片不会显示的。还有很重要一点:使用这种方法时,在自定义tabBar时,一定要使用KVC来把系统的tabBar赋值给自定义的tabBar,其他方式都是错误报错的。使用此种方法的好处是,第一个导航控制器是选中的,所以界面展示时默认第一个导航按钮是选中状态的,不用再处理了,使用下面的方法则需要再处理,推荐用此方法

1.2)另一种UITabBarController添加子控制器的方法是使用其自己的属性方法: NSArray<__kindof UIViewController *> *viewControllers;创建子控制数组来添加子控制器。这种方法可以任意通过设置按钮的不同状态下的图片来处理,十分简单,对于那些UITabBarButton导航按钮需要在不同状态下显示不同图片的需求,都可以使用这种来处理,用起来得心应手,十分快捷简单,不像第一种方法那样容易出错,可以随意自定义tabBar,根据需要来推荐使用这种方式


2 自定义的UITabBar的继承问题 

       关于自定义的tabBar,是继承至UITabBar还是UIView,取决于UITabBarButton(即导航栏的按钮)上面的图片和导航按钮title文字是否一体(一体即美工做图时,图片上也带有title文字了,图片和文字在一张图片上了,不需要使用代码来加载文字了,如下图1是一体的);

2.1)当图片和文字是一体时,两种都方便快捷,都可以使用;

2.2)当UITabBarButton只有图片没有相应的导航按钮文字时(即导航按钮文字还需要用代码加载),最好使用继承至UITabBar的自定义tabBar,这样方便使用系统的vc.tabBarItem.image和vc.title来直接设置,且能保证图片和文字大小比例尤其保证图片和文字良好的上下左右的位置关系,使用继承至UIView的自定义tabBar,则很可能因为图片的大小不合适而导致图片和文字的位置关系/大小比例不和谐(如下图2)。

图1:                     

 

图2:

 

3 自定义的UITabBar

由于tabBar属性是只读属性,因此,在自定义时,不能直接对其进行赋值(即让系统的tabBar赋值给自定义的tabBar),因此就出现了一下两种处理方式:

3.1) 使用KVC来处理,自定义的tabBar必须继承至UITabBar,由于KVC是使用运行时来实现的,因此可以使用KVC来给只读属性赋值,详细demo地址:http://pan.baidu.com/s/1i4SX1QX

3.2)不使用KVC,使用代理处理,自定义的tabBar必须继承至UIView,通过设置自定义tabBar的代理方法来实现各子控制器的切换,详细demo地址:http://pan.baidu.com/s/1bQ3Doi

3.3)不需要自定义(因为有n个控制器,tabBar对应这n个控制器,不需要添加额外的导航按钮),可以直接使用vc.tabBarItem.image vc.tabBarItem.selectedImage设置,详细demo地址:http://pan.baidu.com/s/1c2ly0EW

 

注意:UITabBarItem的image属性和selectedImage属性,即导航按钮的图片,这个图片默认大小是30*30像素,当图片尺寸太大时,不会自动适应导航按钮的高度了,从而图片加载不出来。因此,导航栏图片必须让美工做尺寸合适,不能太大,一般60 * 60 的就可以作为设计尺寸的上限了。

 

2 自动切换UITabBarController各个子控制器方法:使用UITabBarController的selectedIndex属性,只需这样设置 self.tabBarController.selectedIndex = 2;//自动切换tabbar控制器 其中2为控制器所在的tabBarItem标签

转载于:https://my.oschina.net/llfk/blog/714551

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS 的自定义 TabBar 主要分为以下几个步骤: 1. 创建自定义 TabBar 创建一个继承于 UITabBar 的类,重写初始化方法和 layoutSubviews 方法,实现自定义 TabBar 的样式和布局。 2. 实现自定义 TabBarItem 创建一个继承于 UIButton 的类,用于实现自定义TabBarItem 样式,例如添加图片、文字等。 3. 设置自定义 TabBarItem 在自定义 TabBar 的初始化方法中,添加自定义TabBarItem,将其添加到 TabBar 上。 4. 替换系统 TabBar 在 AppDelegate 中,找到 TabBarControllertabBar 属性,将其替换为自定义TabBar。 示例代码: 自定义 TabBar 类: ``` class CustomTabBar: UITabBar { var items: [CustomTabBarItem] = [] override init(frame: CGRect) { super.init(frame: frame) setup() } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } private func setup() { // 隐藏默认的 TabBar self.tintColor = .clear self.backgroundImage = UIImage() self.shadowImage = UIImage() self.backgroundColor = .white } override func layoutSubviews() { super.layoutSubviews() // 设置自定义 TabBarItem 的布局 let itemWidth = self.frame.size.width / CGFloat(items.count) var itemIndex: CGFloat = 0 for item in items { item.frame = CGRect(x: itemWidth * itemIndex, y: 0, width: itemWidth, height: self.frame.size.height) itemIndex += 1 } } } ``` 自定义 TabBarItem 类: ``` class CustomTabBarItem: UIButton { var title: String? var normalImage: UIImage? var selectedImage: UIImage? override init(frame: CGRect) { super.init(frame: frame) setup() } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } private func setup() { // 设置 TabBarItem 的样式 self.imageView?.contentMode = .scaleAspectFit self.titleLabel?.font = UIFont.systemFont(ofSize: 12) self.setTitleColor(.gray, for: .normal) self.setTitleColor(.black, for: .selected) } override func layoutSubviews() { super.layoutSubviews() // 设置 TabBarItem 的布局 let imageHeight = self.frame.size.height * 0.6 self.imageView?.frame = CGRect(x: (self.frame.size.width - imageHeight) / 2, y: 5, width: imageHeight, height: imageHeight) self.titleLabel?.frame = CGRect(x: 0, y: self.frame.size.height - 20, width: self.frame.size.width, height: 20) } func set(title: String?, normalImage: UIImage?, selectedImage: UIImage?) { self.title = title self.normalImage = normalImage self.selectedImage = selectedImage // 设置 TabBarItem 的标题和图片 self.setTitle(title, for: .normal) self.setImage(normalImage, for: .normal) self.setImage(selectedImage, for: .selected) } } ``` 在自定义 TabBar 的初始化方法中,添加自定义TabBarItem: ``` class CustomTabBar: UITabBar { var items: [CustomTabBarItem] = [] override init(frame: CGRect) { super.init(frame: frame) setup() // 添加 TabBarItem let item1 = CustomTabBarItem() item1.set(title: "首页", normalImage: UIImage(named: "home_normal"), selectedImage: UIImage(named: "home_selected")) self.addSubview(item1) items.append(item1) let item2 = CustomTabBarItem() item2.set(title: "消息", normalImage: UIImage(named: "message_normal"), selectedImage: UIImage(named: "message_selected")) self.addSubview(item2) items.append(item2) let item3 = CustomTabBarItem() item3.set(title: "我的", normalImage: UIImage(named: "mine_normal"), selectedImage: UIImage(named: "mine_selected")) self.addSubview(item3) items.append(item3) } // ... } ``` 在 AppDelegate 中,找到 TabBarControllertabBar 属性,将其替换为自定义TabBar: ``` func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // ... let tabBarController = UITabBarController() tabBarController.viewControllers = [viewController1, viewController2, viewController3] // 替换为自定义 TabBar let customTabBar = CustomTabBar(frame: tabBarController.tabBar.frame) tabBarController.setValue(customTabBar, forKey: "tabBar") // ... return true } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值