[置顶] iOS新闻客户端开发教程6-二级栏目导航条

今天我们来介绍iOS新闻App的二级栏目导航条的开发。

二级栏目

在我们的新闻Tab页里，分别有头条，娱乐，体育，财经，科技等等不同类别的新闻，我们是使用一个二级栏目条来展示不同类别的新闻。

1.服务器json接口

// column.json
{
    "result":"ok",
    "data":[
                {
                "id":"1",
                "name":"头条"
                },
                {
                "id":"2",
                "name":"娱乐"
                },
                {
                "id":"3",
                "name":"体育"
                },
                {
                "id":"4",
                "name":"财经"
                },
                {
                "id":"5",
                "name":"科技"
                },
                {
                "id":"6",
                "name":"军事"
                }
            ]
}

2.新闻栏目Model

在Model下，新建栏目模型ColumnInfo

//ColumnInfo.h
#import "BaseInfo.h"

@interface ColumnInfo : BaseInfo

@end

//ColumnInfo.m
#import "ColumnInfo.h"

@implementation ColumnInfo

@end

3.请求接口数据并封装成Model

在ViewModel下新建请求栏目接口的类GetColumn

//GetColumn.h
#import "BaseOperation.h"

@interface GetColumn : BaseOperation

@end

//GetColumn.m
#import "GetColumn.h"
#import "ColumnInfo.h"
@implementation GetColumn
-(void) parseSuccess:(NSDictionary *)dict jsonString:(NSString *)jsonString
{
    NSArray *infos = [ColumnInfo arrayFromDict:dict];
    [_delegate opSuccess:infos];
}
@end

4.栏目布局Widget

在ViewController-Widget下，新建ColumnBarWidget

//ColumnBarWidget.h
#import "BaseWidget.h"
#import "ButtonHelper.h"

@protocol ColumnBarDelegate;
@interface ColumnBarWidget : BaseWidget {
    IBOutlet UIScrollView   *_scrollView;
    ButtonHelper          *_btnHelper;
}

@property(nonatomic, assign) NSInteger      pageIndex;
@property(nonatomic, assign) id<ColumnBarDelegate> delegate;

@end


@protocol ColumnBarDelegate <NSObject>

- (void)didSelect:(NSInteger)pageIndex;

@end

//ColumnBarWidget.m
#import "ColumnBarWidget.h"
#import "GetColumn.h"
#import "ColumnInfo.h"
@implementation ColumnBarWidget

- (void)viewDidLoad
{
    _btnHelper = [[ButtonHelper alloc] init];
    self.listData = [NSMutableArray array];

    [super viewDidLoad];
}

- (BOOL)isReloadLocalData
{
    return [super isReloadLocalData];
}

- (void)requestServer
{
    [self requestServerOp];
}

- (void)requestServerOp
{
    NSDictionary *dictInfo = @{@"url":ColumnURL,
                               @"body":@"1"
                               };

    _operation = [[GetColumn alloc] initWithDelegate:self opInfo:dictInfo];
    [_operation executeOp];
}

- (void)opSuccess:(NSMutableArray *)data
{
    [super opSuccess:data];
    self.listData = data;
    [self updateUI];
}

- (void)updateUI
{
    [self addColumnBar];
    self.pageIndex = 0;
}


- (void)addColumnBar
{
    // 先删除再添加
    for (UIView *view in _scrollView.subviews) {
        [view removeFromSuperview];
    }

    NSInteger index = 0;
    CGFloat origin_x = 0;
    CGFloat insets = 18.0f;
    UIEdgeInsets buttonInsets = UIEdgeInsetsMake(0.0f, insets, 0.0f, insets);
    CGSize titleSize = CGSizeZero;
    UIButton *button = nil;
    ColumnInfo *info = nil;

    _scrollView.contentInset = buttonInsets;

    for(index=0; index<self.listData.count; index++) {

        info = [self.listData objectAtIndex:index];

        button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.tag = index+1;
        [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
        [button setTitle:info.name forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

        titleSize = [info.name sizeWithFont:button.titleLabel.font];
        button.frame = CGRectMake(origin_x, 0.0f, titleSize.width+20.0f, 36);
        origin_x += titleSize.width + 3.0f + 20.0f;

        [_scrollView addSubview:button];
    }

    _scrollView.contentSize = CGSizeMake(origin_x, 36);
}

- (void)buttonClicked:(UIButton *)sender
{
    _pageIndex = sender.tag -1;

    [self setColumnTabCenter:sender.frame];
    [_btnHelper setButton:sender
              normalColor:[UIColor blackColor]
            selectedColor:[UIColor redColor]];

    [self.delegate didSelect:_pageIndex];
}

- (void)didSelect:(NSInteger)pageIndex
{

}

- (void)setPageIndex:(NSInteger)pageIndex
{
    _pageIndex = pageIndex;

    UIButton *sender = ((UIButton *)[_scrollView.subviews objectAtIndex:pageIndex]);
    [self buttonClicked:sender];
}

- (void)setColumnTabCenter:(CGRect)frame {

    CGFloat xOffer = frame.origin.x - _scrollView.contentOffset.x - 320/2;
    xOffer = _scrollView.contentOffset.x+xOffer+frame.size.width/2;

    if (xOffer < 18)
        xOffer = -18;
    else if (xOffer + 320 > _scrollView.contentSize.width)
        xOffer = _scrollView.contentSize.width - 320+18;

    if (xOffer <= 0)
        xOffer = -18;

    [_scrollView setContentOffset:CGPointMake(xOffer, 0) animated:YES];
}

@end

5.栏目UI
在InterfaceBuilder下新建栏目布局ColumnBarWidget.xib，如下图

设置File’s owner为ColumnBarWidget

打开Show the Connections inspector，按住鼠标拖拽连线。ScrollView –> _scrollView

View –> view

6.展示

新建新闻视图NewsPage.xib，如下图

修改NewController代码

//NewsController.h
#import "BaseController.h"
#import "ColumnBarWidget.h"
@interface NewsController : BaseController{

    IBOutlet UIView *_backBarView;
    ColumnBarWidget *_barWidget;
}

@end

//NewsController.m
#import "NewsController.h"

@implementation NewsController

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    if (_barWidget == nil) {
        [self addBarWidget];
    }
}

- (void)addBarWidget
{
    _barWidget = [[ColumnBarWidget alloc] init];

    _barWidget.delegate = self;
    _barWidget.view.frame = _backBarView.bounds;
    [_backBarView addSubview:_barWidget.view];

    [_backBarView sendSubviewToBack:_barWidget.view];
}

7.运行效果

github源码：https://github.com/tangthis/NewsReader
个人技术分享微信公众号，欢迎关注一起交流