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
個人技術分享微信公衆號，歡迎關注一起交流