ActionScript
TypeScript
JavaScript

二、显示表情面板以及获取图片类型

发布时间:2017-02-10

 上一章节我们已经初步显示了聊天室UI界面,本章节我们一起来看下:

  1. 点击表情按钮,实现隐藏/显示表情UI界面

  2. 点击表情图片,获取表情的图片类型

在ChatExpression.as中

设置List的属性让List可以被点击,然后将图片添加到这个List中。

public function ChatExpressionView() 
  { 
   //往数组中添加表情图片
   for (var i:int = 0; i < 21; i++ )
   {
    //添加url
    _ExpressionArray.push({url:"chat/face"+i+".png"});
   }
   //单元格渲染
   item0.renderHandler = new Handler(this, this.onRender);
   //设置滚动条
   item0.vScrollBarSkin = "";
   //设置点击状态
   item0.selectEnable = true;
   //设置橡皮筋回弹时间
   item0.scrollBar.elasticBackTime = 100;
   //设置橡皮筋回弹距离
   item0.scrollBar.elasticDistance = 300;
   //给单元格里面的图片赋值
   item0.dataSource = _ExpressionArray;
   }
  public function onRender(item:Box,index:int):void 
  {
   /**存储图片url**/
   var data:Object = _ExpressionArray[index];
   /**获取图片**/
   _img = item.getChildByName("image") as  Image;
   //给list里面的图片更换皮肤(图片)
   _img.skin = data.url;
  }

之后我们给图片添加点击事件,

//添加图片点击事件
   _img.on(Event.CLICK, this, onImgCLick,[index]);

添加回调的创建方法

public function init(callBack:Handler):void
  {
   _callBack = callBack; 
  }

添加图片的点击事件

private function onImgCLick(index:int):void 
  {
   //存储当前的索引值
   _index = index;
   //当前索引不为空的话将当前索引传回去
   _callBack != null && (_callBack.runWith(["@" + _index + "@"])); 
  }

ChatExpression.as的全部代码

package view 
{
 import laya.events.Event;
 import laya.ui.Box;
 import laya.ui.Image;
 import laya.utils.Handler;
 import ui.ChatExpresssionUI;
 
 public class ChatExpressionView extends ChatExpresssionUI 
 {
  /**表情的回调方法**/
  private var _callBack:Handler;
  /**存放表情的数组**/
  private var _ExpressionArray:Array = []
  /**用来记录表情的索引**/
  private var _index:int ;
  /**图片**/
  private var _img:Image;
  public function ChatExpressionView() 
  {
   //往数组中添加表情图片
   for (var i:int = 0; i < 21; i++ )
   {
    //添加url
    _ExpressionArray.push({url:"chat/face"+i+".png"});
   }
   //单元格渲染
   item0.renderHandler = new Handler(this, this.onRender);
   //设置滚动条
   item0.vScrollBarSkin = "";
   //设置点击状态
   item0.selectEnable = true;
   //设置橡皮筋回弹时间
   item0.scrollBar.elasticBackTime = 100;
   //设置橡皮筋回弹距离
   item0.scrollBar.elasticDistance = 300;
   //给单元格里面的图片赋值
   item0.dataSource = _ExpressionArray;
  }
  /**
   * 点击回调
   * @param callBack
   */
  public function init(callBack:Handler):void
  {
   _callBack = callBack;
   
  }
  /**
   * 单元格渲染方法
   * @param item
   * @param index
   */
  public function onRender(item:Box,index:int):void 
  {
   /**存储图片url**/
   var data:Object = _ExpressionArray[index];
   /**获取图片**/
   _img = item.getChildByName("image") as  Image;
   //给list里面的图片更换皮肤(图片)
   _img.skin = data.url;
   //添加图片点击事件
   _img.on(Event.CLICK, this, onImgCLick,[index]);
  }
  /**
   * 图片点击
   * @param index
   */
  private function onImgCLick(index:int):void 
  {
   //存储当前的索引值
   _index = index;
   //当前索引不为空的话将当前索引传回去
   _callBack != null && (_callBack.runWith(["@" + _index + "@"]));
   
  }
  
  private function removeEvent():void{
   _img.off(Event.CLICK, this,onImgCLick);
  }
 }

}

实现表情UI界面的隐藏与显示

/**
 * 隐藏和显示UI
 * @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;
}

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;

public class ChatView extends ChatUI 
{
private var _ChatExpression:ChatExpressionView ;
private var _isMove:Boolean = false;
 
public function ChatView() 
{
this.init();
}
 
public function init():void 
{
 
//初始化事件
this.initEvent();
//从对象池创建表情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) ;  
}
/**
 * 隐藏和显示UI
 * @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);
}
/**
 * 点击图片设置文本框
 * @param type
 */
private function onGetFaceType(type:String):void
{
//点击图片,将图片类型显示到输入文本框中
chatInfo.text += type;
}

}
 
}

最终结果:

image.png