zoukankan      html  css  js  c++  java
  • iOS自定义tabBar

    在我们的项目中经常会自己自定义tabBar因为苹果自带的真的太丑了!也不满足我们的项目需求。

    好 开始行动吧!

    先上图看下我们最终实现的效果:

    继承UItabBar自定义一个自己的tabBar

    .h
    #import <UIKit/UIKit.h>

    @class HJTTabBar;
    @protocol ZTTabBarDelegate <UITabBarDelegate>

    @optional

    - (void)tabBarDidClickPlusButton:(HJTTabBar *)tabBar;

    @end

    @interface HJTTabBar : UITabBar

    @property (nonatomic, weak) id<ZTTabBarDelegate> myDelegate;

    @end

    复制代码
    .m
    #import "HJTTabBar.h"
    #import "UIBarButtonItem+Extension.h"
    #import "UIView+Extension.h"
    @interface HJTTabBar ()

    @property (nonatomic, weak) UIButton *plusBtn;

    @end

    @implementation HJTTabBar

    - (instancetype)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
            UIButton *plusBtn = [[UIButton alloc] init];
            [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
            [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
            [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
            [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];

            plusBtn.size = plusBtn.currentBackgroundImage.size;
            [plusBtn addTarget:self action:@selector(plusBtnClick) forControlEvents:UIControlEventTouchUpInside];
            [self addSubview:plusBtn];
            self.plusBtn = plusBtn;
        }
        return self;
    }

    /**
     *  加号按钮点击
     */
    - (void)plusBtnClick
    {
        // 通知代理
        if ([self.delegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) {
            [self.myDelegate tabBarDidClickPlusButton:self];
        }
    }

    /**
     *  想要重新排布系统控件subview的布局,推荐重写layoutSubviews,在调用父类布局后重新排布。
     */
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        
        // 1.设置加号按钮的位置
        self.plusBtn.centerX = self.width*0.5;
        self.plusBtn.centerY = self.height*0.5;
        
        // 2.设置其他tabbarButton的frame
        CGFloat tabBarButtonW = self.width / 5;
        CGFloat tabBarButtonIndex = 0;
        for (UIView *child in self.subviews) {
    //UITabBarItem  UITabBarButton
            Class class = NSClassFromString(@"UITabBarItem  ");
            if ([child isKindOfClass:class]) {
                // 设置x
                child.x = tabBarButtonIndex * tabBarButtonW;
                // 设置宽度
                child.width = tabBarButtonW;
                // 增加索引
                tabBarButtonIndex++;
                if (tabBarButtonIndex == 2) {
                    tabBarButtonIndex++;
                }
            }
        }
    }

    @end

    复制代码

    下面是Category:

    UIView+Extension.h中:
    #import <UIKit/UIKit.h>

    @interface UIView (Extension)

    @property (nonatomic, assign) CGFloat x;
    @property (nonatomic, assign) CGFloat y;
    @property (nonatomic, assign) CGFloat centerX;
    @property (nonatomic, assign) CGFloat centerY;
    @property (nonatomic, assign) CGFloat width;
    @property (nonatomic, assign) CGFloat height;
    @property (nonatomic, assign) CGSize size;
    @property (nonatomic, assign) CGPoint origin;

    @end
    复制代码
    UIView+Extension.m中:
    #import "UIView+Extension.h"

    @implementation UIView (Extension)

    - (void)setX:(CGFloat)x
    {
        CGRect frame = self.frame;
        frame.origin.x = x;
        self.frame = frame;
    }

    - (void)setY:(CGFloat)y
    {
        CGRect frame = self.frame;
        frame.origin.y = y;
        self.frame = frame;
    }

    - (CGFloat)x
    {
        return self.frame.origin.x;
    }

    - (CGFloat)y
    {
        return self.frame.origin.y;
    }

    - (void)setCenterX:(CGFloat)centerX
    {
        CGPoint center = self.center;
        center.x = centerX;
        self.center = center;
    }

    - (CGFloat)centerX
    {
        return self.center.x;
    }

    - (void)setCenterY:(CGFloat)centerY
    {
        CGPoint center = self.center;
        center.y = centerY;
        self.center = center;
    }

    - (CGFloat)centerY
    {
        return self.center.y;
    }

    - (void)setWidth:(CGFloat)width
    {
        CGRect frame = self.frame;
        frame.size.width = width;
        self.frame = frame;
    }

    - (void)setHeight:(CGFloat)height
    {
        CGRect frame = self.frame;
        frame.size.height = height;
        self.frame = frame;
    }

    - (CGFloat)height
    {
        return self.frame.size.height;
    }

    - (CGFloat)width
    {
        return self.frame.size.width;
    }

    - (void)setSize:(CGSize)size
    {
        CGRect frame = self.frame;
        frame.size = size;
        self.frame = frame;
    }

    - (CGSize)size
    {
        return self.frame.size;
    }

    - (void)setOrigin:(CGPoint)origin
    {
        CGRect frame = self.frame;
        frame.origin = origin;
        self.frame = frame;
    }

    - (CGPoint)origin
    {
        return self.frame.origin;
    }

    @end
    复制代码
    UIBarButtonItem+Extension.h中:

    #import <UIKit/UIKit.h>

    @interface UIBarButtonItem (Extension)

    + (UIBarButtonItem *)itemWithTargat:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage;

    @end
    复制代码
    UIBarButtonItem+Extension.m中:

    #import "UIBarButtonItem+Extension.h"
    #import "UIView+Extension.h"
    @implementation UIBarButtonItem (Extension)

    /**
     *  创建一个item
     *
     *  @param target    点击item后调用哪个对象的方法
     *  @param action    点击item后调用target的哪个方法
     *  @param image     图片
     *  @param highImage 高亮的图片
     *
     *  @return 创建完的item
     */
    + (UIBarButtonItem *)itemWithTargat:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage
    {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        // 设置图片
        [btn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
        [btn setBackgroundImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];
        // 设置尺寸
        btn.size = btn.currentBackgroundImage.size;
        [btn addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
        
        return [[UIBarButtonItem alloc] initWithCustomView:btn];
    }

    @end


    复制代码

    接下来我们就该在需要的地方使用自定义的tabBar了

    • 我是在UITabBarController中使用自定义的tabBar。
    导入#import "HJTTabBar.h"并遵循 HJTTabBarDelegate协议。
    复制代码
    在- (void)viewDidLoad 中实现下面代码:

    - (void)viewDidLoad {
        [super viewDidLoad];
        
        // 添加子控制器
        [self addChildVc:[[FirstPageViewController alloc] init] title:@"首页" image:@"tabbar_home" selectedImage:@"tabbar_home_selected"];
        [self addChildVc:[[CommunityViewController alloc] init] title:@"社区" image:@"tabbar_message_center" selectedImage:@"tabbar_message_center_selected"];
        [self addChildVc:[[MessageViewController alloc] init] title:@"消息" image:@"tabbar_discover" selectedImage:@"tabbar_discover_selected"];
        [self addChildVc:[[ConsultViewController alloc] init] title:@"咨询" image:@"tabbar_profile" selectedImage:@"tabbar_profile_selected"];
        
        HJTTabBar *tabBar = [[HJTTabBar alloc] init];
        
        //取消tabBar的透明效果
        tabBar.translucent = NO;
        tabBar.myDelegate = self;
        // KVC:如果要修系统的某些属性,但被设为readOnly,就是用KVC,即setValue:forKey:。
        [self setValue:tabBar forKey:@"tabBar"];
          
    }
    复制代码

    实现下面方法:

    - (void)addChildVc:(UIViewController *)childVc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
    {
        // 设置子控制器的文字(可以设置tabBar和navigationBar的文字)
        childVc.title = title;
        
        // 设置子控制器的tabBarItem图片
        childVc.tabBarItem.image = [UIImage imageNamed:image];
        // 禁用图片渲染
        childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        
        // 设置文字的样式
        [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor blackColor]} forState:UIControlStateNormal];
        [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor]} forState:UIControlStateSelected];
        //    childVc.view.backgroundColor = RandomColor; // 这句代码会自动加载主页,消息,发现,我四个控制器的view,但是view要在我们用的时候去提前加载
        
        // 为子控制器包装导航控制器
        UINavigationController *navigationVc = [[UINavigationController alloc] initWithRootViewController:childVc];
        // 添加子控制器
        [self addChildViewController:navigationVc];
    }
    复制代码

    #pragma HJTTabBarDelegate
    /**
     *  加号按钮点击
     */
    - (void)tabBarDidClickPlusButton:(HJTTabBar *)tabBar
    {
        NSLog(@"+++");
    }
    复制代码

    好了 完事!

  • 相关阅读:
    [LeetCode] Power of Three 判断3的次方数
    [LeetCode] 322. Coin Change 硬币找零
    [LeetCode] 321. Create Maximum Number 创建最大数
    ITK 3.20.1 VS2010 Configuration 配置
    VTK 5.10.1 VS2010 Configuration 配置
    FLTK 1.3.3 MinGW 4.9.1 Configuration 配置
    FLTK 1.1.10 VS2010 Configuration 配置
    Inheritance, Association, Aggregation, and Composition 类的继承,关联,聚合和组合的区别
    [LeetCode] Bulb Switcher 灯泡开关
    [LeetCode] Maximum Product of Word Lengths 单词长度的最大积
  • 原文地址:https://www.cnblogs.com/twodog/p/12137966.html
Copyright © 2011-2022 走看看