IOS UIScrollView + UIButton 實現頁面和頂部標籤頁水平滾動效果

標籤：

　　很長一段時間沒有寫部落格了，最近在學習iOS開發，看了不少的代碼，自己用UIScrollView和UIButton實現了水平滾動的效果，有點類似於今日頭條的主介面架構，效果如下：

代碼如下：

MyScrollView.h

#import <UIKit/UIKit.h>#import "MySegementView.h"@interface MyScrollView : UIView<UIScrollViewDelegate>- (instancetype) initWithFrame:(CGRect)frame titleArray:(NSArray *)titleArray viewArray:(NSArray *)viewArray;//滾動頁面@property (strong, nonatomic)UIScrollView *myScrollView;//頂部標籤按鈕滾動視圖@property (strong, nonatomic)MySegementView *mySegementView;@end

MyScrollView.m

#define SCROLLVIEW_WIDTH [UIScreen mainScreen].bounds.size.width#define SCROLLVIEW_HEIGTH self.bounds.size.height#define SEGEMENT_HEIGTHT 44#import "MyScrollView.h"@implementation MyScrollView/*// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect {    // Drawing code}*/- (instancetype) initWithFrame:(CGRect)frame titleArray:(NSArray *)titleArray viewArray:(NSArray *)viewArray{    self = [super initWithFrame:frame];    if (_mySegementView == nil) {        _mySegementView = [[MySegementView alloc] initWithFrame:CGRectMake(0, 0, SCROLLVIEW_WIDTH, SEGEMENT_HEIGTHT) titleArray:titleArray block:^void(int index){  //用block實現回調，頂部按鈕點擊的時候滾動到指定位置            [_myScrollView setContentOffset:CGPointMake((index - 1) * SCROLLVIEW_WIDTH, 0)];        }];    }    [self addSubview:_mySegementView];    [self addSubview:self.myScrollView];        if (self) {        for (int i = 0; i < viewArray.count; i++) {            UIViewController *viewController = viewArray[i];            viewController.view.frame = CGRectMake(i * SCROLLVIEW_WIDTH, 0, SCROLLVIEW_WIDTH, self.myScrollView.frame.size.height);            [self.myScrollView addSubview:viewController.view];        }        self.myScrollView.contentSize = CGSizeMake(viewArray.count * SCROLLVIEW_WIDTH, 0);    }        return self;}// 滾動整頁模式懶載入- (UIScrollView *)myScrollView{    if (_myScrollView == nil) {        _myScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, _mySegementView.frame.size.height, SCROLLVIEW_WIDTH, SCROLLVIEW_HEIGTH - _mySegementView.frame.size.height)];        _myScrollView.backgroundColor = [UIColor clearColor];        _myScrollView.delegate = self;        _myScrollView.showsVerticalScrollIndicator = NO;        _myScrollView.showsHorizontalScrollIndicator = NO;        _myScrollView.bounces = NO;        _myScrollView.scrollsToTop = NO;        _myScrollView.pagingEnabled = YES;            }    return _myScrollView;}//滾動結束，更新按鈕下方線條-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{    if (scrollView==_myScrollView)    {        int p=_myScrollView.contentOffset.x / SCROLLVIEW_WIDTH;        [_mySegementView setPageIndex:p + 1];    }}@end

MySegementView.h

#import <UIKit/UIKit.h>typedef void (^btnClickedBlock)(int index);@interface MySegementView : UIView<UIScrollViewDelegate>{    int nPageIndex;    int titleCount;    UIButton *currentBtn;    NSMutableArray *btnArray;}- (void)setPageIndex:(int)nIndex;- (instancetype) initWithFrame:(CGRect)frame titleArray : (NSArray *)titleArray block : (btnClickedBlock) clickedBlock;@property (nonatomic, copy) btnClickedBlock block;@property (strong, nonatomic) UIScrollView *segementScrollView;@property (strong, nonatomic) UIView *selectedLine;@end

MySegementView.m

#import "MySegementView.h"#define SEGEMENT_BTN_WIDTH 48@implementation MySegementView/*// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect {    // Drawing code}*/- (instancetype) initWithFrame:(CGRect)frame titleArray : (NSArray *)titleArray block : (btnClickedBlock) clickedBlock{    self = [super initWithFrame:frame];    [self addSubview:self.segementScrollView];    if (self) {        [self setBackgroundColor:[UIColor colorWithRed:0x2d/255.0 green:0x2a/255.0 blue:0x2b/255.0 alpha:1]];        self.block = clickedBlock;        nPageIndex = 1;        titleCount = titleArray.count;        btnArray = [NSMutableArray array];        for (int i = 0; i < titleCount; i++) {            UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(i * SEGEMENT_BTN_WIDTH, 0, SEGEMENT_BTN_WIDTH, 42)];            [btn setTitle:titleArray[i] forState:UIControlStateNormal];            btn.titleLabel.font = [UIFont fontWithName:@"Arial" size:14];            [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];            btn.tag = i + 1;            [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchDown];            [self.segementScrollView addSubview:btn];            [btnArray addObject:btn];        }        self.selectedLine.frame = CGRectMake(0, 42, SEGEMENT_BTN_WIDTH, 2);        [self.segementScrollView addSubview: self.selectedLine];        self.segementScrollView.contentSize = CGSizeMake(titleCount * SEGEMENT_BTN_WIDTH, 0);    }    return self;}//懶載入- (UIScrollView *)segementScrollView{    if (_segementScrollView == nil) {        CGRect rect = self.frame;        _segementScrollView = [[UIScrollView alloc] initWithFrame:rect];        _segementScrollView.showsHorizontalScrollIndicator = NO;        _segementScrollView.showsVerticalScrollIndicator = NO;        _segementScrollView.bounces = NO;        _segementScrollView.pagingEnabled = NO;        _segementScrollView.delegate = self;        _segementScrollView.scrollsToTop = NO;    }    return _segementScrollView;}//懶載入- (UIView *)selectedLine{    if (_selectedLine == nil) {        _selectedLine = [[UIView alloc] init];        _selectedLine.backgroundColor = [UIColor redColor];    }    return _selectedLine;}//設定當前頁面，並更新頂部標籤頁- (void)setPageIndex:(int)nIndex{    if (nIndex != nPageIndex) {        nPageIndex = nIndex;        [self refreshSegement];    }}- (void)refreshSegement{    //找到當前選中頁面對應的頂部按鈕    for (UIButton *btn in btnArray) {        if (btn.tag == nPageIndex) {            currentBtn = btn;        }    }        //如果選中頁面對應按鈕超出可視範圍，頂部滾動視圖滾動    int x = currentBtn.frame.origin.x;     if (currentBtn.frame.origin.x + SEGEMENT_BTN_WIDTH > self.frame.size.width + self.segementScrollView.contentOffset.x) {     [self.segementScrollView setContentOffset:CGPointMake(self.segementScrollView.contentOffset.x + SEGEMENT_BTN_WIDTH, 0) animated:YES];     }     else if (currentBtn.frame.origin.x < self.segementScrollView.contentOffset.x)     {     [self.segementScrollView setContentOffset:CGPointMake(currentBtn.frame.origin.x, 0) animated:YES];     }    //下方選中標記線條滾動效果    [UIView animateWithDuration:0.2 animations:^{    _selectedLine.frame = CGRectMake(currentBtn.frame.origin.x, self.frame.size.height - 2, SEGEMENT_BTN_WIDTH, 2);    }completion:^(BOOL finished) {            }];}- (void)btnClick:(UIButton*)btn{    currentBtn = btn;    if (nPageIndex != btn.tag) {        nPageIndex = btn.tag;        [self refreshSegement];        self.block(nPageIndex);    }}@end

使用方法：

- (void)viewDidLoad {    [super viewDidLoad];        NSMutableArray *array=[NSMutableArray array];//顯示的標籤頁    for (int i = 0; i < 12; i++) {            MyViewController1 *viewController1 = [[MyViewController1 alloc] initWithIndex:i + 1];//initWithIndex : 自訂的構造方法，用於顯示頁面編號            [array addObject:viewController1];//滾動視圖列表    }    myScrollView = [[MyScrollView alloc] initWithFrame:self.view.frame titleArray:@[@"第1頁",@"第2頁",@"第3頁",@"第4頁",@"第5頁",@"第6頁",@"第7頁",@"第8頁",@"第9頁",@"第10頁",@"第11頁",@"第12頁"] viewArray:array];        [self.view addSubview:myScrollView];    // Do any additional setup after loading the view, typically from a nib.}

源碼下載連結：http://download.csdn.net/detail/lzm2625347497/9562677

IOS UIScrollView + UIButton 實現頁面和頂部標籤頁水平滾動效果