类似腾讯体育TabBar-MMTabBar

作者: 爆炸头的波波安 | 来源:发表于2016-11-29 15:58 被阅读1177次
    封面.jpg

    1.支持的样式

    目前支持三种样式:

    typedef NS_ENUM(NSUInteger, MMTabBarViewGradientType) {
        MMTabBarViewGradientTypeNormal = 0,     //no underline and no mask
        MMTabBarViewGradientTypeUnderline = 1,  //only underline
        MMTabBarViewGradientTypeMasking= 2,     //only mask
    };
    

    默认样式为MMTabBarViewGradientTypeNormal。也就是下 图1 中的样式。

    图1.png 图2.png 图3.png

    2.初始化方式

    • 拖入MMGroup文件
    • 如demo中的FirstViewController继承于MMTabBarViewController
    • 签订MMTabBarViewDataSource,MMTabBarViewDelegate 两个协议。你可以参考UITableViewDataSource,UITableViewDelegateMMTabBarViewDataSource是必须实现的,因为它提供驱动视图的数据。而MMTabBarViewDelegate协议是可选的,它提供了对视图布局的自定义方式。参考第三部分的扩展方式。
    - (void)viewDidLoad {
        [super viewDidLoad];
        [self initMehod];
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
    }
    
    - (void)initMehod{
        self.dataSource = self;
        self.delegate = self;
        //指定样式
        self.gradientType = MMTabBarViewGradientTypeUnderline;
        [self reload];
    }
    
    #pragma mark - MMTabBarViewDataSource
    - (NSArray *)infomationsForViewController:(MMTabBarViewController *)tabBarViewController{
        return [self.dataArr copy];
    }
    
    - (NSUInteger )numberOfItemsInViewController:(MMTabBarViewController *)tabBarViewController {
        return self.dataArr.count;
    }
    
    - (MMTabBarModel *)infomationInViewController:(MMTabBarViewController *)tabBarViewController infoForItemAtIndex:(NSUInteger)index {
        return self.dataArr[index];
    }
    
    #pragma mark - get
    - (NSMutableArray *)dataArr {
        if (!_dataArr) {
            _dataArr = [NSMutableArray array];
            
            NSArray *data = @[@[@"OneVC",@"洛杉矶湖人"],@[@"SecondVC",@"凯尔特人"],@[@"ThirdVC",@"雷霆"],@[@"FourthVC",@"尼克斯"],@[@"FivethVC",@"圣安东尼奥马刺"],@[@"UIViewController",@"明尼苏达森林狼"],@[@"UIViewController",@"休斯顿火箭"],@[@"UIViewController",@"印第安纳步行者"],@[@"UIViewController",@"密尔沃基雄鹿"],@[@"UIViewController",@"小牛"],];
            
            for (int i = 0; i < data.count; i++) {
                [_dataArr addObject:[MMTabBarModel modelWithControllerClassName:[data[i] firstObject]  controllerTitle:[data[i] lastObject]]];
            }
            
        }
        return _dataArr;
    }
    

    3.通过可选的协议自定义自己想要的界面。

    @protocol MMTabBarViewDelegate <NSObject>
    @optional
    //=====================================TabBar=====================================
    //显示当前titleScrollView背景的颜色  defalut is #485CD5
    - (UIColor *)tabBarViewControllerShowTitleScrollViewBackgroudColor:(MMTabBarViewController *)tabBarViewController;
    //显示当前titleScrollView的高度    defalut is 40.0f
    - (CGFloat)tabBarViewControllerShowTitleScrollViewHeight:(MMTabBarViewController *)tabBarViewController;
    //=====================================Titles=====================================
    //显示当前title没有选中标题的颜色     defalut is blackColor
    - (UIColor *)tabBarViewControllerShowTitleUnSelectedColor:(MMTabBarViewController *)tabBarViewController;
    //显示当前title选中标题的颜色        defalut is whiteColor
    - (UIColor *)tabBarViewControllerShowTitleSelectedColor:(MMTabBarViewController *)tabBarViewController;
    //设置title到左右两边缘的距离          defalut is 10.0f;
    - (CGFloat)tabBarViewControllerShowTitleMargin:(MMTabBarViewController *)tabBarViewController;
    //=====================================Underline=====================================
    //显示当前下划线背景颜色颜色          defalut is whiteColor
    - (UIColor *)tabBarViewControllerShowUnderlineBackgroundColor:(MMTabBarViewController *)tabBarViewController;
    //显示当前下划线高度                 defalut is 2.0
    - (CGFloat)tabBarViewControllerShowUnderlineHeight:(MMTabBarViewController *)tabBarViewController;
    //=====================================MarkView=====================================
    //显示当前遮罩层的颜色               defalut is #333333
    - (UIColor *)tabBarViewControllerShowMarkViewBackgroundColor:(MMTabBarViewController *)tabBarViewController;
    @end
    

    4.demo效果:

    MMTabBarViewGradientTypeMasking 没有扩展样式的效果:

    4.gif

    如果你觉得这篇文章对你有所帮助,欢迎like或star!谢谢!
    其他样式请见demo

    相关文章

      网友评论

        本文标题:类似腾讯体育TabBar-MMTabBar

        本文链接:https://www.haomeiwen.com/subject/rmnapttx.html