IT之家这个app不知道你有没有用过,卖下小广告吧,这个app挺不错的,可以看到很多关于数码类的资讯,值得你下载。 总结UITableView的学习,我是模仿了IT之家的一个页面,虽然细节方面做得不够好 ,但也算是可以的了。从布局都实现,感觉都还好 ,难度不大。主要是运用到了自定义cell,自定义headerView,UIScrollView等知识。

一、UITableView的简单介绍

(1)表视图(UITableView)的内容算是iOS界面控件学习的一个里程碑,因为表视图中有普通控件需要配置的属性,也有自定义控件的技巧,还有代理回调函数,甚至有其他控件鲜有的数据源模式。表视图的内容将会囊括所有常见的控件开发模式,在展示类似外观单一相同内容的大量数据时,表视图将会是最好的解决方案。

(2)表视图继承自UIScrollView,所以有着大多UIScrollView的操作特性,诸如手指控制内容的滚动,内容视图到顶端或者底端时的自动反弹等。但是UIScrollView的显示内容是事先配置好的,而表视图UITableView采用了数据源模式,展示的内容并非事先为控件配置好,而是控件显示在屏幕上时,每当需要具体数据用于展示,会当场询问作为数据源的对象进行索要,所以这个数据源对象往往是一个控制器,控制器中以成员变量的方式长期存放着一个用于提供具体数据的数据源,这个数据源只要开发者在取数据时自己能够搞得清楚明白,可以是任何Objective-c对象。不过考虑到表视图的列表特性,苹果推荐开发者使用NSArray或者它的子类来用作这个提供数据的“仓库”。

(3)当需要在界面上显示一张表视图时,表视图在整个显示过程中,工作流程如图所示(画的好辛苦的

),根据这个流程,进行数据源回调函数和代理回调函数的实现。

如上述步骤所示,UITableView在整个显示的过程中,自己并不保存数据,而是在需要时临时向自己的数据源对象进行请求。

ios tableview section 间隔问题 iosuitableview_表视图

(4)一般,我们都讲UITableView的数据源和代理对象都设置为同一个控制器对象,即viewController。

(5)关于UITableView的其他详细知识,可以参考http://www.cocoachina.com/ios/20140922/9710.html

二、“IT之家”例子的简单介绍

(1)我用了2个模型类,也就有2个plist文件。一个存放新闻的图片,标题,发表时间,评论数,另外一个存放图片轮播的图片和图片的标题。

ios tableview section 间隔问题 iosuitableview_数据源_02

ios tableview section 间隔问题 iosuitableview_数据源_03

(2)要使每行的cell显示我们想要的内容,当然离不开自定义的cell了。最左边的空位是留着手动代码添加一个ImageView的。上面的Label是显示新的标题,下面的小的 label是显示发表时间的,右边的文字和图片,代表着评论的人数。

ios tableview section 间隔问题 iosuitableview_控件_04

(3)UITableView的头部部分,当然少不了推荐资讯的轮播了。对于headerView的部分,我也是自定义了一个HeaderView,为了方便嘛。整个View上面盖着一个Scroll View,下面是一个Label,显示该图片的简介标题,右下角自然是显示图片以及随着图片页数更改而更改的PageControll了。当ScrollView滚到对应的图片时,下面的label就会显示该图片所对应的简介标题。

ios tableview section 间隔问题 iosuitableview_UITableView_05

(4)最后当然少不了storyboard部分了。感觉中规中矩吧,没什么特别的地方,因为都是参考”IT之家“这个app来做的。顶部红色部分是一个View,上面是6个button,因为它们都能被点击。底部部分,也是一个View,然后有4个按钮。最后的UITableView覆盖着整个View,也就是375 * 667。

ios tableview section 间隔问题 iosuitableview_数据源_06


三、部分代码及其说明

(1)为了性能的着想,所以在创建cell的时候,先在缓存区中查找有没有ID相同且可用的cell,若有,即可拿来重新赋值显示出来,若为nil,则从xib中创建一个cell,所以在自定义cell时,在xib文件中,一定设置cell的identifier,否则不能达到从缓存区中查找可用cell的目的。

/**
 *  从xib中加载自定义cell
 */
+ (instancetype)cellWithTableView:(UITableView *)tableView{
    static NSString *ID = @"it";
    KIMitCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell ==nil) {
        cell = [[[NSBundle mainBundle]loadNibNamed:@"KIMITCell" owner:nil options:nil]lastObject];
    }
    return cell;
}



(2)下面是UITableView的数据源方法了。当然,就要遵循数据源协议了(UITableViewDataSource)。在storyboard中 ,还要进行拖线,将UITableView的数据源拖线给控制器。

此外,因为这个例子中没有其他组,只有一组,所以可以不用实现- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;方法。

ios tableview section 间隔问题 iosuitableview_控件_07

#pragma mark -数据源方法
/**
 *  返回cell的行数
 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.its.count;
}

/**
 *  创建cell,并设置数据
 */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    // 1.创建cell
    KIMitCell *cell = [KIMitCell cellWithTableView:tableView];
    // 2.设置cell的数据
    cell.it = self.its[indexPath.row];
    
    return cell;
}



(3)关于headerView,即图片轮播的实现代码,可以参考我上一个博客。代码和原理都是一样的。有一些不同的就是当滚动时,会显示图片相对应的图片标题。这里,我把设置标题的代码放在了滚动到下一张图片的函数中进行。但这样还不行,因为当程序一运行的时候,你就会发现,第一张图片的标题出不来,要滚到第二张图片时,标题才会显示到label。因此,还要在- (void)awakeFromNib()方法中添加这句代码self.textLabel.text = ((KIMitPicture *)(self.picts[0])).title;即当第一张图片加载时,将第一张图片的标题添加到label中,相当于label默认的文本为第一张图片的标题吧。此外,self.picts[] 是模型数组。

/**
 *  下一张图片
 */
- (void)nextImage{
    // 1.增加页码
    long page = 0;
    if (self.pageControll.currentPage == KIMScrollerCount - 1) {
        page = 0;
    }else{
        page = self.pageControll.currentPage + 1;
    }
    // 2.计算滚动的位置
    CGFloat offsetX = page * self.scrollView.frame.size.width;
    CGPoint offset = CGPointMake(offsetX, 0);
    [self.scrollView setContentOffset:offset animated:YES];
    // 3.将图片所对应的标题描述显示到label中
    self.textLabel.text = ((KIMitPicture *)(self.picts[page])).title;
}



四、运行结果截图

ios tableview section 间隔问题 iosuitableview_UITableView_08

ios tableview section 间隔问题 iosuitableview_数据源_09


五、总结

这个界面做起来,还是相对比较简单的。因为视频学习中,老师都有演示类似的例子。比较遗憾的是,这个例子我并没有用到代理的方法,当然你们也可以用到代理的方法,比如我们点击其中一条新闻时,弹框显示等等。

做完这个还是小有成就感的,即使不难。


——爱分享,一起学,共成长。