iOS学习笔记(十七)————底部导航拦

/ 0评 / 0

看到这个控件,这到底是什么呢?其实现在主流的APP中几乎都选用了这个控件来作为模块划分的依据,就像QQ,QQ空间,微信,微博之类的APP,下面都有一个选项卡之类的控件,这就是Tabbar。tabbar就跟UINavigationController一样都是容器类,来看看效果:

tabbar

这就是Tabbar的效果了,来看看是怎样实现的

    AViewController *a = [[AViewController alloc] init];
    //    设置tabbar的元素
    UITabBarItem *itemA = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemHistory tag:1];
    a.tabBarItem = itemA;
    
    
    BViewController *b = [[BViewController alloc] init];
    UITabBarItem *itemB = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemBookmarks tag:2];
    b.tabBarItem = itemB;
    
    
    CViewController *c = [[CViewController alloc] init];
    UITabBarItem *itemC = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemSearch tag:3];
    c.tabBarItem = itemC;
    
    DViewController *d = [[DViewController alloc] init];
    UITabBarItem *itemD = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemMostRecent tag:4];
    d.tabBarItem = itemD;
    
    DViewController *d1 = [[DViewController alloc] init];
    
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:d1];
    
    UITabBarItem *itemD1 = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:5];
    nav.tabBarItem = itemD1;
   
    //    容器类
    UITabBarController *tabBar = [[UITabBarController alloc] init];

    //    设置所有的视图控制器
    tabBar.viewControllers = @[a,b,c,d,nav];
    
    //    设置选中的索引值  当前显示的viewcontroller
    //    默认选择第0个视图控制器
    tabBar.selectedIndex = 2;
    
    self.window.rootViewController = tabBar;

以上是使用系统自己的tabbar,使用起来还是很简单的,下面我们说一下真正常用的tarbar,我们看到的APP它们的tabbar都是不一样的,那肯定不是系统的啊,就必须需要我们自己定义了,下面展示一个自定义的tabbar。

customtabbar

这就是效果,其实实现还是很简单的,来看代码:
注意:这个自定义的tabbar肯定是要继承系统的tarbar的!

@interface MyTabBarController (){
    UIImageView *_tabBarBackgroundImageView;
    int maxBtnTag;
}
- (void)showTabBar;

- (void)hiddenTabBar;
@end

@implementation MyTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    AViewController *homeVC = [[AViewController alloc] init];
    UINavigationController *homeNav = [[UINavigationController alloc] initWithRootViewController:homeVC];
    
    
    BViewController *signVC = [[BViewController alloc] init];
    UINavigationController *signNav = [[UINavigationController alloc] initWithRootViewController:signVC];
    
    
    CViewController *classVC = [[CViewController alloc] init];
    UINavigationController *classNav = [[UINavigationController alloc] initWithRootViewController:classVC];
    
    DViewController *shopVC = [[DViewController alloc] init];
    UINavigationController *shopNav = [[UINavigationController alloc] initWithRootViewController:shopVC];
    
    AViewController *mineVC = [[AViewController alloc] init];
    UINavigationController *mineNav = [[UINavigationController alloc] initWithRootViewController:mineVC];
    
    
    //    调用这个viewControllers
    NSArray *navArray = @[homeNav,signNav,classNav,shopNav,mineNav];
    [self setViewControllers:navArray animated:YES];
    
    //    self.viewControllers = navArray
    
    
    //    添加自定义按钮
    [self myTabBar];

}

- (void)myTabBar
{
    //    创建背景图片
    _tabBarBackgroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 480-49, 320, 49)];
    
    //    指定自定义图片
    _tabBarBackgroundImageView.image = [UIImage imageNamed:@"tabBarBackground"];
    _tabBarBackgroundImageView.userInteractionEnabled = YES;
    [self.view addSubview:_tabBarBackgroundImageView];
    
    NSArray *arr = @[@"home",@"sign",@"class",@"shop",@"main"];
    
    int intervalX = 320/5;
    for (int i = 0; i < 5; i++) {
        UIImageView *titleImage = [[UIImageView alloc] init];
        
        
        UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake(10+intervalX*i, 26, 64, 30)];
        lab.text = [arr objectAtIndex:i];
        lab.textColor = [UIColor colorWithRed:0.4 green:0.3 blue:0.8 alpha:1];
        [_tabBarBackgroundImageView addSubview:lab];
        
        
        
        //        设置tabbar上图标的位置
        titleImage.frame = CGRectMake(20+intervalX*i, 5, 20, 20);
        titleImage.tag = i+11;
        
        if (i==0) {
            [titleImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d",i+1]]];
        }
        else
        {
            [titleImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"unH%d",i+1]]];
            
        }
        
        
        [_tabBarBackgroundImageView addSubview:titleImage];
        
        
    }

    //    创建按钮
    //    int intervalX = 320/5;
    //    for (int i = 0; i < 5; i++) {
    //        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    //        btn.frame = CGRectMake(20+intervalX*i, 5, 20, 20);
    //        btn.tag = i+1;
    //
    //        if (i==0) {
    //            [btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d",i+1]] forState:UIControlStateNormal];
    //        }
    //        else
    //        {
    //            [btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"unH%d",i+1]] forState:UIControlStateNormal];
    //
    //        }
    //
    //        [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    //        [_tabBarBackgroundImageView addSubview:btn];
    //
    //
    //    }
    
    for (int i = 0; i < 5; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(intervalX*i, 0, intervalX , 49);
        btn.tag = i+1;
        
        [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
        [_tabBarBackgroundImageView addSubview:btn];
        
        
    }
    
    
    
    
}


static NSInteger selectBtn = 1;

- (void)btnClick:(UIButton *)button
{
    //    视图的切换
    self.selectedIndex = button.tag-1;
    
    //   如果选中和当前的相同的话返回
    if (selectBtn == button.tag) {
        return;
    }
    
    UIImageView *btn1 = (UIImageView *)[self.view viewWithTag:button.tag + 10];
    [btn1 setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%ld",button.tag]] ];
    
    //    找到上一个按钮 并且让按钮的高亮状态变成非高亮
    UIImageView *btn = (UIImageView *)[self.view viewWithTag:selectBtn + 10];
    [btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"unH%ld",(long)selectBtn]] ];
    //    记录上一个按钮的值
    selectBtn = button.tag;
    
    
    //    self.selectedIndex = button.tag-1;
    //
    ////   如果选中和当前的相同的话返回
    //    if (selectBtn == button.tag) {
    //        return;
    //    }
    //    [button setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d",button.tag]] forState:UIControlStateNormal];
    //
    ////    找到上一个按钮 并且让按钮的高亮状态变成非高亮
    //    UIButton *btn = (UIButton *)[self.view viewWithTag:selectBtn];
    //    [btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"unH%d",selectBtn]] forState:UIControlStateNormal];
    ////    记录上一个按钮的值
    //    selectBtn = button.tag;
    
    
    
}

//
- (void)showTabBar{
    _tabBarBackgroundImageView.hidden = NO;

}

- (void)hiddenTabBar{
    _tabBarBackgroundImageView.hidden = YES;
}

当然了,以上只是一个很简单的自定义 tabbar,如果真正想用到开发中的自定义tabbar 可以参考代码请查看 这里

代码请查看 http://git.oschina.net/zcb1603999/LearningiOS

评论已关闭。