iOS开发-新浪微博自定义tabbar的实现

如何实现新浪微博ios客户端主页的tabbar的样式和效果?

本人通过自定义的tabbar已经实现,效果如下:

1.主页,包含 4个viewController,点击底部的4个button即可切换vc

点击中央的按钮会弹出一个带有高斯模糊的视图

点击底部的中间的加号按钮会弹出一个新的视图,最好做一个 模糊的效果

点击图中,底部栏的叉号即可关闭该弹出的视图!

实现方案:

继承自 UITabBarController

隐藏系统的tabbar即可,自己重写一个 底部的 tabbarView视图即可

代码如下:

.h头文件

////  MyTabbarController.h//  CustomTabbar////  Created by yb on 15/2/7.//  Copyright (c) 2015年 http://blog.csdn.net/yangbingbinga. All rights reserved.//#import <UIKit/UIKit.h>@interface MyTabbarController : UITabBarController@end

.m实现文件

////  MyTabbarController.m//  CustomTabbar////  Created by yb on 15/2/7.//  Copyright (c) 2015年 http://blog.csdn.net/yangbingbinga. All rights reserved.//#import "MyTabbarController.h"//模仿新浪微博的tabbar//使用方法,通过storyboard拖拽一个tabbarViewController之后绑定该类即可@interface MyTabbarController ()@property(strong,nonatomic) UIView *tabbarView;//自定义个底部的tabbar视图@property(strong,nonatomic)UIView * popView;//点击"+"号弹出的视图,高斯模糊效果@end@implementation MyTabbarController- (void)viewDidLoad{    [super viewDidLoad];    [self configTabbarView];    [self configPopView];}#pragma mark - 点击弹出的视图上的关闭按钮-(void)tapX{    //1.移除当前遮盖视图    [self.popView removeFromSuperview];    }#pragma mark - 点击自定义的那个tabbar视图上的按钮-(void)tapButton:(UIButton *)button{        if (button.tag==2)//点击加号按钮    {                [UIView animateWithDuration:0.5 animations:^{            [self.view addSubview:self.popView];//可以自定义一些控件加上动画的效果        }];                    }        else if(button.tag>=3) //因为有5个按钮,现在只有4个ViewController,selectedIndex会向前移动一个    {        [self setSelectedIndex:button.tag-1];    }    else            [self setSelectedIndex:button.tag]; //给tabbar设置选中的ViewController    }#pragma mark - 配置tabbarView- (void)configTabbarView{    self.tabBar.hidden=YES;//隐藏掉系统的bar    UIScreen *s=[UIScreen mainScreen];    CGFloat wid=[s bounds].size.width;    CGFloat height=[s bounds].size.height;        self.tabbarView=[[UIView alloc]initWithFrame:CGRectMake(0, height-48, wid, 48)];    self.tabbarView.backgroundColor=[UIColor whiteColor];    [self.view addSubview:self.tabbarView];//自定的tabbar    for (int i=0; i<5; i++)  //自定义的贴上按钮5个    {        UIButton *button=[UIButton buttonWithType:UIButtonTypeCustom];        button.frame=CGRectMake(i*wid/5.0, 0, wid/5.0, 48);        UIImage *image=[UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];//设置自定义的按钮        [button setImage:image forState:UIControlStateNormal];        button.tag=i;        [button addTarget:self action:@selector(tapButton:) forControlEvents:UIControlEventTouchUpInside];        [self.tabbarView addSubview:button];    }        }#pragma mark - 初始化弹出的视图- (void)configPopView{    UIScreen *s=[UIScreen mainScreen];    CGFloat wid=[s bounds].size.width;    CGFloat height=[s bounds].size.height;    //点击中间的按钮弹出一个视图,是自定义的    self.popView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, wid, height)];    self.popView.backgroundColor = [UIColor whiteColor];    UILabel *label=[[UILabel alloc]initWithFrame:CGRectMake(100, 100, 100, 40)];    [label setText:@"弹出视图!"];    [label setTextColor:[UIColor blackColor]];    [self.popView addSubview:label];    //底部的关闭按钮    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];    button.frame = CGRectMake(0, height-48, wid, 48);    [button setImage:[UIImage imageNamed:@"5"] forState:UIControlStateNormal];    button.backgroundColor=[UIColor lightGrayColor];    [button addTarget:self action:@selector(tapX) forControlEvents:UIControlEventTouchUpInside];    [self.popView addSubview:button];}@end

使用方法:

使用storyboard创建一个 tabbarController, 给4个viewController设置  为 tabbarController的 viewControllers 数组中的元素,

绑定 自定义的tabbarController类,

storyboard中的结构如下图:

图中有4个  viewController,和一个 tabbarController

原文来自:http://blog.csdn.net/yangbingbinga