【iOS开发-65】QQ聊天界面案例:自定义cell、图片拉伸处理、NSNotification通知、键盘与视图移动以及输入框左边缩进处理

(1)案例

(2)源代码于素材下载

http://pan.baidu.com/s/1bnpiBCz

(3)总结

——还是代码封装。控制器、视图、模型分别独立。里面还有很多代码可以独立出来整一个类。

——如果某一个值只有特定的几个数字,那么可以用枚举来定义,注意命名规范

typedef enum{
    WPMessageTypeMe=0,
    WPMessageTypeOther=1
}WPMessageType;

——依然是计算一段文字所占据的宽和高

CGSize textMaxSize=CGSizeMake(200, MAXFLOAT);
    NSDictionary *[email protected]{NSFontAttributeName:[UIFont systemFontOfSize:14]};
    CGSize textSize=[message.text boundingRectWithSize:textMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attr1 context:nil].size;

——按钮的内边距,即把文字向内压缩。这里面textView是UIButton类。

textView.titleEdgeInsets=UIEdgeInsetsMake(20, 20, 20, 20);

——把一张小的图片做背景保持四周不变,拉伸中间,则用如下属性。UIEdgeInsets是拉伸的区域,一般取最中间的一个点。

        UIImage *meBgNor=[UIImage imageNamed:@"chat_send_nor"];
        UIEdgeInsets edge1=UIEdgeInsetsMake(28, 32, 28, 32);
        meBgNor=[meBgNor resizableImageWithCapInsets:edge1 resizingMode:UIImageResizingModeStretch];
        [self.textView setBackgroundImage:meBgNor forState:UIControlStateNormal];

——去除cell的选中背景,以及去除cell之间的分割线

    //去除选中背景
    self.tableView.allowsSelection=NO;
    //去除分割线
    self.tableView.separatorStyle=UITableViewCellSeparatorStyleNone;

——输入框左边利用一个UIView设置留出一个空白

    self.textView.leftView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 8, 0)];
    self.textView.leftViewMode=UITextFieldViewModeAlways;

——通知的重要性,键盘的出现隐藏是系统的通知,系统会自动发送通知,我们需要增加一个通知监听者就是控制器本身,所以这里self。

[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(changeFrame:) name:UIKeyboardDidChangeFrameNotification object:nil];

——与此同时,增加一个通知监听的同时,在dealloc中销毁。

-(void)dealloc{
    [[NSNotificationCenter defaultCenter]removeObserver:self];
}

——我们利用上述通知自带的信息,获取到键盘的移动位置,然后移动其他需要移动的控件。这里面通知的userInfo里面有很多信息,是一个字典。

——获取屏幕信息,用UIScreen mainScreen,如果是bounds,则可得到宽高。

——动画用UIView 的animateWith……

-(void)changeFrame:(NSNotification *)note{
    self.view.superview.backgroundColor=[UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:0.9];
    CGFloat duration=[note.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
    CGFloat keyboardY=[note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].origin.y;
    CGFloat screenH=[UIScreen mainScreen].bounds.size.height;
    [UIView animateWithDuration:duration animations:^{
        self.view.transform=CGAffineTransformMakeTranslation(0, keyboardY-screenH);
    }];
}

——隐藏键盘就是视图结束编辑。这个scrollView的代理方法tableView直接继承过来,可以直接用。

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    [self.view endEditing:YES];
}

——利用当前新数据与模型最后一个数据进行比较,如果相同,则隐藏这个控件。

WPMessageFrame *lastMsgFrame=[muArray lastObject];
            if (msg.time==lastMsgFrame.message.time) {
                msg.hideTime=YES;
            }
if (message.hideTime==NO) {
        CGFloat timeX=0;
        CGFloat timeY=padding;
        CGFloat timeW=screenW;
        CGFloat timeH=40;
        _timeF=CGRectMake(timeX, timeY, timeW, timeH);
    }

——当按下键盘发送键时,可以使用textFieldDelegate的方法:获取文本框进行处理,这里直接创建了新的模型,并加入新的数目模型中,刷新tableView。

-(BOOL)textFieldShouldReturn:(UITextField *)textField{
}

——把tableView滚动到最下面,直接使用scrollView的代理方法。

NSIndexPath *indexPath=[NSIndexPath indexPathForRow:self.msgFrames.count-1 inSection:0];
    [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];

——这里可以设置tableView的背景,也可以设置cell的背景。也可以设置window的背景,用view.window或者view.superView可以调出window。

——输入框可以去除边框,然后用背景填充,以保证在iOS6和iOS7的使用中APP风格一致

——returnKey可以设置成send(发送),默认是return(回车),还可以设置成其他选项。

——这里的布局主要由两块,上面是tableView,下面是一个UIView上面放了很多控件。这里面在storyBoard中不能直接往UIImageView中添加其他控件,只有在代码中实现。所以此处是用一个UIView,然后把UIImageView、UIButton和UITextField等添加进来。

——cell初始化的时候,往cell里面添加控件是添加在cell的contentView中的。

谨记,对于不同高度的自定义cell,需要两个模型,一个是数据模型,一个是frame模型,因为frame模型包含了数据模型,所以在初始化cell的视图中,只要拥有一个frame成员属性即可。

时间: 2024-10-22 07:49:12

【iOS开发-65】QQ聊天界面案例:自定义cell、图片拉伸处理、NSNotification通知、键盘与视图移动以及输入框左边缩进处理的相关文章

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中

iOS开发UI基础—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

ios开发UI基础-使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中) 进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片) 3.提供2个模型 数据模型:

Objective-c——UI基础开发第八天(QQ聊天界面)

一.知识点: QQ聊天界面 双模型的使用(dataModel和frameModel) UITextField的使用 通知的使用 拉伸图片的两种方法(slicing/image对象的resizeableImageWithCapInsets属性) 枚举 方法的抽取(相同的拿出,不同的部分作为参数) 二.设置tableview的基本格式 1)定义tableview基本 numberOfSectionsInTableView:设置块 numberOfRowsInSection:设置每块对应的行数 cel

亲身体验用Java写的仿qq聊天界面

Java开发工具有许多种,新手用记事本写Java程序,有些人用NetBean,jbuilder,高手用eclipse,下面介绍用eclipse开发qq聊天界面. 代码如下: package Myjava_QQ; import java.awt.*; import javax.swing.*; import Myjava_QQ.truess; import java.awt.event.*; import java.applet.*; import java.io.BufferedReader;

iOS开发之微信聊天页面实现

在上篇博客(iOS开发之微信聊天工具栏的封装)中对微信聊天页面下方的工具栏进行了封装,本篇博客中就使用之前封装的工具栏来进行聊天页面的编写.在聊天页面中主要用到了TableView的知识,还有如何在俩天中显示我们发送的表情,具体请参考之前的博客:IOS开发之显示微博表情,在这儿就不做赘述啦.在聊天页面用到了三对,六种Cell,不过cell的复杂度要比之前的新浪微博(IOS开发之新浪围脖)简单的多.废话少说吧,还是先来几张效果图,在给出实现代码吧. 聊天界面的效果图如下:在下面的聊天界面中中用到了

简单模仿QQ聊天界面

首先看一下最终的效果,显示了消息时间,用户昵称,用户头像. 大致实现方法: 用最简单的ListView显示消息内容. 不同的用户使用不同的消息布局文件,例子有2个用户"Tony","Hill". 代码文件清单: 主布局文件activity_main.xml: 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools=&

iOS开发-微博客户端-基本界面搭建(01)

1>创建程序载入界面 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { //1>创建窗口 self.window = [[UIWindowalloc] initWithFrame:[UIScreenmainScreen].bounds]; //2>设置窗口的根控制器 UITabBarController *tabBar

【3】QQ 聊天界面

1.说明 稍微修改了下QQ示例里面的聊天界面界面,然后把代码扣过来完成了QQ聊天界面部分,效果还可以. 2.代码部分 // QQTalk.h文件 #ifndef __QQ_TALK_H__ #define __QQ_TALK_H__ #include <DuiLib/DuiLibEnv.h> #include <DuiLib/UIlib.h> using namespace DuiLib; #define QQ_TALK_XML _T("chatbox.xml"

QQ聊天界面的输入法顶起界面底部输入框效果的实现

转载请注明:http://www.cnblogs.com/frank-zouxu/p/4127115.html 今天在公司做项目的时候遇到一个需求:需要做一个界面,效果类似QQ聊天界面,如图1,当我们点击内容输入框准备输入内容的时候,底部的表情框的那一栏会被输入法的软键盘给顶起来,默认状态下,输入法会覆盖掉我们的表情输入框.起初,百思不得解的我费尽了心思,未果,偶然看到此篇博客http://blog.csdn.net/twoicewoo/article/details/7384398.其实,欲达