ActionScript
TypeScript
JavaScript

四、实现图文混排-消息发送

发布时间:2017-02-13

上三节我们已经实现了聊天室界面的显示、点击 表情面板打开按钮 隐藏/显示UI表情界面、获取表情的图片类型以及设置聊天的文本样式。

本章节我们最后来看下如何发送消息,实现图文混排

在ChatView为聊天内容设置图片匹配

/** 获取匹配后的聊天内容 **/
  private function onGetChatInfo():String
  {
   //获取输入文本框(聊天单条内容)的文本内容
   var chatStr:String = chatInfo.text;
   var newChatStr:String = "";
   //为聊天内容进行图片匹配:全局搜索图片类型字符串,替换为img标签
   newChatStr += chatStr
    .replace(/@0@/g,"<img src='chat/face0.png' width='45px' height='45px'></img>")
    .replace(/@1@/g,"<img src='chat/face1.png' width='45px' height='45px'></img>")
    .replace(/@2@/g,"<img src='chat/face2.png' width='45px' height='45px'></img>")
    .replace(/@3@/g,"<img src='chat/face3.png' width='45px' height='45px'></img>")
    .replace(/@4@/g,"<img src='chat/face4.png' width='45px' height='45px'></img>")
    .replace(/@5@/g,"<img src='chat/face5.png' width='45px' height='45px'></img>")
    .replace(/@6@/g,"<img src='chat/face6.png' width='45px' height='45px'></img>")
    .replace(/@7@/g,"<img src='chat/face7.png' width='45px' height='45px'></img>")
    .replace(/@8@/g,"<img src='chat/face8.png' width='45px' height='45px'></img>")
    .replace(/@9@/g,"<img src='chat/face9.png' width='45px' height='45px'></img>")
    .replace(/@11@/g, "<img src='chat/face11.png' width='45px' height='45px'></img>")
    .replace(/@12@/g, "<img src='chat/face12.png' width='45px' height='45px'></img>")
    .replace(/@13@/g, "<img src='chat/face13.png' width='45px' height='45px'></img>")
    .replace(/@14@/g, "<img src='chat/face14.png' width='45px' height='45px'></img>")
    .replace(/@15@/g, "<img src='chat/face15.png' width='45px' height='45px'></img>")
    .replace(/@16@/g, "<img src='chat/face16.png' width='45px' height='45px'></img>")
    .replace(/@17@/g, "<img src='chat/face17.png' width='45px' height='45px'></img>")
    .replace(/@18@/g, "<img src='chat/face18.png' width='45px' height='45px'></img>")
    .replace(/@19@/g, "<img src='chat/face19.png' width='45px' height='45px'></img>")
    .replace(/@20@/g, "<img src='chat/face18.png' width='45px' height='45px'></img>");
   //返回匹配后的聊天内容
   return newChatStr;
  }

修改onSendText()方法,获取实际输入的图文信息。

private function onSendText():void 
  {
   //匹配表情后的字符串
   var chatStr:String = onGetChatInfo();
   //从对象池创建ChatLineUI的实例
   var chatLineUI:ChatLineUI = Pool.getItemByClass("chatLineUI",ChatLineUI);
   //将匹配过图片的字符串传惨给ChatLineUI类
   chatLineUI.init(chatStr);
   //添加聊天条目到panel
   chatPanel.addChild(chatLineUI);
 }

规则设置

文本内容内容超出最大上限后,将移除之前旧的内容,并进行重新排版

消息发送后,清空输入文本框的文本内容

Panel的滚动条滑块默认位于最下方,显示最后输入的聊天内容

首先设置存放UI容器的属性

 /**聊天内容条目UI存放容器 **/
  private var _chatLineArr:Array;
  /**聊天内容上限设置(默认最多15条) **/
  private var _chatLimitInt:int;
  /**聊天内容条目总高度 **/
  private var _chatMsgTotalHeight:Number;

初始化UI容器、设置Panel的属性

public function init():void 
  {
   _chatLineArr == null && (_chatLineArr = []);
   _chatLimitInt = 15;
   _chatMsgTotalHeight = 0;

   chatPanel.vScrollBarSkin = "";//滚动条隐藏
   chatPanel.vScrollBar.isVertical = true;//滚动条的方向为垂直滚动
   chatPanel.vScrollBar.elasticBackTime = 600;//设置橡皮筋回弹时间
   chatPanel.vScrollBar.elasticDistance = 200;//设置橡皮筋回弹距离
  }

然后在onSendMsgClick函数下实现以上提到的规则限制

  private function onSendText():void 
  {
   //匹配表情后的字符串
   var chatStr:String = onGetChatInfo();
   //从对象池创建ChatLineUI的实例
   var chatLineUI:ChatLineUI = Pool.getItemByClass("chatLineUI",ChatLineUI);
   //将匹配过图片的字符串传惨给ChatLineUI类
   chatLineUI.init(chatStr);
   //添加聊天条目到panel
   chatPanel.addChild(chatLineUI);
   //需要被销毁的聊天条目
   var deleteChatLineUI:ChatLineUI;
   //当聊天内容条目数超过做大上限,销毁最开始创建的条目
   if(_chatLineArr.length > _chatLimitInt)
   {
   
    deleteChatLineUI = _chatLineArr.shift();
    deleteChatLineUI.dispose();
    chatPanel.removeChild(chatPanel);
    Pool.recover("chatLineUI",deleteChatLineUI);
    onReChatLinePos();//重新针对聊天条目进行排版
   }
   //设置聊天单条内容的位置
   chatLineUI.y = _chatMsgTotalHeight;
   _chatLineArr.push(chatLineUI);
   //发送信息后,清空输入文本框
   chatInfo.text = "";
   //设置聊天内容的总高度
   _chatMsgTotalHeight += chatLineUI.height;
   //滚动条滑块永远位于最下方
   chatPanel.vScrollBar.max = chatPanel.contentHeight;
   chatPanel.vScrollBar.value = chatPanel.vScrollBar.max;
  }

重置UI的方法

/** 重置chatlineUI的所有位置 **/
private function onReChatLinePos():void
{
_chatMsgTotalHeight = 0;
var chatLineUI:ChatLineUI
for(var i:int = 0,sz:int = _chatLineArr.length;i<sz;i++)
{
chatLineUI = _chatLineArr[i] as ChatLineUI;
chatLineUI.y = _chatMsgTotalHeight;
_chatMsgTotalHeight += chatLineUI.height;
}
}

ChatView.as全部代码:

package view 
{
 import laya.events.Event;
 import laya.utils.Ease;
 import laya.utils.Handler;
 import laya.utils.Pool;
 import laya.utils.Tween;
 import ui.ChatUI;
 
 /**
  * ...
  * @author ssq
  */
 public class ChatView extends ChatUI 
 {
  //表情容器
  private var _ChatExpression:ChatExpressionView ;
  //表情窗口缓动的判断条件
  private var _isMove:Boolean = false;
  /**聊天内容条目UI存放容器 **/
  private var _chatLineArr:Array;
  /**聊天内容上限设置(默认最多15条) **/
  private var _chatLimitInt:int;
  /**聊天内容条目总高度 **/
  private var _chatMsgTotalHeight:Number;

  public function ChatView() 
  {
    this.init();
  }
  
  public function init():void 
  {
   //初始化UI容器、容器内容上限、容器高度
   _chatLineArr == null && (_chatLineArr = []);
   _chatLimitInt = 15;
   _chatMsgTotalHeight = 0;
   //初始化事件
   this.initEvent(); 
   
   chatPanel.vScrollBarSkin = "";//滚动条隐藏
   chatPanel.vScrollBar.isVertical = true;//滚动条的方向为垂直滚动
   chatPanel.vScrollBar.elasticBackTime = 600;//设置橡皮筋回弹时间
   chatPanel.vScrollBar.elasticDistance = 200;//设置橡皮筋回弹距离
   
   //从对象池创建表情UI面板
   _ChatExpression = Pool.getItemByClass("chatFaceResUI",ChatExpressionView);
            //初始化回调
   _ChatExpression.init(new Handler(this, onGetFaceType));
            //设置表情UI面板的位置
   _ChatExpression.pos(781,400);
   //表情UI面板添加到聊天室UI面板,当前类即为聊天室UI类
   this.addChild(_ChatExpression);
   //表情UI面板默认为不可访问状态
   _ChatExpression.visible = false;//隐藏显示
  }
  /**
   * 注册点击事件
   */
  private function initEvent():void 
  {
   //表情图标的点击
   selectClip.on(Event.CLICK, this, this.onSelectExpression) ;
   //发送按钮点击事件
   btn_send.on(Event.CLICK, this, this.onSendText);
  }
  
  private function onSendText():void 
  {
   //匹配表情后的字符串
   var chatStr:String = onGetChatInfo();
   //从对象池创建ChatLineUI的实例
   var chatLineUI:ChatLineUI = Pool.getItemByClass("chatLineUI",ChatLineUI);
   //将匹配过图片的字符串传惨给ChatLineUI类
   chatLineUI.init(chatStr);
   //添加聊天条目到panel
   chatPanel.addChild(chatLineUI);
   //需要被销毁的聊天条目
   var deleteChatLineUI:ChatLineUI;
   //当聊天内容条目数超过做大上限,销毁最开始创建的条目
   if(_chatLineArr.length > _chatLimitInt)
   {
    
    deleteChatLineUI = _chatLineArr.shift();
    deleteChatLineUI.dispose();
    chatPanel.removeChild(chatPanel);
    Pool.recover("chatLineUI",deleteChatLineUI);
    onReChatLinePos();//重新针对聊天条目进行排版
   }
   //设置聊天单条内容的位置
   chatLineUI.y = _chatMsgTotalHeight;
   _chatLineArr.push(chatLineUI);
   //发送信息后,清空输入文本框
   chatInfo.text = "";
   //设置聊天内容的总高度
   _chatMsgTotalHeight += chatLineUI.height;
   //滚动条滑块永远位于最下方
   chatPanel.vScrollBar.max = chatPanel.contentHeight;
   chatPanel.vScrollBar.value = chatPanel.vScrollBar.max;
  }
  
  /** 获取匹配后的聊天内容 **/
  private function onGetChatInfo():String
  {
   //获取输入文本框(聊天单条内容)的文本内容
   var chatStr:String = chatInfo.text;
   var newChatStr:String = "";
   //为聊天内容进行图片匹配:全局搜索图片类型字符串,替换为img标签
   newChatStr += chatStr
    .replace(/@0@/g,"<img src='chat/face0.png' width='45px' height='45px'></img>")
    .replace(/@1@/g,"<img src='chat/face1.png' width='45px' height='45px'></img>")
    .replace(/@2@/g,"<img src='chat/face2.png' width='45px' height='45px'></img>")
    .replace(/@3@/g,"<img src='chat/face3.png' width='45px' height='45px'></img>")
    .replace(/@4@/g,"<img src='chat/face4.png' width='45px' height='45px'></img>")
    .replace(/@5@/g,"<img src='chat/face5.png' width='45px' height='45px'></img>")
    .replace(/@6@/g,"<img src='chat/face6.png' width='45px' height='45px'></img>")
    .replace(/@7@/g,"<img src='chat/face7.png' width='45px' height='45px'></img>")
    .replace(/@8@/g,"<img src='chat/face8.png' width='45px' height='45px'></img>")
    .replace(/@9@/g,"<img src='chat/face9.png' width='45px' height='45px'></img>")
    .replace(/@11@/g, "<img src='chat/face11.png' width='45px' height='45px'></img>")
    .replace(/@12@/g, "<img src='chat/face12.png' width='45px' height='45px'></img>")
    .replace(/@13@/g, "<img src='chat/face13.png' width='45px' height='45px'></img>")
    .replace(/@14@/g, "<img src='chat/face14.png' width='45px' height='45px'></img>")
    .replace(/@15@/g, "<img src='chat/face15.png' width='45px' height='45px'></img>")
    .replace(/@16@/g, "<img src='chat/face16.png' width='45px' height='45px'></img>")
    .replace(/@17@/g, "<img src='chat/face17.png' width='45px' height='45px'></img>")
    .replace(/@18@/g, "<img src='chat/face18.png' width='45px' height='45px'></img>")
    .replace(/@19@/g, "<img src='chat/face19.png' width='45px' height='45px'></img>")
    .replace(/@20@/g, "<img src='chat/face18.png' width='45px' height='45px'></img>");
   //返回匹配后的聊天内容
   return newChatStr;
  }
  
  /** 重置chatlineUI的所有位置 **/
  private function onReChatLinePos():void
  {
   _chatMsgTotalHeight = 0;
   var chatLineUI:ChatLineUI
   for(var i:int = 0,sz:int = _chatLineArr.length;i<sz;i++)
   {
    chatLineUI = _chatLineArr[i] as ChatLineUI;
    chatLineUI.y = _chatMsgTotalHeight;
    _chatMsgTotalHeight += chatLineUI.height;
   }
  }
 
  /**
   * 隐藏和现实表情列表
   * @param e
   */
  private function onSelectExpression(e:Event):void 
  {
   //如果处于缓动状态,终止onSelectExpression方法
   if (_isMove)
    return;
    //点击表情面板打开按钮,触发缓动,则面板状态为运动中
    _isMove = true;
    //如果UI面板打开按钮的name为show,表示面板为打开状态,点击UI面板打开按钮,将其隐藏
    if (selectClip.name == "show"){
     selectClip.name = "hide" ;
     //设置缓动初始值alpha为1
     _ChatExpression.alpha = 1 ;
     //缓动:alpha从1开始,经过200毫秒缓动到0,即隐藏状态
     Tween.to(_ChatExpression, {alpha:0}, 200, Ease.backIn, Handler.create(this, this.onOpreateExpUI,[false]));
    }else{
     selectClip.name = "show";
     //设置缓动初始值alpha为0
     _ChatExpression.alpha = 0 ;
     //缓动:alpha从0开始,经过200毫秒缓动到1,即显示状态
     Tween.to(_ChatExpression, {alpha:1}, 200, Ease.backIn, Handler.create(this, this.onOpreateExpUI, [true]));
    }
   
  }
  /**
   * 缓动完成回调
   * @param type
   */
  private function onOpreateExpUI(type:Boolean):void 
  {
   //UI显示
   _ChatExpression.visible = type ;
   //缓动终止
   _isMove = false;
  }
  /**
   * 清除点击事件
   */
  private function removeEvent():void
  {
            //移除UI面板打开按钮的click事件
   selectClip.off(Event.CLICK, this, onSelectExpression);
   //移除发送消息按钮的click事件
   btn_send.off(Event.CLICK,this,onSendText);
  }
  /**
   * 点击图片设置文本框
   * @param type
   */
  private function onGetFaceType(type:String):void
  {
   //点击图片,将图片类型显示到输入文本框中
   chatInfo.text += type;
  }
  
 }

}

最终结果:


image.png