自定义TabbarController

最新推荐文章于 2021-07-21 15:45:58 发布

雪-松

最新推荐文章于 2021-07-21 15:45:58 发布

阅读量503

点赞数 1

文章标签： ios 自定义控件

本文链接：https://blog.youkuaiyun.com/u010123208/article/details/52650614

版权

毕业之后，就没有碰iOS了，虽然才短短几个月，但是忘得已经差不多了。
自己写了一个自定义的Tabbar来练一下手。
我的初衷就是写以个能复用的Tabbar适用不同的要求。于是带着初衷上路了，写了第一版。
这里写图片描述
看上去好像基本满足初衷，但是还有很多要改进。

选中和未选中的文字、文字颜色、文字字体都能自定义
选中和未选中的图片能自定义，图片高度能够超出tabbar高度，而且依然能触发点击事件。
每个item的大小能自定义（现在只是自定义了宽度，高度固定49），就是为了适应上面图片这种大小不同的。

重要的事情说三遍。

item中的图片大小取决于导入的图片大小需要裁剪好之后导入工程。（后续会加上自定义大小，不受图片限制）
文章最后提供源码。
本人喜欢使用storyboard，所以使用环境为storyboard。（后面继续完善）
使用说明
1.导入源码 XSTabbarController文件。
2.创建类继承自XSTabbarController。
3.在storyboard中修改拖拽出来的UITabbarController控制器的类名为继承了XSTabbarController的类。

4.修改Tabbar的类名为XSTabbar。

5.在自己创建类中添加如下代码即可。

你需要几个tabbarItem就创建几个。

重点强调 *XSTabbarItemModel 中 rate的使用。我们假设tabor的总宽度为100%,每个空间所占的宽度的百分比在这设置。切记所有item的rate相加为100,否则无法设置成功。

XSTabbarItemModel的属性。

@property (nonatomic, copy) NSString *selectedTitle; //选中时显示的文字
@property (nonatomic, copy) NSString *noSelectedTitle; //未选中时显示的文字

@property (nonatomic, strong) UIFont *titleSelectedFont;//选中时文字的字体
@property (nonatomic, strong) UIFont *titleNoSelectedFont;//未选中时文字的字体

@property (nonatomic, strong) UIColor *titleSelectedColor;//选中时文字的颜色
@property (nonatomic, strong) UIColor *titleNoSelectedColor;//未选中时文字的颜色

@property (nonatomic, strong) UIImage *selectedImage; //选中时显示的图片
@property (nonatomic, strong) UIImage *noSelectedImage;//未选中时显示的图片

@property (nonatomic, assign) NSInteger rate; //比率% 当前这个item所占的宽度，主要是针对item大小不相等的情况 例如item希望宽度为总宽度的30% 此处填30

@property (nonatomic, strong) UIColor *selectBackgroundColor; //选中时的背景色
@property (nonatomic, strong) UIColor *noSelectedBackgroundColor;//未选中时的背景色

也就说明了我的自定义tabbar有这些功能。在XSTabbarItemModel每个属性都设置了默认值。

方法说明：
系统自带Tabbar中存在一条细小的分割线，我们通过下面方法来去除。

//从子空间中查找tabbar上部黑线控件
-(void)tabbarBlackLine:(BOOL)hidden
{
    if (hidden == YES) {
        return;
    }
    for(UIView *subview in self.tabBar.subviews) {
        if([subview isKindOfClass:UIImageView.class]&& subview.frame.size.height<=3.0) {
            [subview removeFromSuperview];
        }
    }
}

当图片超出Tabbar高度的时候，点击事件就不能触发，我们需要使用以下方法来处理。
//处理图片超出tabbar的高度之后的点击事件依然能够触发

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    UIView *view = [super hitTest:point withEvent:event];
    if (view == nil) {
        for (UIView *subView in self.subviews) {
            for (UIView *ssubView in subView.subviews) {
                CGPoint tp = [ssubView convertPoint:point fromView:self];
                if (CGRectContainsPoint(ssubView.bounds, tp)) {
                    if ([ssubView isKindOfClass:[UIImageView class]]) {
                        view = ssubView;
                    }
                }
            }
        }
    }
    return view;
}