iOS可複用控件之滾動按鈕組

GitHub地址：https://github.com/runThor/HTScrollButton

效果：

控件內部有一個ScrollView，按鈕都加在ScrollView上。

實現：

ScrollView類：

//  HTButtonScrollView.h

#import <UIKit/UIKit.h>

@interface HTButtonScrollView : UIScrollView

// 在ScrollView中配置按鈕
- (void)configButtons:(NSArray *)buttons;

@end

//  HTButtonScrollView.m

#import "HTButtonScrollView.h"

@interface HTButtonScrollView ()

@property (nonatomic, strong) NSMutableArray *buttonArr;  // 按鈕組

@end

@implementation HTButtonScrollView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.pagingEnabled = YES;  // 翻頁效果
        self.showsHorizontalScrollIndicator = NO;  
        self.buttonArr = [[NSMutableArray alloc] init];
    }
    
    return self;
}

// 配置按鈕
- (void)configButtons:(NSArray *)buttons {
    
    [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    
    [self.buttonArr removeAllObjects];
    
    if (buttons.count == 0) {
        return;
    }
    
    // 默認一頁5個按鈕
    NSInteger pageCount = (buttons.count - 1)/5 + 1;
    CGFloat eachWidth;
    
    if (buttons.count < 5) {
        eachWidth = self.frame.size.width/buttons.count;
        self.contentSize = CGSizeMake(self.frame.size.width, self.frame.size.height);
    } else if (buttons.count%5 == 0){
        eachWidth = self.frame.size.width/5;
        self.contentSize = CGSizeMake(self.frame.size.width * pageCount, self.frame.size.height);
    } else {
        eachWidth = self.frame.size.width/5;
        self.contentSize = CGSizeMake(self.frame.size.width * (pageCount - 1) + eachWidth * (buttons.count%5), self.frame.size.height);
    }
    
    for (int i = 0; i < buttons.count; i++) {
        CGFloat centerX = self.frame.size.width * (i/5) + i%5 * eachWidth + eachWidth/2;
        CGFloat centerY = self.frame.size.height/2;
        
        UIButton *btn = buttons[i];
        [btn setCenter:CGPointMake(centerX, centerY)];
        [self addSubview:btn];
    }
}



@end

ScrollButton類：

//  HTScrollButton.h

#import <UIKit/UIKit.h>

@interface HTScrollButton : UIView

// 配置按鈕組
- (void)configButtons:(NSArray *)buttons;

@end

//  HTScrollButton.m

#import "HTScrollButton.h"
#import "HTButtonScrollView.h"

@interface HTScrollButton ()<UIScrollViewDelegate>

@property (nonatomic, strong) HTButtonScrollView *scrollView;
@property (nonatomic, strong) UIButton *leftArrowBtn;  // 左箭頭
@property (nonatomic, strong) UIButton *rightArrowBtn;  // 右箭頭

@end

@implementation HTScrollButton

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.scrollView = [[HTButtonScrollView alloc] initWithFrame:CGRectMake(25, 0, self.bounds.size.width - 50, self.bounds.size.height)];
        self.scrollView.delegate = self;
        [self addSubview:self.scrollView];
        
        // 左箭頭
        self.leftArrowBtn = [[UIButton alloc] initWithFrame:CGRectMake(5, self.frame.size.height/2 - 7.5, 10, 15)];
        [self.leftArrowBtn setBackgroundImage:[UIImage imageNamed:@"leftArrow"] forState:UIControlStateNormal];
        [self.leftArrowBtn addTarget:self action:@selector(leftArrowBtnClicked:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.leftArrowBtn];
        self.leftArrowBtn.hidden = YES;
        
        // 右箭頭
        self.rightArrowBtn = [[UIButton alloc] initWithFrame:CGRectMake(self.frame.size.width - 15, self.frame.size.height/2 - 7.5, 10, 15)];
        [self.rightArrowBtn setBackgroundImage:[UIImage imageNamed:@"rightArrow"] forState:UIControlStateNormal];
        [self.rightArrowBtn addTarget:self action:@selector(rightArrowBtnClicked:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.rightArrowBtn];
        self.rightArrowBtn.hidden = YES;
    }
    
    return self;
}


// 配置按鈕組
- (void)configButtons:(NSArray *)buttons {
    if (buttons.count == 0) {
        return;
    } else if (buttons.count > 5) {
        // 如按鈕個數超過一頁，則顯示右箭頭
        self.rightArrowBtn.hidden = NO;
    }
    
    // 將按鈕組配置到ScrollView上
    [self.scrollView configButtons:buttons];
}

// 點擊左箭頭向左翻頁
- (void)leftArrowBtnClicked:(UIButton *)btn {
    if (self.scrollView.contentOffset.x < self.scrollView.frame.size.width) {
        [self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
    } else {
        [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentOffset.x - self.scrollView.frame.size.width, 0) animated:YES];
    }
}

// 點擊右箭頭向右翻頁
- (void)rightArrowBtnClicked:(UIButton *)btn {
    if ((self.scrollView.contentOffset.x + self.scrollView.frame.size.width) > (self.scrollView.contentSize.width - self.scrollView.frame.size.width)) {
        [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentSize.width - self.scrollView.frame.size.width, 0) animated:YES];
    } else {
        [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentOffset.x + self.scrollView.frame.size.width, 0) animated:YES];
    }
}


#pragma mark - UIScrollViewDelegate

// 點擊箭頭滾動完成後調用
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
    // 如滾動到最左側，隱藏左箭頭
    if (scrollView.contentOffset.x > 0) {
        self.leftArrowBtn.hidden = NO;
    } else {
        self.leftArrowBtn.hidden = YES;
    }
    
    // 如滾動到最右側，隱藏右箭頭
    if ((scrollView.contentSize.width - scrollView.frame.size.width) > scrollView.contentOffset.x) {
        self.rightArrowBtn.hidden = NO;
    } else {
        self.rightArrowBtn.hidden = YES;
    }
}

// 拖拽滾動完成後調用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    // 如滾動到最左側，隱藏左箭頭
    if (scrollView.contentOffset.x > 0) {
        self.leftArrowBtn.hidden = NO;
    } else {
        self.leftArrowBtn.hidden = YES;
    }
    
    // 如滾動到最右側，隱藏右箭頭
    if ((scrollView.contentSize.width - scrollView.frame.size.width) > scrollView.contentOffset.x) {
        self.rightArrowBtn.hidden = NO;
    } else {
        self.rightArrowBtn.hidden = YES;
    }
}


@end

使用：

//  ViewController.m

#import "ViewController.h"
#import "HTScrollButton.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    HTScrollButton *HTView = [[HTScrollButton alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 50)];
    [HTView setCenter:CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.height/2)];
    HTView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:HTView];
    
    NSMutableArray *buttonArr = [[NSMutableArray alloc] init];
    // 模擬按鈕組
    for (int i = 0; i < 13; i++) {
        UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
        [btn setTitle:[NSString stringWithFormat:@"%d", i + 1] forState:UIControlStateNormal];
        [btn setBackgroundColor:[UIColor colorWithRed:1/255.0 green:174/255.0 blue:202/255.0 alpha:1]];
        [buttonArr addObject:btn];
    }
    
    // 傳入按鈕組
    [HTView configButtons:buttonArr];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end