iOS自定义Tab

项目背景 在日常开发中，经常遇到分段Tab的使用场景。不同场景，需求不同，有的需要带动画，有的需要带角标，有的需要遮罩动画。这里会提供一个综合的ZHXTabView,满足以上需求。 效果展示 1.基础用法 基本使用.gif 2.带角标 带角标.gif 3.带遮罩 带遮罩.gif 项目引用 1.去github下载ZHXTabView，将下面截图中蓝色圈文件拖入项目，红色圈为使用介绍，可以参考。 use.jpg 使用方法 1.基本使用:将ZHXTabView设置数据源，注意实现代理方法。 NSArray *titles = @[@"Asian",@"Europe",@"America",@"Africa"]; self.firstTabView = [[ZHXTabView alloc]initWithTitles:titles]; [self.view addSubview:self.firstTabView]; self.firstTabView.frame = CGRectMake(20, 150, ScreenWidth -40, 50); self.firstTabView.delegate = self; self.firstTabView.leftPadding = 10; self.firstTabView.rightPadding = 10; self.firstTabView.itemLineColor = [UIColor blueColor]; self.firstTabView.itemSelectedTextColor = [UIColor blueColor]; - (void)tabView:(ZHXTabView *)tabView didSelectItemAtIndex:(NSInteger)index{ } 2.带角标使用:为了使角标能高度自定义，自定义的角标view需要使用时继承ZHXBadgeView,或者是ZHXBadgeView的对象。 ZHXBadgeView *badgeOne = [[ZHXBadgeView alloc]initWithFrame:CGRectMake(0, 0, 15, 15)]; UILabel *hotBadge = [[UILabel alloc]initWithFrame:badgeOne.bounds]; [badgeOne addSubview:hotBadge]; hotBadge.backgroundColor = [UIColor redColor]; hotBadge.textAlignment = NSTextAlignmentCenter; hotBadge.font = [UIFont systemFontOfSize:10]; hotBadge.layer.cornerRadius = 7.5; hotBadge.clipsToBounds = YES; hotBadge.text = @"2"; hotBadge.textColor = [UIColor whiteColor]; 同时要指定哪个索引加角标 /// 给指定索引添加角标 /// @param badgeView 自定义的角标view /// @param index 要添加的那个位置 /// @param size 角标的大小，(宽和高) /// @param topOffset 角标的顶部相对于文字顶部的偏移，一般为负值 /// @param rightOffset 角标的左边相对于文字右边的偏移，一般为负值 - (void)configBadge:(ZHXBadgeView *)badgeView atIndex:(NSInteger)index badgeSize:(CGSize)size topOffsetFromTextTop:(CGFloat)topOffset rightOffsetFormTextRight:(CGFloat)rightOffset 3.带遮罩，需要自己通过CAShapeLayer和UIBezierPath去实现。具体使用可参考Demo里的代码，注意使用时view的层级设置正确，以及遮罩底部的过度动画。 ZHXBadgeView提供的API @property (nonatomic, weak) id delegate;/// *)titles; /// Set the location of the selected item by default /// @param defaultIndex index .Default index is 0. - (void)configDefultSelectedIndex:(NSInteger)defaultIndex; /// Set the badge relative to, and give it relative to, the text above and to the right.If you have multiple badges ,you can set it multiple times. /// @param badgeView custom badge , need to inherit from ZHXBadgeView /// @param index position index /// @param size badgeView size /// @param topOffset Badge's top can be negative relative to the spacing above the text /// @param rightOffset The spacing on the left side of the badge relative to the right side of the text can be negative - (void)configBadge:(ZHXBadgeView *)badgeView atIndex:(NSInteger)index badgeSize:(CGSize)size topOffsetFromTextTop:(CGFloat)topOffset rightOffsetFormTextRight:(CGFloat)rightOffset; /// Sets whether the specified location is marked hidden or displayed /// @param isHide hide /// @param index location - (void)configBadgeHide:(BOOL)isHide atIndex:(NSInteger)index; 交流联系 欢迎大家下载使用，有问题，可以及时评论区留言。如果对你有用，欢迎github点个star. Demo下载地址

本文章由javascript技术分享原创和收集