【QQ聊天界面、拖拽界面、实现数据源方法 Objective-C语言】

一、那么，接下来，我们就先把控件给它拖一下，

1.打开Main.storyboard，

里面现在是不是有一个3.5英寸的控制器，

然后，看一下我们这个示例程序，上面整体是一个UITableView，

下面留出来，一条，44的高度，放一个UIView，

由两部分组成，

所以说，我们大体上，要放两个控件，

拽两个控件，

2.要拽，两个控件，

哪个是UITableView，这个吧，

现在是不是填满整个屏幕了，

但是，我是不是要让它，距离下边，有44的高度啊，

注意，整个高度是480，我希望它下边留出44来，就把它高度变成多少，

高度变成480 - 44 = 436，吧

然后呢，下边，是不是再给它放一个UIView，啊，

这就是一个UIView，

这就是一个UIView，把它放上来，

这个UIView，距离左边，x = 0，距离上边，y = 436，

是不是就是刚好贴住这个边儿，

宽度呢，就是整个屏幕宽度，320，高度呢，就是44，

为了让大家能看的清楚，给下面这个View，加个背景色，黄色，

这样的话，是不是就可以看到了，

好，下面我们运行，看一下，下面这个黄色UIView，能不能显示出来，

是没有问题的，

那么，接下来，我们就开始，先把数据加载起来，先把下面这个界面拖好吧，

二、拖控件，

1.看一下示例程序，我们下面这个界面，是不是

下面这个界面，是不是首先，下边这个

1）UIView，有一个背景吧，

2）下边是一个背景、一个按钮

3）一个文本框

4）一个按钮

5）又一个按钮

三个按钮，一个文本框，和一个背景，

好，那么接下来，我们就设置一下它的背景，

注意，我们下边这个背景，不是背景颜色，这是一个背景图，

下边这个UIView，不是背景颜色，是个背景图，

但是，我们观察，这个UIView，它有一个背景图这个属性，有一个backgroundImage属性吗，

有一个backgroundImage属性吗，

没有这个backgroundImage属性吧，

所以说，目前我们怎么实现，让它有一个设置背景图呢，

解决办法就是，让这个UIView，中，拖一个UIImageView，

然后，设置UIImageView，的，图片，为那个灰色背景，

然后呢，让这个UIImageView，填满整个UIView，然后，看起来，UIView，就有一张背景图了，

我们现在就先这么实现，

那么，你会说，任何一个控件，不是都是继承自UIView吗，

既然任何一个控件，都是继承自UIView，UIView就是容器，

也就是说，任何一个控件，都可以作为一个容器，那么，下面，我根本就不需要这个UIView，直接拽一个UIImageView，进来，

设置UIImageView的图片，是一个灰色图片，

然后，把UIImageView设成这么大，

接下来，直接向UIImageView，里面，增加子控件，不也行吗，

这样不就少用一个控件啊，

因为任何一个控件，都可以作为容器啊，

UIImageView，也可以作为容器，

但是，现在我们为什么还非得拖一个UIView呢，

因为，如果你这里直接拖拽一个UIImageView，过来的话，你是没法把一个按钮，再拖拽到UIImageView里面的，

storyBoard是没法实现这个功能的，

但是通过我们代码，是可以吧，

但是，我们通过代码，排列起来，就麻烦了吧，

所以，这里我们直接给它拽一个UIView，里面再放一个UIImageView，大家后面学了一些绘图的时候，可以直接通过绘图的方式，把这个图片画到UIView上面去，

就不需要UIImageView了，

但是，现在，我们就给它拽一个UIImageView，在里面设置图片，

哪个是图片框，是不是这个小椰子，

把它拖到UIView里面，

OK，这样的话，是不是有这个图片框了，图片框大小，刚好是等于底部的UIView的大小，

然后，我设置图片框的图片，image = 什么，

我们这里等于chat_bottom_bg

这就是我们下面这个UIImageView里面，放这张图片，

然后呢，因为UIImageView填满整个UIView，所以，看起来，像背景一样，

接下来，向里面拖一些子控件，三个按钮，一个文本框，

这个按钮，第一个按钮，是不是要显示这个发声音的这个按钮啊，

发声音的这个按钮，所以说，我们选中这个按钮，

设置它的图片，注意，我们这个时候，设置按钮的背景图，还是image，

image，对。设置image，更合适，你设个背景图，给它看一下，

设个背景图，比如说，来个voice_nor（normal）

在正常情况下的，是显示这张图片，

大家看了吗，是不是拉伸了，我把Button这几个字删掉，

拉伸了，

设置背景的话，这个背景，会随着我们这个图片大小，给它拉伸，

我为了不让它拉伸，所以我把这个给它删掉，

我不设置背景图，我设置这个image，

设置image时候，这个按钮大小，会跟随图片大小而变化，

是不是一点儿都没有拉伸啊，

所以，为了简单，我就设置image，不设置这个Background，设置这个image属性，

设置完毕以后，我把这个按钮大小，设置成我们的，因为下面这一条儿，是不是高是44，我就把这个按钮的大小，把它高和宽，都设置成44，

注意看，本来这个按钮是34，

但是，我把它变成44，以后，你看会不会拉伸，

是不是也没有拉伸，始终居中显示，这就是我们这个image的一个好处，

既然它高和宽都是44，是不是正方形的啊，我让它距离左边是0，距离上边是0，这样刚好就居中显示了，

这是一个按钮，

2.然后，是不是再给它拽两个按钮，把这个按钮复制两个，就OK了，

选中这个按钮，按住option键，

然后，开始拖……

拖这儿一个，然后再往回，再拖一个，

差不多了，

这样的话，这三个按钮是不是都有了，

接下来，我就选中这个按钮，给它改另外一个图片，

第二个按钮，是什么图片，

是表情smile吧，

哪个是smile，这个是smile吧，smile_nor，在正常状态下的smile图片，

普通情况下的smile，

再设置它高亮情况下的，

高亮情况下的，Highlighted，

是哪个，是smile_press，

这个也是，高亮情况下的，

这个按钮也是，高亮情况下的，

变成一个什么，voice_press，吧，

第三个是什么，是不是加号，

第三个，默认情况下，是这个up_nor，

高亮状态下，是这个up_press，

这样的话，下面这三个按钮，有了，

接下来，再拽一个文本框，

在拽一个文本框，

OK，把它拖宽一点儿，

OK，这样是不是就OK了，

OK，这样是不是就OK了，

这样的话，这就OK了，

好，接下来，我们运行一下，看看能不能看到这个效果，

这样是不是看到这个效果了，

4.那么，接下来，再注意看一下，按理说，下面这一块儿内容，是不是已经做完了，但是我这里还得修改一下，修改什么呢，我给这个文本框，要给它设一个背景图，

现在这个效果是不是挺好的啊，

其实，如果你只兼容iOS7、iOS8的话，这样就OK了，但是，有时候，这里只是为了给大家说一下这个问题，其实大家以后做的时候，不需要这么做，因为以后你们做的时候，不需要兼容iOS6，

有人说，你做这个程序，不是兼容的越多越好吗，不是兼容的越多越好，

至少对于苹果来说，不是兼容的越多越好，为什么，如果你兼容的越多越好的话，那你兼容吧，从iOS2、iOS3、iOS4、iOS5、iOS6、iOS7、iOS8，所有的版本，你都得兼容啊，

但是，苹果它也知道，这么做，是不是累死了，

四个月，咱们还想做开发呢，所以兼容，累死了，所以说，对于苹果来说，只要兼容一两个版本，

现在最新的是，iOS7、iOS8吧，你只需要兼容iOS7、iOS8，就OK了，

只需要兼容这两个版本，就OK了，

有人说，为什么不兼容一下iOS6，兼容一下iOS6，会怎么样，

第一，你兼容一下iOS6，是不是得工作量变大了吧，

工作量变大了，

第二，兼容iOS6，没有意义，主要不是用的人少，你可以想一下，用iOS6的，都是什么人，要么就是那种穷的买不起新手机的人，这样的人，连手机都不舍得换，你做应用，他可能为你的应用花钱吗，

既然不可能，那么你还有必要为他去工作吗，

但是，我得说一下，虽然我们这里，不需要兼容iOS6，但是我得说一下，因为在iOS6下，这个文本框，和iOS7下，长的是不是，完全不一样吧，iOS6，是不是金属风格的，就是长的是不一样的，

所以说，这一情况下，为了在iOS6、iOS7、iOS8下，看起来，文本框，长的都一模一样，

怎么解决呢，首先，把文本框这个边框，给它去掉，

让文本框没有边框，然后，设置文本框的背景图，设置文本框的背景图，就OK了，

这个背景图，你就可以做一个和这个iOS7下这个文本框，长的一模一样的一张图片，看起来就像文本框一样，

但是，它是一张图片，这样的话，因为是图片，所以说，在任何系统下显示，是不是都是一样的，

所以说，如果文本框，在不同系统下，长的有可能有很大变化的话，

这个时候，你就把文本框，默认的样子去掉，把它的边框，设为None，

没有默认的样子了，然后，给它设个背景图，

这个背景图，就是一张图片，这个背景图，就是文本框的一个图片，

OK，来，看一下怎么解决，

1）首先，选中文本框，

2）然后，把它这个，注意，这个Border Style，

注意，这个Border Style，边框样式，

圆角边框（最右边那个），

方形边框（从右边数第二个），

这个也是方形边框（从右边数第三个）

我们点这个，让它没有边框，（最左边那个）

注意看，有边框是这样，没有边框，是这样，

你能看到文本框吗，

看不到，但是有吧，有文本框，但是我希望这个文本框，我没有边框，用户看不到了，但是，我给它一个背景图，这个背景图，就是一个文本框的样子，来，找一下我这个素材里面，

来，看一下，看到这个图片了吗，

这个图片，是不是长的就是文本框的样子，

所以说，我们只要给它设置这个图片，设置背景是这个背景，就OK了，

这样的话，看起来，它长得还是那个文本框的样子，

但是早就换成图片了吧，

是不是这样，看起来，就是一个文本框了吧，

运行一下，

看起来，是不是和刚才一样的，但是这个，早就变成图片了吧，

现在我们下面这个效果也有了，上面这个也有了，接下来，我们要做的，是不是就是把上面那个，给它显示出来，

二、首先，我们要显示数据，是不是要给这个UITableView，设置数据源对象啊，

1.设置数据源对象

右键、dataSource、拖到这个控制器上，

然后呢，这个delegate，拖到这个控制器上，

现在这个控制器，是不是就是我们当前的这个tableView的代理和数据源，

但是我们发现，这个UITableView，变的这么小了，

是不是我刚才拖了半天，拖的啊，怎么办，

宽，宽度变成多少，X是0，Y是0，宽度是320，高度是436，

这样是不是好了，

好了，现在这个UITableView的数据源对象，代理对象，设置好了，

既然你当前，这个控制器，要作为我的代理对象，数据源对象，

所以说，怎样，对，遵守我们的协议吧，

好，那么接下来，我们这两个都好了，

都好了以后，我们要怎么样，实现数据源方法吧，

2.实现数据源方法，

数据源方法，

数据源方法，是不是那三个啊，

1）第一个，返回都少组，

numberOfSectionsInTableView：（UITableView *）tableView，

我们现在，整体上，我们看，是不是就是1组数据，

整体上，就是1组数据，

所以说，这里返回几，返回1吧，

- （NSInteger）numberOfSectionsInTableView：（UITableView *）tableView{

return 1;

}

返回1，当然，你默认不实现，是不是也是1组，

2）第二个，返回每组多少行，

每组多少行，返回值类型是NSInteger，

- （NSInteger）tableView

是不是就是我们的，numberOfRowsInSection，

在这个地方，怎么办呢，直接return，一个什么，

当前，所有的这个

self.messageFrames，

当前，所有的这个messageFrame模型里面，是不是有个count，吧，

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

return self.messageFrames.count;

}

返回里面所有的count，

这是我们这个东西，

3）第三个，返回每个单元格，

它的返回值类型，什么类型，- （UITableViewCell *）

- （UITableViewCell *）tableView cellForRowAtIndexPath：（NSIndexPath *）indexPath{

}

就这么一个方法，

OK，在这个方法里面，无论里面有多复杂，肯定是几步，四步吧，

1）//1.获取模型数据

2）//2.创建单元格

3）//3.把模型设置给单元格对象

4）//4.返回单元格

是不是无非就这么几步，

那么，根据当前的这个第几组、第几行，获取模型数据，这个怎么获取，

CZMessageFrame *modelFrame =

CZMessageFrame *modelFrame = self.messageFrames[indexPath.row];

self.messageFrames[indexPath.row]，是不是根据我们indexPath.row，是不是拿到我们第几个模型，

2）创建单元格

我们还是，先写那个创建系统单元格，怎么创建，

static NSString *ID = @“message_cell”;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

if(cell == nil){

cell = [UITableViewCell cellWithStyle:UITableViewCellStyleDefault withIdentifier:ID];

}

如果，我们这里是用系统单元格的话，

怎么写，首先是一个

static NSString *ID = @“message_cell”;

首先是一个，可重用的ID，

然后，接下来，是什么，

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

如果要是缓存池中没有的话，怎么办，

if（cell == nil）{

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault withIdentifier:ID];

}

如果要是缓存池中没有的话，我们就怎么办，创建一个吧，

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault withIdentifier:ID];

那么，这就是，刚才这几步，是不是就是我们可重用Cell的时候的一个创建步骤啊，

然后，接下来，我们这里要做的就是

3）让我们这个自定义的cell，让这个cell里面，应该有一个叫做messageFrame的属性，

cell.messageFrame = modelFrame;

messageFrame这么一个属性，把我们的这个modelFrame，设置给它，

cell.messageFrame = modelFrame;

4）返回单元格

return cell；

但是，我们的问题，就是，这里这个cell，我们如果要是这么写的话，

用的是系统的cell吧，这个系统的cell，是不是显然不够用，

所以说，这个时候，我们需要自己去写一个类，继承自这个系统的cell，然后，重写一下initWithStyle方法，

在这个方法当中，是不是一开始的时候，就创建好了当前这个

单元格中的这三个子控件啊，

time、icon、text，和这个正文吧，

把这三个子控件创建好，

然后给它设置数据，设置frame，

设置好数据，frame，以后，接下来，我们再执行这个代码，是不是就能显示出来了，

那么，大家知道我接下来要干什么了吗，

是不是写一个类，继承自这个UITableViewCell，自定义一个tableViewCell啊，

这就是我们接下来要做的东西，就是这么一个东西，那么，大家先休息一下吧，