自定義tabbar 中間帶個大圓圈
先看效果圖
第一步 建立tabbarView 繼承自 UIView
tabbarview上邊需要新增的控制元件
@property (nonatomic, strong) UIButton *findButton;// 首頁按鈕
@property (nonatomic, strong) UIButton *lanMuButton;// 欄目按鈕
@property (nonatomic, strong) UIButton *huodongButton; 發現按鈕
@property (nonatomic, strong) UIButton *wodeButton; 我的按鈕
@property
@property (nonatomic, strong) UILabel *lanmuLabel; 欄目label
@property (nonatomic, strong) UILabel *huodonglabel; 活動label
@property (nonatomic, strong) UILabel *wodeLabel; 我的label
@property (nonatomic, strong)UIImageView *centerButton; 中間拍攝按鈕
控制元件的建立和新增程式碼此處就省略 著重說一下中間大圈是怎麼搞得
中間圓形View新增點選手勢 在tabbarcontroller中實現
- (void)centerBtnClicked{
拍照點選的協議方法
[self.mytabbardelegatecenterButtonSelect];
}
四個button的點選方法 每個button通過設定tag值來區分
- (void)buttonAction:(UIButton *)button{
if (button.tag == 0) {
四個button的點選協議方法 在tabbarcontroller中實現
[self.
/// 同時變換四個button的圖片和label文字的顏色
[self.findButtonsetImage:[UIImageimageNamed:@"index_bottom_fx_sc"] forState:UIControlStateNormal];
[self.lanMuButtonsetImage:[UIImageimageNamed:@"index_bottom_lm_df"] forState:UIControlStateNormal];
[self.huodongButtonsetImage:[UIImageimageNamed:@"index_bottom_hd_df"] forState:UIControlStateNormal];
[self.wodeButtonsetImage:[UIImageimageNamed:@"index_bottom_wd_df"] forState:UIControlStateNormal];
self.findLabel.textColor = [UIColororangeColor];
self.lanmuLabel.textColor = [UIColorgrayColor];
self.huodonglabel.textColor = [UIColorgrayColor];
self.wodeLabel.textColor = [UIColorgrayColor];
}elseif (button.tag == 1){
[self.mytabbardelegatetabbarButtonSelect:1];
/// 同時變換四個button的圖片和label文字的顏色省略.........
}elseif (button.tag == 3){
[self.mytabbardelegatetabbarButtonSelect:3];
/// 同時變換四個button的圖片和label文字的顏色省略........
}elseif(button.tag == 4){
[self.mytabbardelegatetabbarButtonSelect:4];
/// 同時變換四個button的圖片和label文字的顏色省略.........
rorangeColor];
}
}
第二步 建立mytabbarcontroller 繼承自UITabBarController- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{
self = [superinitWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
隱藏系統tabbar
self.tabBar.hidden = YES;
}
returnself;
}
- (void)viewDidLoad {
[superviewDidLoad];
[selfcreateView];
[selfcreatetab];
}建立並新增剛剛建立的tabbarView
- (void)createtab{
self.tabbarView = [[MyTabbarViewalloc] initWithFrame:CGRectMake(0, HEIGHT-64, self.view.frame.size.width, 64)];
self.tabbarView.backgroundColor = [UIColorwhiteColor];
[self.viewaddSubview:self.tabbarView];
///// 在tabbarview上邊界新增陰影效果
self.tabbarView.layer.shadowColor = [UIColorlightGrayColor].CGColor;
// 陰影偏移右下
self.tabbarView.layer.shadowOffset = CGSizeMake(0, 0);
// 陰影透明度
self.tabbarView.layer.shadowOpacity = 1;
// 陰影半徑
self.tabbarView.layer.shadowRadius = 2;
//// 設定代理
self.tabbarView.mytabbardelegate = self;
}
///// 給mytabbarcontroller 新增控制器
- (void)createView{
FirstPageViewController *findVc = [[FirstPageViewControlleralloc] init];
FLGNanViewController *findNaVC = [[FLGNanViewControlleralloc] initWithRootViewController:findVc];
findVc.tabBarItem.tag = 1000;
//欄目
ClassifyViewController *lanmuvc = [[ClassifyViewControlleralloc] init];
FLGNanViewController *lanmuNavc = [[FLGNanViewControlleralloc] initWithRootViewController:lanmuvc];
lanmuvc.tabBarItem.tag = 2000;
//相機
UIViewController *view = [[UIViewControlleralloc] init];
//活動
HuoDongViewController *hudongVC = [[HuoDongViewControlleralloc] init];
FLGNanViewController *huoDongNavic = [[FLGNanViewControlleralloc] initWithRootViewController:hudongVC];
hudongVC.tabBarItem.tag = 3000;
//我的
// WodeViewController *wodeVc = [[WodeViewController alloc] init];
NewWodeViewController *wodeVc = [[NewWodeViewControlleralloc] init];
FLGNanViewController *wodeNaVC = [[FLGNanViewControlleralloc] initWithRootViewController:wodeVc];
wodeVc.tabBarItem.tag = 4000;
//
self.viewControllers = [NSArrayarrayWithObjects:findNaVC, lanmuNavc,view, huoDongNavic, wodeNaVC, nil];
}
mytabbarview四個按鈕的點選協議方法 切換不同的控制器- (void)tabbarButtonSelect:(NSInteger)index{
self.selectedIndex = index;
}
中間大圈點選的協議方法
- (void)centerButtonSelect{
..........................
}第三步 設定tabbar的隱藏和出現 自定義的tabbarview 不太好實現像系統的tabbar那樣的隱藏效果 這裡我做成向下動畫隱藏 向上動畫出現的形式
出現
- (void)showTabbar{
[UIViewanimateWithDuration:0.2animations:^{
self.tabbarView.frame = CGRectMake(0, self.view.frame.size.height - 64, self.view.frame.size.width, 64);
}];
}
隱藏
- (void)hidenTabbar{
[UIViewanimateWithDuration:0.2animations:^{
self.tabbarView.frame = CGRectMake(0, self.view.frame.size.height+30 , self.view.frame.size.width, 64);
}];
}
將這兩個方法名寫在.h中 設定成對外可以呼叫
在需要出現或隱藏tabbar的地方 呼叫即可