美文网首页
iOS 自定义tabbar 适应IPhoneX

iOS 自定义tabbar 适应IPhoneX

作者: 奔跑吧小蚂蚁 | 来源:发表于2018-06-29 16:58 被阅读130次

    在写代码之前先描述一下自己的问题,我的需求是保留tabbar功能的基础在tabbar中间添加一个按钮或者按钮 图片/文字或者图片加文字。点击该添加的视图弹出新的界面 看一下效果图吧。我只放了图片的,如果要加文字同样的方式添加即可。

    tabbar.png

    自定义tabbar

    1 ZFTabbar.h

    #import <UIKit/UIKit.h>
    
    /**
     自定义的TabBar
     */
    @class ZFTabbar;
    @protocol ZFTabbarDelegate <UITabBarDelegate>
    @optional
    - (void)tabBarDidClickCenterButton:(ZFTabbar *)tabBar;
    @end
    
    @interface ZFTabbar : UITabBar
    @property(nonatomic,weak)id <ZFTabbarDelegate> delegate;
    
    @end
    

    1 ZFTabbar.m

    #import "ZFTabbar.h"
    
    @interface ZFTabbar ()
    
    @property (nonatomic,weak)UIButton *centerButton;
    
    @end
    
    @implementation ZFTabbar
    
    
    -(id)initWithFrame:(CGRect)frame {
        self = [super initWithFrame:frame];
        if (self) {
            [self addSubview:self.centerButton];
        }
        return self;
    }
    
    
    - (UIButton *)centerButton{
        if (!_centerButton) {
            UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
            [button setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
            [button setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateSelected];
            button.size = button.currentBackgroundImage.size;
            button.center = CGPointMake(Screen_Width/2, 24.5);
            [button setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
            [button setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateHighlighted];
            [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
            _centerButton = button;
            [self addSubview:_centerButton];
        }
        return _centerButton;
    }
    
    - (void)buttonClick:(UIButton *)button{
        if ([self.delegate respondsToSelector:@selector(tabBarDidClickCenterButton:)]) {
            [self.delegate tabBarDidClickCenterButton:self];
        }
    }
    
    //调整子空间的位置
    -(void)layoutSubviews
    {
        [super layoutSubviews];
        CGFloat w = self.bounds.size.width;
        NSLog(@"self.bounds.size.height:%f",self.bounds.size.height);
        CGFloat h = self.bounds.size.height;
        CGFloat btnX = 0;
        CGFloat btnY = 0;
        CGFloat btnW = w / 5;
        CGFloat btnH = h;
        int i = 0;
        //1 , 遍历当前tabBar上的所有view
        for (UIView *tabBarBtn in self.subviews) {
            //2,如果是UITabBarButton,就取出来重新设置他们的位置
            if ([tabBarBtn isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
                btnX = i * btnW;
                if (IS_IPHONE_X) {
                    tabBarBtn.frame = CGRectMake(btnX, 0, btnW, 49);
                }else{
                    tabBarBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
                }
                I++;
                //当到了第二个时候,再加一个位置空竹添加按钮的位置。
                if (i==2) {
                    I++;
                }
            }
        }
    }
    

    3 UITabBarController调用代码

    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        ZFTabbar *tabBar = [[ZFTabbar alloc]initWithFrame:self.tabBar.frame];
        tabBar.delegate = self;
        //用kvc把readly的tabBar属性改成自定义的
        [self setValue:tabBar forKey:@"tabBar"];
        [self setTabbar];
    }
    #pragma mark - UI
    #pragma mark-- tabbar导航栏设置
    - (void)setTabbar{
        
        ZFHomeController *homeVc = [[ZFHomeController alloc]init];
        ZFNavigationController *homeNav = [[ZFNavigationController alloc]initWithRootViewController:homeVc];
        homeNav.navigationBarHidden = YES;
        
        ZFCategoryController *categoryVc = [[ZFCategoryController alloc]init];
        ZFNavigationController *categoryNav = [[ZFNavigationController alloc]initWithRootViewController:categoryVc];
        categoryNav.navigationBarHidden = YES;
        
        ZFRankController *rankVc = [[ZFRankController alloc]init];
        ZFNavigationController *rankNav = [[ZFNavigationController alloc]initWithRootViewController:rankVc];
        rankNav.navigationBarHidden = YES;
        
        ZFUserController *usereVc = [[ZFUserController alloc]init];
        ZFNavigationController *userNav = [[ZFNavigationController alloc]initWithRootViewController:usereVc];
        userNav.navigationBarHidden = YES;
        
        NSArray *array;
        NSArray *imageArray;
        NSArray *selectImageArray;
        NSArray *tabTitles;
        
        array = [[NSArray alloc]initWithObjects: homeNav,categoryNav,rankNav,userNav,nil];
        imageArray = @[@"homeN",@"categoryN",@"rankN",@"userN"];
        selectImageArray = @[@"homeS",@"categoryS",@"rankS",@"userS"];
        tabTitles = @[@"首页",@"类别",@"排行榜",@"我的"];
        
        
        self.viewControllers = array;
        self.delegate = self;
        self.tabBar.translucent = NO;
        [self.tabBar setClipsToBounds:NO];
        
        for(int i = 0; i < self.tabBar.items.count; i++){
            
            UITabBarItem* tabBarItem = self.tabBar.items[I];
            
            [tabBarItem setImageInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
            tabBarItem.title = tabTitles[I];
            tabBarItem.selectedImage = [[UIImage imageNamed_environment:[NSString stringWithFormat:@"%@",selectImageArray[i]]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
            tabBarItem.image = [[UIImage imageNamed_environment:[NSString stringWithFormat:@"%@",imageArray[i]]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
            
            NSMutableDictionary *textAttrs = [NSMutableDictionary dictionary];
            textAttrs[NSForegroundColorAttributeName] = [UIColor lightGrayColor];
            textAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
            
            NSMutableDictionary *selectTextAttrs = [NSMutableDictionary dictionary];
            selectTextAttrs[NSForegroundColorAttributeName] = ZFMainColor;
            selectTextAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
            
            [[UITabBarItem appearance] setTitleTextAttributes:textAttrs forState:UIControlStateNormal];
            [[UITabBarItem appearance] setTitleTextAttributes:selectTextAttrs forState:UIControlStateSelected];
        }
        self.selectedIndex = 0;
    }
    #pragma mark--<ZFTabbarDelegate>
    - (void)tabBarDidClickCenterButton:(ZFTabbar *)tabBar{
    
    }
    
    

    到这里就结局了 需要注意的是layoutSubviews方法,将IphoneX tabbar的高度调成49,否则会引起按钮和图片的位置间距过大。 需要添加文字,就添加label因为如果直接对button titleLabel进行设置比较难调,按照添加button的方式进行添加就可以了。希望帮到你。

    相关文章

      网友评论

          本文标题:iOS 自定义tabbar 适应IPhoneX

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