纯代码实现QQ聊天界面---TableView使用详解

纯代码实现QQ聊天界面---TableView使用详解

今天模仿QQ的聊天界面写了一个消息界面,希望对学习UITableView的同学可以有帮助

首先上一张所有工程文件的图

上面的左边图片是全部工程文件,其中所有素材图片是从QQ界面截出来的,保证原版QQ界面.

上面的图片是运行起来的聊天界面,是使用QQ的匿名聊天的头像.

开始写代码之前我们分析一下整个界面的布局,界面上面是一个TableView的界面,在最下面的输入框是个单独的view,上面添加了三个按钮和一个TextField.这是整个界面布局的大框架.

整个工程实现起来最复杂的地方就是每个消息界面,即TableView的每个单元格的内容.仔细想想单元格的将组成可以猜到,单元格是由头像的ImageView和背景图片的ImageView以及一个显示消息的Lable组成,背景泡泡图片在最里面一层,外面的头像和消息根据发送者和接受者不同有不同的左右排布.上一张爆炸图

搞明白这个界面排布后我们开始上代码

1.首先是APPDelegate里的内容,新建一个视图控制器和导航控制器,并把导航控制器作为window的根视图

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    ChatListViewController *chatListVC = [[ChatListViewController alloc] init];
    UINavigationController *navi = [[UINavigationController alloc] initWithRootViewController:chatListVC];
    self.window.rootViewController = navi;
    [chatListVC release];
    [navi release];
    return YES;
}

2.接下来新建一个视图控制器,里面的三个属性就是上面的消息显示界面tableview和下面的输入框界面bottombar,和tableview的datasource

@interface ChatListViewController ()<UITextFieldDelegate,UITableViewDataSource,UITableViewDelegate>

@property(nonatomic, retain)NSMutableArray *datasource;//数据源
@property(nonatomic, retain)UITableView *tableView;//显示消息界面
@property(nonatomic, retain)UIImageView *bottomBar;//发送文本的工具条

@end

@implementation ChatListViewController

- (void)dealloc
{
    [_bottomBar release];
    [_datasource release];
    [_tableView release];
    [super dealloc];
}
-(UIImageView *)bottomBar
{
    if (!_bottomBar) {
        self.bottomBar = [[[UIImageView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.tableView.bounds), CGRectGetWidth(self.tableView.bounds), 44)] autorelease];
        //打开用户交互
        _bottomBar.userInteractionEnabled = YES;
        _bottomBar.image = [UIImage imageNamed:@"chat_bottom_bg"];
        //添加子视图
        //添加voice按钮
        UIButton *voiceButton = [self buttonWithFrame:CGRectMake(5, 5, 34, 34) imageName:@"chat_bottom_voice_nor" highLightedImageName:@"chat_bottom_voice_press"];
        [_bottomBar addSubview:voiceButton];
        //添加moreinformation按钮
        UIButton *a