tabBar详解

iOS

tabBar :标签栏，苹果app用的最多的一种界面风格，我们来举例子说一下标签栏的基本知识
demo效果图如下(自己demo的图太丑，这里借用别人的图用下)：

图层树如下图：

打印图层信息；
po [self.view recursiveDescription]
结果：

<MZTabBar: 0x7f96d0c30fc0; baseClass = UITabBar; frame = (0 519; 320 49); autoresize = W+TM; layer = <CALayer: 0x60800022a660>>
   | <_UIBarBackground: 0x7f96d0c316f0; frame = (0 0; 320 49); userInteractionEnabled = NO; layer = <CALayer: 0x60800022b5a0>>
   |    | <UIImageView: 0x7f96d0c31ae0; frame = (0 0; 0 0); userInteractionEnabled = NO; layer = <CALayer: 0x60800022bcc0>>
   |    | <UIVisualEffectView: 0x7f96d0c31cc0; frame = (0 0; 0 0); layer = <CALayer: 0x60800022aec0>>
   |    |    | <_UIVisualEffectBackdropView: 0x7f96d0c31ed0; frame = (0 0; 0 0); autoresize = W+H; userInteractionEnabled = NO; layer = <UICABackdropLayer: 0x60800022b0c0>>
   |    |    | <_UIVisualEffectFilterView: 0x7f96d0f09c40; frame = (0 0; 0 0); autoresize = W+H; userInteractionEnabled = NO; layer = <CALayer: 0x600000023ee0>>
   | <UIButton: 0x7f96d0c320a0; frame = (145 -10.5; 30 30); opaque = NO; layer = <CALayer: 0x60800022be00>>
   | <UITabBarButton: 0x7f96d0c32af0; frame = (2 1; 76 48); opaque = NO; layer = <CALayer: 0x60800022dde0>>
   |    | <UITabBarSwappableImageView: 0x7f96d0c377e0; frame = (0 0; 30 30); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x60800022ddc0>>
   |    | <UITabBarButtonLabel: 0x7f96d0c32d90; frame = (0 0; 20.5 12); text = '闲鱼'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x608000286270>>
   | <UITabBarButton: 0x7f96d0f1f3a0; frame = (82 1; 76 48); opaque = NO; layer = <CALayer: 0x60800022de00>>
   |    | <UITabBarSwappableImageView: 0x7f96d0c06770; frame = (0 0; 30 30); opaque = NO; userInteractionEnabled = NO; tintColor = UIExtendedGrayColorSpace 0.572549 1; layer = <CALayer: 0x60800022de20>>
   |    | <UITabBarButtonLabel: 0x7f96d0f1f640; frame = (0 0; 20.5 12); text = '关注'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x600000286ae0>>
   | <UITabBarButton: 0x7f96d0f22030; frame = (162 1; 76 48); opaque = NO; layer = <CALayer: 0x60000002b2e0>>
   |    | <UITabBarSwappableImageView: 0x7f96d0f22d40; frame = (0 0; 30 30); opaque = NO; userInteractionEnabled = NO; tintColor = UIExtendedGrayColorSpace 0.572549 1; layer = <CALayer: 0x60000002b8c0>>
   |    | <UITabBarButtonLabel: 0x7f96d0f215c0; frame = (0 0; 20.5 12); text = '消息'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x600000286950>>
   | <UITabBarButton: 0x7f96d0c3a870; frame = (242 1; 76 48); opaque = NO; layer = <CALayer: 0x60800022ed80>>
   |    | <UITabBarSwappableImageView: 0x7f96d0c3c970; frame = (0 0; 30 30); opaque = NO; userInteractionEnabled = NO; tintColor = UIExtendedGrayColorSpace 0.572549 1; layer = <CALayer: 0x60800022efe0>>
   |    | <UITabBarButtonLabel: 0x7f96d0c3ab10; frame = (0 0; 20.5 12); text = '我的'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x608000287a30>>

得到，tabBar主要包含的子视图如下：

• _UIBarBackground
  
  • UIImageView (tabBar中的那条黑线)
• UIVisualEffectView 毛玻璃(做一些虚化效果)
  
  • _UIVisualEffectBackdropView
  • _UIVisualEffectFilterView
• UITabBarButton
  
  • UITabBarSwappableImageView
  • UITabBarButtonLabel

参考：
- iOS_自定制 tabBar

- UITabbarController 图标大小，颜色，选中图片

待整理知识