ActionScript
TypeScript
JavaScript

三、设置聊天单条内容文本样式

发布时间:2017-02-13

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

       本节设置聊天单条内容文本样式

创建聊天单条内容UI类:ChatLineUI.as   image.png逻辑代码如下:

package view 
{
 import laya.html.dom.HTMLDivElement;
 import laya.ui.Box;
 
 public class ChatLineUI extends Box
 {
  /** HTMLDivElement:可同时显示文字和图片,此处作为文本对象**/
  private var _textfiled:HTMLDivElement;
  public function ChatLineUI()
  {
  }
  /** data:输入文本框chatInfo的文本内容**/
  public function init(data:String):void
  {
   //初始化聊天单条内容的位置
   this.pos(0,0);
   //实例化HtmlDivElement,并添加到当前容器中
   if(_textfiled == null)
   {
    _textfiled = new HTMLDivElement();
    addChild(_textfiled);
   }
   //设置文本样式
   _textfiled.width = 945;//文本宽945
   _textfiled.style.color = "#c0c0c0";//文字颜色
   _textfiled.style.fontSize = 26;//文字大小
   _textfiled.style.valign = "middle";//文字垂直居中对其
   //设置html文本前缀,譬如  --- 小明说:
   var hostStr:String = "哈哈:";
   var pindaoStr:String = "【世界】"+ "" + hostStr;
   //设置聊天单条内容:前缀+手动输入的文本内容
   _textfiled.innerHTML = pindaoStr  +  data;
   _textfiled.height = _textfiled.contextHeight + 4;//文本实际内容距离文本上下各2像素间距
  }
  /** 销毁 **/
  public function dispose():void
  {
   //移除自己
   this.removeSelf();
  }
 }
}

在ChatView.as中修改initEvent()方法和removeEvent()方法

/**
   * 注册点击事件
   */
  private function initEvent():void 
  {
   //表情图标的点击
   selectClip.on(Event.CLICK, this, this.onSelectExpression) ;
   //发送按钮点击事件
   btn_send.on(Event.CLICK, this, this.onSendText);
  }
  
  
  /**
   * 清除点击事件
   */
  private function removeEvent():void
  {
            //移除UI面板打开按钮的click事件
   selectClip.off(Event.CLICK, this, onSelectExpression);
   //移除发送消息按钮的click事件
   btn_send.off(Event.CLICK,this,onSendText);
  }

创建onSendText()方法,测试我们刚刚设置的聊天样式

//从对象池创建ChatLineUI的实例
   var chatLineUI:ChatLineUI = Pool.getItemByClass("chatLineUI",ChatLineUI);
   //将测试数据传给ChatLineUI
   chatLineUI.init("222");
   //添加聊天条目到panel
   chatPanel.addChild(chatLineUI);

最终结果:

    image.png