模仿新聞客戶端的分類滾動視圖

#import "ViewController.h"


#define kScreenWidth [[UIScreen mainScreen] bounds].size.width
#define kScreenHeight [[UIScreen mainScreen] bounds].size.height
#define kTopHeight 44
#define kBtnWidth 60

@interface ViewController ()<UIScrollViewDelegate,UITableViewDataSource>
{
    NSArray *_typeArr;
    UIScrollView *_topScrollView; //類別滾動視圖
    UIScrollView *_contentScrollView; //內容滾動視圖
}

@end

@implementation ViewController



- (void)viewDidLoad {
    [super viewDidLoad];
    _typeArr = @[@"熱點",@"專題",@"慢病",@"養生",@"生活",@"心理",@"美容",@"母嬰",@"兩性",@"其餘"];
    //對類別滾動視圖進行初始化的相關設置
    _topScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, kTopHeight)];
    _topScrollView.showsHorizontalScrollIndicator = NO;
    _topScrollView.showsVerticalScrollIndicator = NO;
    [self.view addSubview:_topScrollView];
    //對內容滾動視圖進行初始化的相關設置
    _contentScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_topScrollView.frame), kScreenWidth, kScreenHeight-CGRectGetMaxY(_topScrollView.frame))];
    _contentScrollView.showsHorizontalScrollIndicator = NO;
    _contentScrollView.showsVerticalScrollIndicator = NO;
    _contentScrollView.pagingEnabled = YES;
    _contentScrollView.delegate = self;
    [self.view addSubview:_contentScrollView];
    //建立類別、內容滾動視圖
    [self createTopScrollView];
    [self createContentScrollView];
    
}

-(void)createTopScrollView
{
    //根據類別數組的個數建立相應個數的button，默認（i＝0）的button是選中狀態
    for (int i=0; i<_typeArr.count; i++) {
        UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(kBtnWidth*i, 0, kBtnWidth, kTopHeight)];
        button.tag = 1000+i;
        [button setTitle:_typeArr[i] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
        [button addTarget:self action:@selector(itemClick:) forControlEvents:UIControlEventTouchUpInside];
        if (i==0) {
            button.selected = YES;
        }
        
        [_topScrollView addSubview:button];
    }//建立分割線
    UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_topScrollView.frame)-1, kScreenWidth, 1)];
    lineView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:lineView];
    //設置類別滾動視圖的內容大小
    _topScrollView.contentSize = CGSizeMake(kBtnWidth*_typeArr.count, 0);
    [self itemClick:_topScrollView.subviews[0]];
    
}

-(void)createContentScrollView
{//根據類別數組建立相應個數的內容視圖（這裏用的是TableView）
    for (int i=0; i<_typeArr.count; i++) {
        UITableView *tabView = [[UITableView alloc] initWithFrame:CGRectMake(kScreenWidth*i, 0, _contentScrollView.frame.size.width, _contentScrollView.frame.size.height) style:UITableViewStylePlain];
        tabView.dataSource = self;
        tabView.tag = 2000+i;
        tabView.showsVerticalScrollIndicator = NO;
        [_contentScrollView addSubview:tabView];
    }
    
    _contentScrollView.contentSize = CGSizeMake(kScreenWidth*_typeArr.count, 0);
}

//按鈕點擊後的響應事件
-(void)itemClick:(UIButton *)button
{
    NSInteger index = button.tag-1000;
    for (UIButton *btn in _topScrollView.subviews) {
        btn.selected = NO;
        btn.titleLabel.font = [UIFont systemFontOfSize:15];
        if (btn == button) {
            btn.selected = YES;
            btn.titleLabel.font = [UIFont systemFontOfSize:18];
        }
    }//設置被點擊的按鈕在可視範圍內，通常在正中間；點擊按鈕後顯示相對應的內容視圖
    float offsetX = 0;
    float currentX = kBtnWidth*index;
    if (currentX>kScreenWidth/2) {
        offsetX = currentX<_topScrollView.contentSize.width-kScreenWidth/2 ? currentX-kScreenWidth/2+kBtnWidth/2:_topScrollView.contentSize.width-kScreenWidth;
    }
    [_topScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
    _contentScrollView.contentOffset = CGPointMake(kScreenWidth*index, 0);
    
}
//內容視圖滾動後，相應的類別按鈕變成選中狀態，其餘的爲未選中狀態（保證按鈕在可視範圍內）
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    if (scrollView == _contentScrollView) {
        NSInteger index = _contentScrollView.contentOffset.x/kScreenWidth;
        [self itemClick:_topScrollView.subviews[index]];
    }
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CELL"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"CELL"];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"%ld",tableView.tag-2000];
    return cell;
    
}

@end

 效果圖：

              

 

Demo下載連接：https://github.com/huahua0809/XHNewsScrollView