ios 滑動(dòng)按鈕ScrollButton

??之前因?yàn)轫?xiàng)目需要,做了一個(gè)滑動(dòng)分段按鈕,現(xiàn)在才有空分享出來,雖然很簡單,但是還是要寫出來作為自己已經(jīng)學(xué)會(huì)了的小小證明,好了先上圖

ScrollButtonGif.gif

??如圖,主要有三種適應(yīng)模式對應(yīng)的屬性是btnWidthFitMode,第一種是視圖適應(yīng)模式(ViewFitMode),就是所有的按鈕都會(huì)顯示在視圖中并填滿ScrollView的width,第二種是文字適應(yīng)模式(FontFitMode),就是所有按鈕會(huì)根據(jù)按鈕名字自動(dòng)調(diào)整width,第三種是自定義模式,只需要直接對btnWidth賦值就可以,要注意的是如果對這個(gè)屬性賦值后,btnWidthFitMode這個(gè)屬性會(huì)自動(dòng)失效。
??要?jiǎng)?chuàng)建一個(gè)滑動(dòng)按鈕,需要一個(gè)名字?jǐn)?shù)組和id數(shù)組,并實(shí)現(xiàn)按鈕事件代理,代碼如下:

創(chuàng)建

  BaseScrollView *scrollView = [[BaseScrollView alloc]initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 50) andnameArray:@[@"1",@"2",@"3",@"4"] andIdArray:@[@1,@2,@3,@4]];
  scrollView.tag = 0;
  scrollView.baseScrollViewDelegate = self;
  [self.view addSubview:scrollView];

代理事件

-(void)BaseScrollViewSegmentBtnSelectAction:(BaseButton *)button andScrollView:(BaseScrollView *)scrollView{
    
    //do something
}

??其中代理事件中的button屬性為當(dāng)前選中的button,scrollView為當(dāng)前觸摸的BaseScrollView。

??下面介紹一下BaseScrollView的結(jié)構(gòu),上代碼

@class BaseScrollView;
@protocol BaseScrollViewDelegate<NSObject>

@optional

/**分段按鈕的代理事件**/
-(void)BaseScrollViewSegmentBtnSelectAction:(BaseButton*)button andScrollView:(BaseScrollView*)scrollView;

@end
@interface BaseScrollView : UIScrollView

/**按鈕寬度適應(yīng)模式**/
typedef NS_ENUM(NSUInteger, BtnWidthFitMode) {
    
    FontFitMode,//適應(yīng)文字模式
    ViewFitMode,//適應(yīng)視圖模式
};
@property (weak)id<BaseScrollViewDelegate>baseScrollViewDelegate;
/**當(dāng)前選中的按鈕索引**/
@property NSInteger selectedIndex;
/**按鈕寬度適應(yīng)模式,默認(rèn)ViewFitMode**/
@property BtnWidthFitMode btnWidthFitMode;
/**按鈕文字大小,默認(rèn)為16**/
@property CGFloat btnFontSize;
/**按鈕寬度,如果大于0,按鈕會(huì)強(qiáng)制使用這個(gè)寬度,就是適應(yīng)模式會(huì)失效**/
@property CGFloat btnWidth;

/**創(chuàng)建**/
-(instancetype)initWithFrame:(CGRect)frame andnameArray:(NSArray*)nameArray andIdArray:(NSArray*)idArray;

@end

??然后是關(guān)鍵代碼

創(chuàng)建多個(gè)按鈕的代碼

/**根據(jù)提供的數(shù)組創(chuàng)建分段按鈕**/
-(void)createSelfWithandnameArray:(NSArray*)nameArray andIdArray:(NSArray*)idArray{
    
    if(!nameArray){
        return;
    }
    //分段按鈕數(shù)組初始化
    segmentBtnArray = [NSMutableArray array];
    
    /**截取按鈕圖片**/
    UIImage *btnImage = [UIImage imageNamed:@"按鈕.png"];
    CGSize btnImageSize = CGSizeMake(btnImage.size.width, (btnImage.size.height-32)/2);
    UIImage *btnUpImage = [btnImage getSubImage:CGRectMake(0, 0, btnImageSize.width, btnImageSize.height)];
    UIImage *btnDownImage = [btnImage getSubImage:CGRectMake(0, btnImageSize.height+32, btnImageSize.width, btnImageSize.height)];
    /**截取按鈕圖片**/
    
    /**創(chuàng)建按鈕**/
    for (NSInteger index = 0; index < nameArray.count; index++) {
        
        //這里是封裝了按鈕的創(chuàng)建代碼,主要是嫌麻煩,想一步到位
        BaseButton *segmentBtn = [BaseButton createButton:CGRectZero name:nameArray[index] andAction:@selector(segmentBtnAction:) andTarget:self];
        //設(shè)置按鈕的背景圖片
        [segmentBtn setUpImage:btnUpImage andDownImage:btnDownImage];
        //設(shè)置字體大小
        segmentBtn.titleLabel.font = [UIFont systemFontOfSize:self.btnFontSize];
        segmentBtn.targetIndex = [idArray[index]integerValue];
        //設(shè)置字體顏色
        [segmentBtn setTitleColor:[UIColor blueColor] forState:UIControlStateSelected];
        
        //添加到按鈕數(shù)組中
        [segmentBtnArray addObject:segmentBtn];
        [self addSubview:segmentBtn];
        if (index == 0) {
            lastBtn = segmentBtn;
            //改變isDown的值會(huì)自動(dòng)變化背景圖
            segmentBtn.isDown = YES;
            self.selectedIndex = segmentBtn.targetIndex;
        }
    }
    /**創(chuàng)建按鈕**/
}

布局代碼

-(void)layoutSubviews{
    
    [super layoutSubviews];
    
    segmentHeight = self.frame.size.height;
    
    segmentWidth = 0;
    
    CGPoint lastBtnPos = CGPointMake(0, 0);
    for (NSInteger index = 0; index < segmentBtnArray.count; index++){
        CGSize size = CGSizeZero;
        BaseButton *button = segmentBtnArray[index];
        
        /**根據(jù)適應(yīng)模式調(diào)整按鈕寬度以及位置**/
        if(self.btnWidth>0){
            size.width = self.btnWidth;
        }else if(self.btnWidthFitMode == ViewFitMode){
            size.width = self.frame.size.width/segmentBtnArray.count;
        }else if(self.btnWidthFitMode == FontFitMode){
            //獲取文字自適應(yīng)Size
            size = [button.titleLabel FitWithToFontWithFontSize:16];
            size = CGSizeMake(size.width+10, size.height);
        }
        segmentWidth +=size.width;
        [button setFrameWithOrigin:lastBtnPos andSize:CGSizeMake(size.width, segmentHeight)];
        lastBtnPos = CGPointMake(lastBtnPos.x+size.width, lastBtnPos.y);
        /**根據(jù)適應(yīng)模式調(diào)整按鈕寬度以及位置**/

    }
    CGSize contentSize = CGSizeMake(segmentWidth, segmentHeight);
    if(contentSize.width>self.frame.size.width){
        self.contentSize = contentSize;
    }else{
        self.contentSize = self.frame.size;
    }
}

??難點(diǎn)還是按鈕布局的邏輯,不過也不是太難,只要累加按鈕的width就能計(jì)算出按鈕的正確位置。
??介紹到這里吧,具體可以下載demo查看,如有錯(cuò)漏請指正,謝謝
??gitHub地址:ScrollButtonDemo1

*郵箱:289193866@qq.com

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • *7月8日上午 N:Block :跟一個(gè)函數(shù)塊差不多,會(huì)對里面所有的內(nèi)容的引用計(jì)數(shù)+1,想要解決就用__block...
    炙冰閱讀 2,711評論 1 14
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,725評論 25 709
  • (牛什粉)午間肚空空,吃碗牛什湯。米線長又滑,牛什是三星。湯底藥膳濃,天寒正進(jìn)補(bǔ)。粉熱慢品嘗,冬寒滋補(bǔ)重。
    甘朝武閱讀 295評論 0 0
  • 無數(shù)次相信謊言 無數(shù)次編織夢幻 游離在愛與恨的邊緣,靜默中展開 那些死亡的情愛 冷漠的空氣里彌漫花香 一種充滿腐爛...
    馮玙哲閱讀 318評論 0 3
  • 如果人生是一所大學(xué),那么我們需要學(xué)習(xí)各種課程。 找工作,戀愛,賺錢等等,是很多人必修的課程。英語,寫作,健身,投資...
    銀河星海閱讀 847評論 3 4

友情鏈接更多精彩內(nèi)容