UITableView -- 实现类QQ主界面

开发环境:Xcode4.5.


UITableView 是iOS UI框架里应用非常广泛的一个控件,基于UITableView可以实现很多漂亮而又整洁的界面。本文介绍如何实现一个类QQ好友界面。


一、建立一个Single View Application工程,命名为QQUITableView.

1.从控件框里面拖一个UITableView控件到View上面。 Xcode从4.5开始支持Auto layout,在Objects区域里面可以看到多了一个Constraints对象,如果你的开发用手机iOS版本低于6.0的话,需要勾掉这个选项(Xcode File inspector里面可以看到Interface Builder Document, 去掉Use Autolayout前面的勾)。


二、为UITableView创建CustomCell

1.新建一个Objective-C class,命名为 CustomCell1。在设置向导里需要选择Subclass of 为 UITableViewCell.

2.创建相应的xib文件,命名为CustomCell1。

3.关联CustomCell1类。

选中CustomCell1.xib文件。然后在右边的Inspector区域选择Identity Inspector,在Custom Class下拉框里面选择刚才建立的CustomCell1类。

4.设置重用ID

在Attributes Inspector里面设置Identifier为CustomCellIdentifier1. 这个identifier是用于后面代码里引用该UITableViewCell的。

5.其他设置为默认。

6.在CustomCell1.h里面添加控件变量 :

@property (retain, nonatomic) IBOutlet UILabel *nickName;
@property (retain, nonatomic) IBOutlet UIImageView *profileIcon;
@property (retain, nonatomic) IBOutlet UITextView *signature;

添加方法为:双击CustomCell1.h文件会单独打开这个文件,然后右键点击控件拖动鼠标到CustomCell1.h。如下图所示:

UITableView -- 实现类QQ主界面_第1张图片

松开鼠标后,在弹出的对话框里选择IBOutlet, 输入相应的变量名。这一步建立了控件和代码之间的联系。后面会用到这些变量。

UITableView -- 实现类QQ主界面_第2张图片

三、双击另外打开ViewController.h,用上面同样的方法为View中的UITableView添加变量myTableView.

@property (retain, nonatomic) IBOutlet UITableView *myTableView;

并且,要让ViewController类实现<UITableViewDataSource,UITableViewDelegate> 这两个协议,即:

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>{ 
}


四、设置dataSource, delegate.如下图实。

     UITableView -- 实现类QQ主界面_第3张图片
界面准备工作已经做完,下面就是代码相关的逻辑实现了。


五、在ViewController.m文件中需要实现几个协议。

//每个section有多少行

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

//UITableView表里有多少个section

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

//section header的高度

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;

//section header的视图布局,重载这个函数可以定制自己想要的header界面。

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;

//控制cell的工作在这一函数里实现,包括cell的视图布局,accessory的显示等。参数indexPath指定了cell的具体位置,哪一个section, 哪一个row.

- (UITableViewCell *)tableView: (UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

//row 的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;


本文只用到上面几个协议函数,其他的协议函数根据不同的需求可以自己去再做深入研究。最终效果图如下:

           UITableView -- 实现类QQ主界面_第4张图片

六、代码下载:http://download.csdn.net/detail/lovefqing/4844317


若本文和代码有任何错误,欢迎拍砖指正!



你可能感兴趣的:(ios,ios,ios,UITableView)