iOS UI Tab开发

iOS UI Tab开发(iOS 8)

tab这种样式,类似于单选,可以叫radio-style,这是一个现在主流的layout-design,它让APP内容结构清晰,开发分工逻辑明确,经典的就是微信,时钟等

技术分享技术分享

综述一下:

1.UITabBarController继承UIViewController,是一个ViewController container

2.UITabBarController拥有一个(readonly)的TabBar,TabBar拥有一到多个TabBarItem 

3.每一个Item需要关联一个自定义的UIViewController,有一个viewControllers属性,存储着每一个TabBarItem对应的ViewController,这个数组中元素的顺序就是Tabbar上展现的顺序

4.TabBarItem展现的Title-Text,如果没有自己设置,默认是对应的ViewController的title,Image应该主动设置好

5. UITabBarControllerDelegate protocol提供了监控TabBar的操作回调API

6.Embed in UITabBarController的每一个ViewController都会自动调整自己的layout来适应,以防止遮挡下方的Bar

7.TabBarItem如果>=6个,TabBarController会自动调整成如下:

技术分享      技术分享


接下来说说API

@property(nonatomic, readonly) UITabBar *tabBar

只读,不应该尝试去修改,为了配置item,应该去修改ViewControllers属性,它存在的意义是 only for situations where you want to display an action sheet using the showFromTabBar: method of the UIActionSheet class.


管理ViewControllers API

@property(nonatomic, copy) NSArray *viewControllers

这很明显是支持自定义的,另外一点:这个属性被赋值时,customizableViewControllers 属性的值与之一样

如果在runtime更换这个属性,之前selected的index如果不存在,默认会select index = 0

- (void)setViewControllers:(NSArray *)viewControllers animated:(BOOL)animated

意义不大,自我衡量是否需要

@property(nonatomic, copy) NSArray *customizableViewControllers

这个的用处在上面的图中给过形象化的解释

@property(nonatomic, readonly) UINavigationController *moreNavigationController

为了管理customizableViewControllers而产生的一个NavigationController


管理被选择中的Tab的API

@property(nonatomic, assign) UIViewController *selectedViewController

可以设置或者访问当前选中的ViewController

@property(nonatomic) NSUInteger selectedIndex

selectedViewController对应


UITabBarControllerDelegate

决定哪一个tab是否应该被选中

在选中tab之后执行action

在自定义tab顺序前后执行action

重写view旋转设置

支持配置自定义过渡动画

对应的method请参阅文档

UITabBar

    //让用户自定义items的布局,系统会自动弹出一个带有Done按钮的视图

    [self.tabBar beginCustomizingItems:@[item1, item3, item2]];

    // 设置item位置的样式

    self.tabBar.itemPositioning = UITabBarItemPositioningCentered;

    //以下2个属性需要设置Centered样式才有作用,否则无效

    self.tabBar.itemSpacing = 80.0f;

    self.tabBar.itemWidth   = 30.0f;



UITabBarItem

UITabBarItem *item = [[UITabBarItem alloc] initWithTitle:@"Test" image:nil tag:0];

//设置item上title-text的颜色

[item setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]} forState:UIControlStateNormal];

[item setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor darkGrayColor]} forState:UIControlStateSelected];

// 设置Item的image属性,To prevent system coloring,默认系统会使用图片资源的alpha值自己生成出来一张图片,很多时候我们设置图片不起作用的原因

item.image = [[UIImage imageNamed:@"color"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    //设置背景图片的内凹变化,正值向内缩小,负值向外延伸

    UIEdgeInsets insets;

    insets.left = -5;

    insets.right = -5;

    item.imageInsets = insets;

    

        //设置item.title位置偏移

    UIOffset offset;

    offset.horizontal = 30;

    offset.vertical   = -10;

    [item setTitlePositionAdjustment:offset];


UITabBarDelegate

提供了操作Tab时的回调API,详细参考官方文档


总结:

内容展示类,功能类的APP最外层的layout-design,推荐基于Tab的方式



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。