如何实现新浪微博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年 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年 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;//隐藏掉系统的barUIScreen *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];//自定的tabbarfor (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
原文来自:
，人生才会更有意义。如果没有梦想，那就托做庸人。
