iOS 自定义tabbar 适应IPhoneX

2018-06-29  本文已影响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的方式进行添加就可以了。希望帮到你。

上一篇下一篇

猜你喜欢

热点阅读