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

原创 2015年11月20日 09:07:35

今天我们来介绍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
个人技术分享微信公众号,欢迎关注一起交流
个人技术微信公众号

版权声明:本文为博主原创文章,未经博主允许不得转载。

分步介绍如何实现精美的带二级栏目的导航栏.

许多企业门户网站几乎都有导航栏,各种风格,看起来很炫,这里将接一下如何用CSS+DOM操作实现一个精美的导航栏,数据在HTML中展示,这里采用无序列表标签进行数据展示. 代码如下: html> ...
  • he90227
  • he90227
  • 2015年05月11日 13:33
  • 1669

phpcms导航栏调用二级栏目

{pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"} 首页 {loop $d...
  • t145gaom
  • t145gaom
  • 2014年10月14日 14:38
  • 8867

thinkphp调用二级栏目(二级分类) 函数+模板 完整代码

thinkphp调用二级栏目(二级分类) 函数+模板+控制器 完整代码送上 可能很多人在以thinkphp框架开发自己的cms 等程序中, 对于2级分类2级栏目提出了很多问题,因为我也在找这个问题...
  • qq_33156633
  • qq_33156633
  • 2016年11月25日 00:28
  • 1000

二级域名与二级栏目优劣对比

目前关于二级域名与二级栏目优缺点与对比在网上的讨论话题比较多,但很多朋友在讨论了很长时间之后,依然不知道到底二级域名与二级栏目哪个更加适合用来做SEO排名,今天我们结合个人的经验来谈一下,希望可以帮助...
  • u010433720
  • u010433720
  • 2013年08月15日 16:57
  • 689

phpcms 显示某一栏目的二级栏目

phpcms 显示某一栏目的二级栏目
  • sinat_35921156
  • sinat_35921156
  • 2017年02月19日 15:49
  • 699

DEDECMS之循环调用二级栏目下三级栏目

DEDECMS之循环调用二级栏目下三级栏目
  • netuser1937
  • netuser1937
  • 2017年01月10日 09:08
  • 952

dedecms 循环当前栏目下的二级栏目

更多内容请访问www.phptuku.com(PHP图库)
  • qq_31589453
  • qq_31589453
  • 2016年12月22日 21:36
  • 358

织梦dedecms调用一级、二级栏目方法

一般的栏目列表调用的是顶级栏目,代码如下: 栏目导航   {dede:channel type='top' }  {dede:field name='typename'/}      ...
  • a1079540945
  • a1079540945
  • 2014年06月03日 15:44
  • 14537

dedecms调用某一顶级栏目下二级标签

dedecms调用某一顶级栏目下二级标签,调用各个子栏目的推荐文章及详情,适用于子栏目布局不一的设计要求...
  • zy1281539626
  • zy1281539626
  • 2016年12月29日 12:45
  • 839

帝国CMS当前栏目或指定栏目调用子栏目

帝国CMS如何根据指定栏目调用子栏目,或者在当前栏目下调用子栏目,帝国CMS的这两种子栏目调用主要适用于做网站导航下拉菜单或者网站侧边栏树形菜单。 帝国CMS指定栏目调用子栏目      ...
  • cooldrw2012
  • cooldrw2012
  • 2016年11月18日 08:58
  • 4291
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS新闻客户端开发教程6-二级栏目导航条
举报原因:
原因补充:

(最多只允许输入30个字)