定制UITableviewCell实现类似微博的分组效果

转自:http://www.cocoachina.com/newbie/tutorial/2012/0511/4244.html

最早学习定制UITableViewCell的时候,被各种半吊子的教程折磨的不轻,也没一个能运行的代码,只能自己捉摸,现在有空了,准备总结一下,主要是为了演示整个自定义UITableViewCell的过程,后面会给源文件。当然了,也要有个努力的目标:微博的个人资料的关注,微博,粉丝,话题那个小分组框。

第一步创建一个工程,我用是的”Master-Detail Application”,然后去了根本不用东东,显的更简洁。

原始代码下载。


准备完了,开始:

1.“New File”,选中“Objective-C class”,下一步

定制UITableviewCell实现类似微博的分组效果_第1张图片


2.填写上文件名,这里是SinaTableCell,然后下一步

定制UITableviewCell实现类似微博的分组效果_第2张图片


3.直接“Create”就好了,没啥好说的

定制UITableviewCell实现类似微博的分组效果_第3张图片


这样的话,我们就得了实现文件

定制UITableviewCell实现类似微博的分组效果_第4张图片


可是对于我来说,我还是倾向于使用ib画界面。接下来咱们再创建一个xib文件。

1.同样“New File”

定制UITableviewCell实现类似微博的分组效果_第5张图片


2.“User Interface”->“Empty”->“Next”

定制UITableviewCell实现类似微博的分组效果_第6张图片


3.Device Family保持默认,“Next”

定制UITableviewCell实现类似微博的分组效果_第7张图片


4.只在的文件名,和类文件一致,用“SinaTableCell”就好了。“Creat”

定制UITableviewCell实现类似微博的分组效果_第8张图片


这样我就把.h,.m,.xib三个文件凑起了。

定制UITableviewCell实现类似微博的分组效果_第9张图片


把.h,.m和.xib文件连接起来.
选中xib文件,在里添加一个Table View Cell控件

定制UITableviewCell实现类似微博的分组效果_第10张图片


选中新添加的Table View Cell,在属性里指定Class为:SinaTableCell

定制UITableviewCell实现类似微博的分组效果_第11张图片


指定TableViewCell的Identifier

定制UITableviewCell实现类似微博的分组效果_第12张图片


创建4个141×41的button,(不要问我咋创建),并指定背景图片

定制UITableviewCell实现类似微博的分组效果_第13张图片


这样xib操作就完事儿了。

MasterViewController.m里的主要实现

  
  
  
  
  1. #import "SinaTableCell.h"
  2. #pragma mark - Table View
  3. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
  4. return 1;
  5. }
  6. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
  7. return 1;
  8. }
  9. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
  10. return 85;
  11. }
  12. // Customize the appearance of table view cells.
  13. - (UITableViewCell *)tableView:(UITableView *)tableView
  14. cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  15. static NSString *_customIdentifier = @"SinaTableCell";
  16. SinaTableCell *cell=(SinaTableCell *)[tableView dequeueReusableCellWithIdentifier:_customIdentifier];
  17. if (cell==nil) {
  18. NSArray *_nib=[[NSBundle mainBundle] loadNibNamed:@"SinaTableCell"
  19. owner:self
  20. options:nil];
  21. cell = [_nib objectAtIndex:0];
  22. cell.selectionStyle = UITableViewCellSelectionStyleNone;
  23. }
  24. return cell;
  25. }


看一下运行结果,

定制UITableviewCell实现类似微博的分组效果_第14张图片


与微博里的分组看着差不多就可以了,说明自定义成功!

定制UITableviewCell实现类似微博的分组效果_第15张图片

你可能感兴趣的:(File,table,application,Class,button,interface)