β

基于iCarousel构建新闻头条

Balloonsys Inc. 260 阅读

市面上大部分新闻客户端的布局,都是顶部放一个可以左右滑动的头条,下方是新闻列表。像网易新闻的头条部分,通常是新闻与广告穿插。因为近期正在开发类似的一个APP,现总结头条部分的构建步骤。

技术选型

去code4app.com上搜索ScrollView相关的代码,会找到一些类似的代码示例,比如这个EScrollView。如果是本着学习的出发点,借鉴其思路并酌情修改其代码以满足自身项目需求,也不是难事。但如果要用在商业项目里,并期望获得足够的灵活性可能还需花费很多精力。

经过一番Google,在Github里找到了iCarousel这个控件,其示例代码中含不少例子,不过大部分例子的效果都是CoverFlow风格。但其中的Paging Example给了我灵感,把iCarousel View的高度设小一点,再额外加个page control及text label不就刚好么?欣喜之余,快速打开该示例的代码仔细阅读。

下面详细介绍如何基于iCarousel构建新闻头条。

iCarousel简介

定制iCarousel视图

拖一个UIView到View Controller的顶部,大小为320X190,类名设置为iCarousel,连接到一个名为headlinesView的Outlet。

在viewDidLoad中调用如下方法,

- (void)setupHeadlinesView
{
    self.headlinesView.type = iCarouselTypeLinear;
    self.headlinesView.pagingEnabled = YES;
    self.headlinesView.dataSource = self;
    self.headlinesView.delegate = self;
}

此处关键的一个属性便是pagingEnabled,设置后刚好符合期望的效果。

为iCarousel提供数据

iCarousel采用类似于table view的设计方式,提供了不少datasource及delegate方法。

下面这个方法告诉iCarousel共有几个cell item,

- (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
    return kCoundOfHeadlineNews;
}

当需要加载某个cell view时,会调用viewForItemAtIndex,我们需在该方法里确保用于显示新闻头条图片的imageView被构建并设置相应地image。

- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view
{
    UIImageView *headlineImageView = nil;

    // Create new view if no view is available for recycling
    if (view == nil) {
        view = [[UIView alloc] initWithFrame:self.headlinesView.bounds];
        headlineImageView = [[UIImageView alloc] initWithFrame:view.bounds];
        [headlineImageView setImage:[UIImage imageNamed:@"Headline_Placehold"]];
        headlineImageView.tag = kHeadlineImageViewTag;
        [view addSubview:headlineImageView];
    }
    else {
        headlineImageView = (UIImageView *)[view viewWithTag:kHeadlineImageViewTag];
    }

    // Load image for headline news
    if (index < self.headlineNews.count) {
        [headlineImageView setImageWithURL:[NSURL URLWithString:[self.headlineNews[index] img]]];
    }

    return view;
}

上面代码中的headlineNews是一个数组,用来存从远程服务器获得的头条新闻(Model)列表,其中img属性(头条新闻的字段)为对应图片的URL。当加载cell view时headlineNews可能还没有数据,所以上述代码做了个判断,即if (index < self.headlineNews.count)。

当远端数据加载完毕,我们可以调用[self.headlinesView reloadData]以更新界面。

另外,往Image View设置远程图片,可以用SDWebImage提供的方法setImageWithURL,该框架可以有效的管理图片的缓存。

定制iCarousel的行为

当头条新闻滑到最后一页时,通常需要能够回到第一页。iCarousel提供了一个delegate方法以定制该控件的属性。

- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value
{
    switch (option) {
        case iCarouselOptionWrap:
            return YES;
        default:
            return value;
    }
}

点击某一个cell view时,需要展示新闻详情页面。跳转的逻辑可以放在carousel:didSelectItemAtIndex:中。

添加新闻标题

标题(Label)与当前页指示控件(page control)并不属于iCarousel的cell view,因为整个滑动过程中只有一个Label和一个Page Control。所以我们可以在Storyboard中拖放相应控件作为iCarousel的子视图,再设置属性即可。

当滑动后,到达新页面时,可以在carouselCurrentItemIndexDidChange:中设置Label及Current Page。

作者:Balloonsys Inc.
原文地址:基于iCarousel构建新闻头条, 感谢原作者分享。

发表评论