【Objective-c】 自定制 tabBar

Paste_Image.png
最新項(xiàng)目中,遇到定制標(biāo)簽的需求亥鸠,類試于『閑魚』,于是找網(wǎng)上找了幾個Demo學(xué)習(xí)识啦,發(fā)現(xiàn)實(shí)現(xiàn)的方法大概有兩種

1负蚊、創(chuàng)建一個UIView覆蓋在原來的tabBar上方,在UIView中定義一個協(xié)議颓哮,并且通過這個協(xié)議方法回調(diào)來設(shè)置當(dāng)前tabBar的index盖桥,從而實(shí)現(xiàn)視圖的切換。當(dāng)然這也能實(shí)現(xiàn)同樣的效果题翻,不過不推薦使用這種方法揩徊,畢竟這始終是一種土方法,后期添加功能不方便嵌赠,例如添加紅點(diǎn)塑荒。

2、通過繼承重寫的方法姜挺,修改原生tabBar的布局齿税,中間的『加號』是通過創(chuàng)建一個按鈕,添加原生tabBar上的炊豪,并且通過協(xié)議方法回調(diào)加號按鈕的點(diǎn)擊事件凌箕。

詳細(xì)請看代碼:
tabBarViewController子類

#import "MZTabBarViewController.h"
#import "OneViewController.h"
#import "TwoViewController.h"
#import "ThreeViewController.h"
#import "FoureViewController.h"
#import "MZTabBar.h"
#import "MZNavigationController.h"
@interface MZTabBarViewController ()<MZTabBarDelegate>

@end

@implementation MZTabBarViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self addViewController:[OneViewController new] title:@"閑魚" ItemImage:[UIImage imageNamed:@"home_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"home_highlight@2x.png"]];

    [self addViewController:[OneViewController new] title:@"魚塘" ItemImage:[UIImage imageNamed:@"fish_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"fish_highlight@2x.png"]];

    [self addViewController:[OneViewController new] title:@"消息" ItemImage:[UIImage imageNamed:@"message_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"message_highlight@2x.png"]];

    [self addViewController:[OneViewController new] title:@"我的" ItemImage:[UIImage imageNamed:@"account_normal@2x.png"]  ItemSelectedImage:[UIImage imageNamed:@"account_highlight@2x.png"]];

    MZTabBar *tabBar = [[MZTabBar alloc]init];
    tabBar.delegate = self;
    //重點(diǎn):因?yàn)橄到y(tǒng)的tabBar的屬性是只讀的,所以只能通過KVC方式替換系統(tǒng)的tabBar
    //替換tabBar的目的:1词渤、創(chuàng)建"發(fā)布按鈕" 2牵舱、重新布局item的位置
    [self setValue:tabBar forKey:@"tabBar"];
}

- (void)addViewController:(UIViewController *)vc title:(NSString *)title ItemImage:(UIImage *)image ItemSelectedImage:(UIImage *)selectedImage{
    vc.title = title;
    vc.tabBarItem.image = image;
    //設(shè)置item選中圖片,前提是要設(shè)置圖片的模式『原圖』展示
    vc.tabBarItem.selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    NSDictionary *dicNor = @{
                             NSForegroundColorAttributeName:[UIColor colorWithRed:123/255.0 green:123/255.0  blue:123/255.0  alpha:1.0]
                             };

    [vc.tabBarItem setTitleTextAttributes:dicNor forState:UIControlStateNormal];

    NSDictionary *dicSelected = @{
                                  NSForegroundColorAttributeName:[UIColor orangeColor]
                                  };
    [vc.tabBarItem setTitleTextAttributes:dicSelected forState:UIControlStateSelected];

    MZNavigationController *nac = [[MZNavigationController alloc]initWithRootViewController:vc];
    [self addChildViewController:nac];
}

#pragma mark - MZTabBar Delegate
- (void)tabBarDidClickPlusButton:(MZTabBar *)tabBar{
    NSLog(@"中間加號按鈕點(diǎn)擊");
}

NavigationCtroller 子類

#import "MZNavigationController.h"

@interface MZNavigationController ()

@end

@implementation MZNavigationController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

+ (void)initialize{
    UIBarButtonItem *barItem = [UIBarButtonItem appearance];
    //設(shè)置普通狀態(tài)
    NSDictionary *dicNormal = @{NSForegroundColorAttributeName:[UIColor orangeColor],NSFontAttributeName:[UIFont systemFontOfSize:13]};
    [barItem setTitleTextAttributes:dicNormal forState:UIControlStateNormal];
    
    //設(shè)置不可用狀態(tài)
    NSDictionary *dicDisabled = @{NSForegroundColorAttributeName:[UIColor colorWithRed:0.6 green:0.6 blue:0.6 alpha:0.7],NSFontAttributeName:[UIFont systemFontOfSize:13]};
    [barItem setTitleTextAttributes:dicDisabled forState:UIControlStateDisabled];

}
//重寫這個方法缺虐,目的是攔截所有push進(jìn)來的控制器
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{
    if (self.viewControllers.count>0) {
        //這是push進(jìn)來的控制器不是第一個控制器
        viewController.hidesBottomBarWhenPushed = YES;
    }
    [super pushViewController:viewController animated:animated];
}

@end

tabBar的子類

#import <UIKit/UIKit.h>
@class MZTabBar;

@protocol MZTabBarDelegate<UITabBarDelegate>
- (void)tabBarDidClickPlusButton:(MZTabBar *)tabBar;
@end

@interface MZTabBar : UITabBar
@property (nonatomic,weak) id<MZTabBarDelegate>delegate;
@end
#import "MZTabBar.h"
@interface MZTabBar()
@property (nonatomic,strong) UIButton *plusBtn;
@end
@implementation MZTabBar

- (instancetype)init{
    self = [super init];
    if (self) {
        UIButton *plusBtn = [[UIButton alloc]init];
        [plusBtn setBackgroundImage:[UIImage imageNamed:@"post_normal@2x.png"] forState:UIControlStateNormal];
        [plusBtn addTarget:self action:@selector(plusBtnClick:) forControlEvents:UIControlEventTouchUpInside];
        CGSize newSize = plusBtn.currentBackgroundImage.size;
        plusBtn.frame = CGRectMake(0, 0, newSize.width, newSize.height);
        [self addSubview:plusBtn];
        _plusBtn = plusBtn;
    }
    return self;
}

- (void)plusBtnClick:(UIButton *)sender{
    [self.delegate tabBarDidClickPlusButton:self];
}

- (void)layoutSubviews{
    [super layoutSubviews];
    
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    //設(shè)置發(fā)布按鈕的位置
    _plusBtn.center = CGPointMake(width/2, height/2-20);
    
    //遍歷tabBar的所有控件芜壁,并重新布局,中間的位置空出來
    //系統(tǒng)自帶的按鈕類型是UITabBarButton
    Class class = NSClassFromString(@"UITabBarButton");
    int index = 0;
    for (UIView *btn in self.subviews) {
        if ([btn isKindOfClass:class]) {
            CGRect rect = btn.frame;
            rect.origin.x = width/5 * index;
            rect.size.width = width/5;
            btn.frame = rect;
            
            index++;
            //如果是中間位置,則直接跳過高氮,空出來
            if (index == 2) {
                index++;
            }
        }
        
    }
}

//重寫hitTest方法慧妄,去監(jiān)聽發(fā)布按鈕的點(diǎn)擊,目的按時為了讓凸出部分點(diǎn)擊也有反應(yīng)
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
    /*
     這個判斷是關(guān)鍵剪芍,不判斷的話push到其他頁面塞淹,點(diǎn)擊發(fā)布按鈕的位置也是會有反應(yīng)的,這樣就不好了
     self.isHidden == NO 說明當(dāng)前頁面是有tabBar的罪裹,那么肯定是再導(dǎo)航控制器的根控制器頁面
     在導(dǎo)航控制器根控制器頁面饱普,那么我們就需要判斷手指點(diǎn)擊的位置是否再發(fā)布按鈕身上
     是的話运挫,讓發(fā)布按鈕自己處理點(diǎn)擊事件,不是的話讓系統(tǒng)去處理點(diǎn)擊事件就可以了
     
     這里有一個理解的關(guān)鍵點(diǎn):傳動鏈?zhǔn)菑南峦系姆驯耍簿褪菑淖畹讓娱_始往頂層遍歷UIResporter的子類
     因?yàn)檫@個框架是UITabBar --  UINavigation -- ViewController -- view,所以Window首先
     是把UIEvent事件傳遞給UITabBar的口芍,這時重寫hitTest方法箍铲,攔截事件并返回plusBtn,系統(tǒng)就會繼續(xù)調(diào)用
     plusBtn的hitTest方法遍歷其所有的子類,確定事件的第一響應(yīng)者鬓椭。
     */
    if (self.isHidden == NO) {
        //將當(dāng)前tabBar的觸摸點(diǎn)轉(zhuǎn)換坐標(biāo)系颠猴,轉(zhuǎn)換到發(fā)布按鈕的身上,生成一個新的點(diǎn)
        CGPoint newPoint = [self convertPoint:point toView:self.plusBtn];
        //判斷這個新的點(diǎn)是否在發(fā)布按鈕身上小染,若是翘瓮,那么處理點(diǎn)擊事件的最合適的view就是發(fā)布按鈕
        if ([self.plusBtn pointInside:newPoint withEvent:event]) {
            return self.plusBtn;
        }else{
            //如果不在發(fā)布按鈕身上,直接讓系統(tǒng)處理就好
            return [super hitTest:point withEvent:event];
        }
    }else{
        //tabBar隱藏了裤翩,那么說明已經(jīng)push到其他的頁面了资盅,這個時候還是讓系統(tǒng)去判斷最合適的view處理就好了
        return [super hitTest:point withEvent:event];
    }

}

完整Demo20161130
出自JSOfJackChen

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市踊赠,隨后出現(xiàn)的幾起案子呵扛,更是在濱河造成了極大的恐慌,老刑警劉巖筐带,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件今穿,死亡現(xiàn)場離奇詭異,居然都是意外死亡伦籍,警方通過查閱死者的電腦和手機(jī)蓝晒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鄙皇,你說我怎么就攤上這事搓幌。” “怎么了剩燥?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長立倍。 經(jīng)常有香客問我灭红,道長,這世上最難降的妖魔是什么口注? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任变擒,我火速辦了婚禮,結(jié)果婚禮上寝志,老公的妹妹穿的比我還像新娘娇斑。我一直安慰自己策添,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布毫缆。 她就那樣靜靜地躺著唯竹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪苦丁。 梳的紋絲不亂的頭發(fā)上浸颓,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機(jī)與錄音旺拉,去河邊找鬼产上。 笑死,一個胖子當(dāng)著我的面吹牛蛾狗,可吹牛的內(nèi)容都是我干的晋涣。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼沉桌,長吁一口氣:“原來是場噩夢啊……” “哼谢鹊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起留凭,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤撇贺,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后冰抢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體松嘶,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年挎扰,在試婚紗的時候發(fā)現(xiàn)自己被綠了翠订。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡遵倦,死狀恐怖尽超,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情梧躺,我是刑警寧澤似谁,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站掠哥,受9級特大地震影響巩踏,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜续搀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一塞琼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧禁舷,春花似錦彪杉、人聲如沸毅往。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽攀唯。三九已至,卻和暖如春渴丸,著一層夾襖步出監(jiān)牢的瞬間侯嘀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工曙强, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留残拐,地道東北人途茫。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓碟嘴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親囊卜。 傳聞我的和親對象是個殘疾皇子娜扇,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容