多按鈕Tab組件

image.png

TabsView.h


#import <UIKit/UIKit.h>

@interface TabsView : UIView

@property (nonatomic,copy)void (^onClickTitle)(UIButton *btn,NSInteger currentIndex,NSInteger toIndex);
//初始化
- (id)initWithFrame:(CGRect)frame WithTitleArr:(NSArray *)titleAr ;
//初始化某個title
- (void)initTitle:(NSInteger)toIndex ;

@end

TabsView.m


#import "TabsView.h"
#define TAG_START 1000
#define BTNHIGHSPACE 8
#define BTNWIDTHSPACE 12
#define BTNBASECOLOR [UIColor colorWithRed:217.0 / 255 green:98.0 / 255 blue:76.0 / 255 alpha:1.0]

@interface TabsView()

@property (nonatomic,strong)NSMutableArray *btnArr;

@property (nonatomic,assign)NSInteger currentIndex; //當(dāng)前顯示頁的索引

@end

@implementation TabsView

//初始化
- (id)initWithFrame:(CGRect)frame WithTitleArr:(NSArray *)titleAr
{
    self = [super initWithFrame:frame];
    if (self) {
        _currentIndex = -1;
        //title的數(shù)量
        NSInteger titleCount = titleAr.count;
        //基座:
        UIView *btnBaseView = [[UIView alloc]initWithFrame:CGRectMake(BTNWIDTHSPACE, BTNHIGHSPACE, self.frame.size.width - 2 * BTNWIDTHSPACE, self.frame.size.height -2*BTNHIGHSPACE)];
        btnBaseView.backgroundColor = BTNBASECOLOR;
        btnBaseView.layer.cornerRadius = 4;
        btnBaseView.layer.borderColor = BTNBASECOLOR.CGColor;
        btnBaseView.layer.borderWidth = 1;
        [self addSubview:btnBaseView];
        _btnArr = [[NSMutableArray alloc]initWithCapacity:titleCount];
        for (int i=0; i < titleCount; i++) {
            UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
            //計(jì)算尺寸及位置:
            CGFloat width = (btnBaseView.width-2-1*(titleCount-1)) / titleCount;
            CGFloat height = self.frame.size.height - 2 * BTNHIGHSPACE - 2;
            CGFloat x = BTNWIDTHSPACE + 1 + i * (width + 1);
            CGFloat y = BTNHIGHSPACE + 1;
            btn.frame = CGRectMake(x, y, width, height);
            btn.tag = TAG_START + i;//tag
            btn.titleLabel.font = [UIFont systemFontOfSize:16];
            //設(shè)置文字及字體顏色:
            [btn setTitle:[titleAr objectAtIndex:i] forState:UIControlStateNormal];
            [btn setTitleColor:BTNBASECOLOR forState:UIControlStateNormal];
            //第一個按鈕挤渐,左側(cè)圓角:
            if (i == 0)
            {
                UIBezierPath *maskSalePath = [UIBezierPath bezierPathWithRoundedRect:btn.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomLeft cornerRadii:CGSizeMake(3, 3)];
                CAShapeLayer *maskSaleLayer = [[CAShapeLayer alloc] init];
                maskSaleLayer.frame = btn.bounds;
                maskSaleLayer.path = maskSalePath.CGPath;
                btn.layer.mask = maskSaleLayer;
            }
            //最后一個按鈕闽烙,右側(cè)圓角:
            if (i == (titleCount - 1))
            {
                UIBezierPath *maskTerminalPath = [UIBezierPath bezierPathWithRoundedRect:btn.bounds byRoundingCorners:UIRectCornerBottomRight | UIRectCornerTopRight cornerRadii:CGSizeMake(3, 3)];
                CAShapeLayer *maskTerminalLayer = [[CAShapeLayer alloc] init];
                maskTerminalLayer.frame = btn.bounds;
                maskTerminalLayer.path = maskTerminalPath.CGPath;
                btn.layer.mask = maskTerminalLayer;
            }
           /*
            //如果不是最后一個按鈕,需要添加一個分隔豎線
            if (i < (titleCount - 1)) {
                
                //計(jì)算尺寸及位置
                CGFloat x = BTNWIDTHSPACE + (i+1)*(btnBaseView.width/titleCount);
                CGFloat y = BTNHIGHSPACE+1;
                CGFloat width = 1;
                CGFloat height = self.frame.size.height - 2 * BTNHIGHSPACE - 2;
                
                UIView *splitLine = [[UIView alloc]initWithFrame:CGRectMake(x, y, width, height)];
                splitLine.backgroundColor = BTNBASECOLOR;
                
                [self addSubview:splitLine];
            }
           
           */
            //點(diǎn)擊事件
            [btn addTarget:self action:@selector(didClickBtn:) forControlEvents:UIControlEventTouchUpInside];
            [_btnArr addObject:btn];
            [self addSubview:btn];
        }
    }
    return self;
}


//按鈕點(diǎn)擊事件:
- (void)didClickBtn:(UIButton *)sender
{
    NSInteger toIndex =sender.tag - TAG_START;
    if (self.currentIndex == toIndex)
    {
        return;
    }
    [self.btnArr enumerateObjectsUsingBlock:^(UIButton *btn, NSUInteger idx, BOOL * _Nonnull stop) {
        //當(dāng)前點(diǎn)擊的按鈕:
        if (idx == toIndex)
        {
            [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
            [btn setBackgroundColor:BTNBASECOLOR];
        }
        //其他按鈕
        else
        {
            [btn setTitleColor:BTNBASECOLOR forState:UIControlStateNormal];
            [btn setBackgroundColor:[UIColor whiteColor]];
        }
    }];
    //點(diǎn)擊事件:
    self.onClickTitle(sender, self.currentIndex, toIndex);
    self.currentIndex = toIndex;
}

//初始化某個title
- (void)initTitle:(NSInteger)toIndex
{
    [self.btnArr enumerateObjectsUsingBlock:^(UIButton *btn, NSUInteger idx, BOOL * _Nonnull stop) {
        //當(dāng)前點(diǎn)擊的按鈕:
        if (idx == toIndex)
        {
            [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
            [btn setBackgroundColor:BTNBASECOLOR];
        }
        //其他按鈕:
        else
        {
            [btn setTitleColor:BTNBASECOLOR forState:UIControlStateNormal];
            [btn setBackgroundColor:[UIColor whiteColor]];
        }
        
    }];
    self.currentIndex = toIndex;
}

@end

愿編程讓這個世界更美好

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌衷恭,老刑警劉巖随珠,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件窗看,死亡現(xiàn)場離奇詭異显沈,居然都是意外死亡拉讯,警方通過查閱死者的電腦和手機(jī)遂唧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進(jìn)店門纹烹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來召边,“玉大人隧熙,你說我怎么就攤上這事』龋” “怎么了整葡?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵遭居,是天一觀的道長俱萍。 經(jīng)常有香客問我枪蘑,道長腥寇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮赢赊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘寥殖。我一直安慰自己嚼贡,他們只是感情好粤策,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布秩贰。 她就那樣靜靜地躺著,像睡著了一般吭服。 火紅的嫁衣襯著肌膚如雪艇棕。 梳的紋絲不亂的頭發(fā)上沼琉,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天打瘪,我揣著相機(jī)與錄音闺骚,去河邊找鬼僻爽。 笑死胸梆,一個胖子當(dāng)著我的面吹牛碰镜,可吹牛的內(nèi)容都是我干的绪颖。 我是一名探鬼主播柠横,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了悠抹?” 一聲冷哼從身側(cè)響起楔敌,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤庆聘,失蹤者是張志新(化名)和其女友劉穎伙判,沒想到半個月后宴抚,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體菇曲,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡埃跷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了剪勿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡龄减,死狀恐怖烁巫,靈堂內(nèi)的尸體忽然破棺而出亚隙,到底是詐尸還是另有隱情阿弃,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布砂客,位于F島的核電站泥张,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏鞠值。R本人自食惡果不足惜媚创,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望彤恶。 院中可真熱鬧钞钙,春花似錦、人聲如沸声离。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽术徊。三九已至本刽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赠涮,已是汗流浹背子寓。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留笋除,地道東北人斜友。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像垃它,于是被迫代替她去往敵國和親鲜屏。 傳聞我的和親對象是個殘疾皇子烹看,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評論 2 350

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