IOS TableView组件一：组件创建和数据源方法

TableView是UIKit中的特殊的视图，通常用来进行列表数据的展示。

使用

基本的创建

创建好工程后，删除工程自带的storyborad参考：
https://www.jianshu.com/p/e9932dac2829
先来到AppDelegate.m中把window创建出来：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [self setWindow:[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]];
    [self.window makeKeyAndVisible];
    return YES;

要想创建我们自己的tableview，它本身是一个视图，接下来可以通过一个视图控制器，来进行tableview的呈现和展示。
先在工程的根目录下，新建一个类，继承自UIViewController:


创建好后，进入AppDelegate.m中，引入FirstTableViewController.h的头文件，然后把window的rootViewController设置成FirstTableViewController的示例化对象。
先运行一下，看程序到这一步有没有问题，发现呈现的视图一片漆黑，继续往下做。

#import "AppDelegate.h"
#import "FirstTableViewController.h"
@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [self setWindow:[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]];
    [self.window makeKeyAndVisible];
    [self.window setRootViewController:[[FirstTableViewController alloc]init]];
    return YES;
}

进入FirstTableViewController.m文件中，先在viewDidLOad中设置背景颜色，然后创建自己的Tableview.用alloc initWithFrame这样的方法，去完成tableview的创建。在frame中使用，self.view.bounds来进行全屏样式的展示。要想把它呈现在界面之上，要addSubview,但写到这步还不能呈现出相应的效果。.

#import "FirstTableViewController.h"

@interface FirstTableViewController ()

@end

@implementation FirstTableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor whiteColor]];
    UITableView *tableView=[[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
    [self.view addSubview:tableView];
    // Do any additional setup after loading the view.
}

TableView的类采用了代理设计模式，系统提供了相应的协议去使用，通过实现其中的方法，就可以通知到tableview去展示什么数据，要呈现什么效果。

#import "FirstTableViewController.h"

@interface FirstTableViewController ()<UITableViewDelegate,UITableViewDataSource>

@end

@implementation FirstTableViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor whiteColor]];
    UITableView *tableView=[[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
    tableView.dataSource=self;
    tableView.delegate=self;
    [self.view addSubview:tableView];
    // Do any additional setup after loading the view.
}

数据源方法：
1，2方法必须实现，如果不实现，程序会导致奔溃。
1.设置当前section下面有多少个行数据。而这些section就是tableview分的组，也就是tableview本身是可以进行分组样式展示的，如果不指定有多少组，系统会默认是1组。

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
     return 5；
}

2.返回cell对象
得到5行空白的cell，可以上下滚动的。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell=[[UITableViewCell alloc]init];
    return cell;
}

可以简单的添加一个题目。
只完成了一个cell的创建，为什么5行都会采用这样的样式呢？
行数是5，所以会多次调用下面的方法。textLable和imageView是cell自带的。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell=[[UITableViewCell alloc]init];
    cell.textLabel.text=@"Text";
    cell.imageView.image=[UIImage imageNamed:@"1.jpg"];
    return cell;
}

实际开发中会完成一个复杂的界面展示效果。cell本身也是继承自UIView的，所以也是一个视图。所以就可以通过addSubView添加一系列子视图，比如添加一个文本输入框，UITextField，设置一个圆角矩形，让它更清楚一些。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell=[[UITableViewCell alloc]init];
    cell.textLabel.text=@"Text";
    cell.imageView.image=[UIImage imageNamed:@"1.jpg"];
    UITextField *textView=[[UITextField alloc]initWithFrame:CGRectMake(0, 0, 150, 40)];
    textView.borderStyle=UITextBorderStyleRoundedRect;
    [cell addSubview:textView];
    return cell;
}

输入框会把之前的覆盖掉，

不要作这种无用的视图的重叠，所以把上面的代码暂时的注释掉。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell=[[UITableViewCell alloc]init];
   // cell.textLabel.text=@"Text";
   // cell.imageView.image=[UIImage imageNamed:@"1.jpg"];
    UITextField *textView=[[UITextField alloc]initWithFrame:CGRectMake(0, 0, 150, 40)];
    textView.borderStyle=UITextBorderStyleRoundedRect;
    [cell addSubview:textView];
    return cell;
}

通过点击也会发现，cell会提供一个选中的效果。

这样一个简单的TableView就创建出来了。

tableView分组

配置组的个数：

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 4;
}

现在已经成功分成了4组，每一组都会有5行数据：

分组间都有一个空白，这不是一个简单的间距，section都有一个头部视图和尾部视图，下面的头部视图和上面那个的尾部视图，相接了。

通过头部视图和尾部视图可以给用户做一些信息的提供

设置头部样式

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
    return @"Header";
}

group 和plain样式的区别

group ：

plain：

可以发现，间距的字体都发生的变化。因为plain样式没有设置头部或尾部样式的话，就不会给他分配空白。而且，最大的差别，plain样式如果滑动到顶端，header会有一个滞留效果，而group没有。

源代码：稍后传