UI篇-UITabBar及其相關其他知識

和UINavigationController類似,UITabBarController也可以輕松地管理多個控制器,輕松完成控制器之間的切換。

UITabBarController的視圖結構如下;

Paste_Image.png
  • UITabBar
    下方的工具條稱為UITabBar ,如果UITabBarController有N個子控制器,那么UITabBar內部就會有N 個UITabBarButton作為子控件與之對應。
    注意:UITabBarButton在UITabBar中得位置是均分的,UITabBar的高度為49。
    在上面的程序中,UITabBarController有4個子控制器,所以UITabBar中有4個UITabBarButton,UITabBar的結構?大致如下圖所示:
  • UITabBarButton
    UITabBarButton?面顯?什么內容,由對應子控制器的tabBarItem屬性來決定
    c1.tabBarItem.title=@"消息"; c1.tabBarItem.image=[UIImage imageNamed:@"tab_recent_nor"];
  • 有兩種方式可以往UITabBarController中添加子控制器

    (1)[tb addChildViewController:c1];
    (2)tb.viewControllers=@[c1,c2,c3,c4];

  • selectedIndex屬性
    通過該屬性可以獲得當前選中的viewController 的下標,以及手動切換子視圖。

  • selectedViewController屬性
    通過該屬性可以獲得當前選中的viewController,一般直接獲得是 UINavigationController。
    每個視圖控制器都有一個tabBarController屬性,通過它可以訪問所在的UITabBarController
    每個視圖控制器都有一個tabBarItem屬性,通過它控制視圖在UITabBarController的tabBar中的顯示信息。

系統自帶的TabBar

UITabBarController 中:

   ViewController *vc1=[[ViewController alloc] init];
   vc1.tabBarItem.title=@"首頁";
   vc1.tabBarItem.image=[[UIImage imageNamed:@"111N"]
   imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
   vc1.tabBarItem.selectedImage=[[UIImage imageNamed:@"111L"]
      imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    BHHHViewController *vc2=[[BHHHViewController alloc] init];
    vc2.tabBarItem.title=@"排行";
    vc2.tabBarItem.image=[[UIImage imageNamed:@"222N"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    vc2.tabBarItem.selectedImage=[[UIImage imageNamed:@"222L"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
   
    UINavigationController *nav1=[[UINavigationController alloc] initWithRootViewController:vc1];
    UINavigationController *nav2=[[UINavigationController alloc] initWithRootViewController:vc2];
    self.viewControllers=@[nav1,nav2];

設置TabBar背景顏色

tabBar和navigationBar 設置這個線的顏色都是使用 setShadowImage 這個方法.

方法-:
    self.tabBar.barTintColor = [UIColor blueColor];;//這樣是也可以修改顏色

方法二:
     UIView *backView = [[UIView alloc]  initWithFrame:CGRectMake(0, 0, WIDTH, Scale_Y(49))];
    backView.backgroundColor = RGB(248, 150, 68, 1);
    [self.tabBar insertSubview:backView atIndex:0];
    self.tabBar.opaque = YES;

設置TabBar頂部細線的顏色

 UIImageView  *navBarHairlineImageView = [[MethodTool shareTool] findHairlineImageViewUnder:self.tabBar];
 navBarHairlineImageView.hidden = YES;

    //設置背景顏色或圖片
    [self.tabBar setBackgroundImage:[[MethodTool shareTool]imageWithColor:[UIColor whiteColor] size:CGSizeMake(WIDTH, 49)]];
     //設置頂部細線的顏色
    [self.tabBar setShadowImage:[[MethodTool shareTool]imageWithColor:ViewlineColor size:CGSizeMake(WIDTH, 0.5)]];
     //設置點擊后的選中 item 背景顏色
    [self.tabBar setSelectionIndicatorImage:[[MethodTool shareTool]imageWithColor:[UIColor redColor] size:CGSizeMake(WIDTH/3, 49)]];

//*********************************
  - (UIImageView *)findHairlineImageViewUnder:(UIView *)view {
    if ([view isKindOfClass:UIImageView.class] && view.bounds.size.height <= 1.0) {
        return (UIImageView *)view;
    }
    for (UIView *subview in view.subviews) {
        UIImageView *imageView = [self findHairlineImageViewUnder:subview];
        if (imageView) {
            return imageView;
        }
    }
        return nil;
  }

設置TabBar下面的字體在不同狀態下的顏色:

    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor blackColor], NSForegroundColorAttributeName, nil] forState:UIControlStateNormal];
    [[UITabBarItem appearance] setTitleTextAttributes:  [NSDictionary dictionaryWithObjectsAndKeys:[UIColor redColor] ,NSForegroundColorAttributeName, nil]forState:UIControlStateSelected];

NSForegroundColorAttributeName 是iOS7.0之后才使用的,之前是 UITextAttributeTextColor,關于棄用后如何找到一個替代者,其實很簡單,認真閱讀:


棄用.png

系統自帶的TabBar 中關于底部Bar的隱藏問題和返回展現的最簡單的方法:

1. 在 BaseViewController 里面的 ViewDidLoad里面設置
 if (self.navigationController.viewControllers.count>1) {
    self.hidesBottomBarWhenPushed = YES;
 }

//如果在push跳轉時需要隱藏tabBar,需要在最外層的VC中跳轉之前設置
// block 回調中跳轉   需要緊緊寫在跳轉的前后
self.hidesBottomBarWhenPushed=YES;
NextViewController *next=[[NextViewController alloc]init];
[self.navigationController pushViewController:next animated:YES];
self.hidesBottomBarWhenPushed=NO;
//這樣back回來的時候,tabBar會恢復正常顯示。

2. 只需在第一層頁面向第二層頁面跳轉的地方設置一次即可,第二層向第三層跳轉時不需要再次設置,當然,想在第三層頁面上顯示出 tabbar,設置.hidesBottomBarWhenPushed = NO也是不可能的出效果的。
 NextViewController *next=[[NextViewController alloc]init];
 next.hidesBottomBarWhenPushed = YES;
[self.navigationController pushViewController:next animated:YES];

3.在 BaseViewController 里面的 init方法里面設置如下:也可以達到特定頁面隱藏  tabbar 的效果。(只要在 push前設定 nextView 的hidesBottomBarWhenPushed屬性才可以有效果,在 push 方法之后的設置都不行,init 方法在 push 方法之前執行)
    if ([NSStringFromClass(self.class) isEqualToString:@"IndexViewController"]||[NSStringFromClass(self.class) isEqualToString:@"MedicalViewController"]) {
         self.hidesBottomBarWhenPushed = NO;
    }else{
         self.hidesBottomBarWhenPushed = YES;
    }


4. for in 的方法找到  UITabbar  ,手動隱藏和展現,效果圖如下:
  -(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self hideTabBar];
}

-(void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
   [self showTabBar];
}
-(void)hideTabBar{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.5];

    for(UIView *view in self.tabBarController.view.subviews)
    {
        if([view isKindOfClass:[UITabBar class]])
        {
            [view setFrame:CGRectMake(view.frame.origin.x, HEIGHT, view.frame.size.width, view.frame.size.height)];
        
        }else
        {
            [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, 480)];
        }
    }
    [UIView commitAnimations];
 }

-(void)showTabBar {
    [UIView beginAnimations:nil context:NULL];
   [UIView setAnimationDuration:0.5];

    for(UIView *view in self.tabBarController.view.subviews)
    {
    
    NSLog(@"%@",view);
    if([view isKindOfClass:[UITabBar class]])
    {
        [view setFrame:CGRectMake(view.frame.origin.x, HEIGHT-49, view.frame.size.width, view.frame.size.height)];
        view.hidden = NO;
    }else
    {
        [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, 431)];
    }
}
[UIView commitAnimations];
}
hideTabbar.gif

關于隱藏底部的Tabbar 推薦使用第二種方法,最方便快捷。

自定義TbarBar 視圖切換時的動畫的關鍵方法(后續會整理出視圖切換時的動畫實現)

  - (id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
        animationControllerForTransitionFromViewController:(UIViewController *)fromVC
                                          toViewController:(UIViewController *)toVC  NS_AVAILABLE_IOS(7_0);
{
    return ani;
}

其他相同的用法還有很多:

   <UINavigationControllerDelegate>
 - (nullable id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                        animationControllerForOperation:(UINavigationControllerOperation)operation
                                                     fromViewController:(UIViewController *)fromVC
                                                       toViewController:(UIViewController *)toVC
{ if(operation==UINavigationControllerOperationPush)
   { if(fromVC==self)
       {
      return ani;
      } }
    return nil;
 }

這里的ani 是一個遵從<UIViewControllerAnimatedTransitioning>的類對象。

UIAppearance是一個協議,UIView默認已經遵守了這個協議。

  @protocol UIAppearance <NSObject>
  UIView 默認遵從 UIAppearance 協議
讓某一類控件在另一種控件中同時變現某種屬性

[[UIButton appearanceWhenContainedInInstancesOfClasses:@[[UIView class]]] setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];

上面這句話的意思 就是—-使UIView上面的UIButton的titleColor都變成灰色, 
而且作用域是整個工程, 也就是說,不管在工程中的哪個位置寫下這句代碼,
整個工程中的按鈕的字體顏色都會變成灰色**

Tbbar 點擊時圖標加動畫

注意,UITabbarViewController中已經實現了 UITabBarDelegate,如果再次設置 self.tabbar.delegate = self;會造成程序崩潰,并且 UITabbarViewController中 tabbar 是一個 只讀的屬性,不能再次操作。

//會被自動調用
-(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item{

    NSInteger index = [self.tabBar.items indexOfObject:item];
    [self animationWithIndex:index];
    if([item.title isEqualToString:@"發現"])
    {
  
    }
}
- (void)animationWithIndex:(NSInteger) index {
    NSMutableArray * tabbarbuttonArray = [NSMutableArray array];
    for (UIView *tabBarButton in self.tabBar.subviews) {
        if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
            [tabbarbuttonArray addObject:tabBarButton];
        }
    }
    CABasicAnimation*pulse = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    pulse.timingFunction= [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pulse.duration = 0.08;
    pulse.repeatCount= 1;
    pulse.autoreverses= YES;
    pulse.fromValue= [NSNumber numberWithFloat:0.7];
    pulse.toValue= [NSNumber numberWithFloat:1.3];
    [[tabbarbuttonArray[index] layer]
     addAnimation:pulse forKey:nil];
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,002評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,400評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,136評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,714評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,452評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,818評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,812評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,997評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,552評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,292評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,510評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,721評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,121評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,429評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,235評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,480評論 2 379

推薦閱讀更多精彩內容