【Qt UI】仿QQ表情选择控件

表情选择控件在聊天应用中经常要用到,做起来虽然不复杂但是很繁琐,特别是有些图标需要按顺序排列。每次重做必然是很费时,所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWidget,方便直接应用到自己的项目中。

先来看看效果图:

测试程序是一个对话框,里面放有一个QPushButton和一个QLabel,水平布局。点击按钮弹出“表情选择框",选择表情后"表情选择框"关闭,QLabel中显示刚才选择的表情。"表情选择框"中的表情都是gif图片,排列顺序和QQ一样。

如何应用到自己的项目中?

下面是QFaceSelectWidget项目的文件结构,其中gui目录下存放了两个类文件QFaceSelectWidget和QGifLabel,前者是”表情选择框“,后者用来显示Gif动画。res.qrc下面是用到的表情资源,main.cpp 是测试代码。

步骤1:将C++文件拷贝到你的项目中

qfaceselectwidget.cpp

qfaceselectwidget.h

qgiflabel.cpp

qgiflabel.h

步骤2:将表情资源添加到你的资源文件中

步骤3:使用

在需要用到”表情选择框“的源文件中,添加头文件"qfaceselectwidget.h",然后创建QFaceSelectWidget实例对象,设置相应的信号/槽处理。

    // 第一个参数指定聊天表情所在的目录(本地文件系统路径 或 Qt资源文件路径)
    QFaceSelectWidget faceSelectWidget(":/faces/res/images/faces");
    // 按钮点击时显示”聊天表情框“
    // showOnTop()的第一个参数:”聊天表情框“显示在该参数所指定位置的上方(屏幕坐标系)。
    // showOnTop()的第二个参数:”聊天表情框“在参数一所指定的位置”向上“偏移参数二所指定的距离。
    QObject::connect(btn, &QPushButton::clicked, [=, &faceSelectWidget]{
        faceSelectWidget.showOnTop(QCursor::pos(), btn->height()/2);
    });
    // 表情选择完成后,在label中播放所选择的gif动画
    QObject::connect(&faceSelectWidget, &QFaceSelectWidget::selected, [=](const QString &filename){
        gifLabel->setFileName(filename);
        gifLabel->start();
    });

实现过程简介

QFaceSelectWidget 使用表格布局,每个单元格是一个QGifLabel用来播放gif动画,设置WindowFlags(Qt::Popup)这样窗口没有标题栏。

QLabel可以通过设置QMovie来显示Gif动画,但是也有一些不方便的地方,所以我从QLabel类派生了QGifLabel,方便处理鼠标点击、移入和移出事件,同时对Gif动画的控制也更为方便直观,下面是QGifLabel的申明:

class QGifLabel : public QLabel
{
    Q_OBJECT
public:
    explicit QGifLabel(QWidget *parent = 0);
    QGifLabel(const QString &fileName, QWidget *parent = 0);

    void setFileName(const QString &fileName, bool start = false);
    void start();
    void stop();

signals:
    void clicked(const QString &fileName);

protected:
    void mouseReleaseEvent(QMouseEvent *e);
    void enterEvent(QEvent *e);
    void leaveEvent(QEvent *e);

private:
    QMovie *m_movie;
};

QFaceSelectWidget 的构造函数需要指定表情资源的目录,在构造函数内部会调用mapIconName()来映射表情资源文件名到m_iconName中,表情从m_iconName所指定的路径加载,这样的好处是你可以在mapIconName()中修改表情的显示顺序。showOnTop()会计算表情选择框显示的合适位置。selected()是一个信号,当选择表情后会执行两个发射该信号,该信号会将所选择的表情的路径传递出去,供外部使用。

class QFaceSelectWidget : public QWidget
{
    Q_OBJECT

public:
    explicit QFaceSelectWidget(const QString &faceIconDir, QWidget *parent = 0);
    ~QFaceSelectWidget();

    void showOnTop(QPoint &pos, int offsetY = 0);

signals:
    void selected(const QString &fileName);

private:
    QMap<int, QString> m_iconName;

    void mapIconName();
};

更多细节可以查阅源文件,源代码下载地址:http://git.oschina.net/xiaohui_hubei/Code-Home/raw/master/QFaceSelectWidget.7z

时间: 2024-10-26 04:06:50

【Qt UI】仿QQ表情选择控件的相关文章

高仿IOS7日期选择控件

高仿IOS7日期选择控件 高仿IOS7.QQ等日期选择控件,滑动选择,高端大气上档次,可直接运用于项目中... 下载地址:http://www.devstore.cn/code/info/965.html 运行截图:   

android 开发高仿QQ表情选择、输入框

首先大家看效果: 用到的文件有(源码文件有,只包含表情.输入框等有关文件,工程项目是公司项目,恕不公开啦): res: drawable/face_del_icon.xml drawable/iv_face.xml drawable-ldpi下所有图片 raw下的配置文件 layout/item_face.xml   布局文件     layout/view_face_relativelayout.xml  布局文件,注意使用方法是通过include调用的 java文件: ChatEmoji.j

Atitit.ui控件---下拉菜单选择控件的实现select html

Atitit.ui控件---下拉菜单选择控件的实现select   html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& model的实现 Proj.vod2 <% List li=new ArrayList(); Map m=new HashMap (); m.put("lab","爱情"); m.put("v","1"); li.add(m)

js组件开发-移动端地区选择控件mobile-select-area

移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这次的效果图. 它的github地址请点击https://github.com/tianxiangbing/mobile-select-area 它的demo演示请点击 http://www.lovewebgames.com/jsmodule/m

android中选择控件与选择界面自然过度效果的实现--一种新的交互设计

转载请标明出处: http://blog.csdn.net/jianghejie123/article/details/40648931 在安卓中经常遇到须要选择一个东西的功能,比方选择日期.选择文件,选择地点等,通常我们的做法是使用选择对话框.比方选择日期用datepicker,有时候也使用activity,可是这两种方式都有一个缺点,就是用户非常明显的感觉到了界面之间的切换. 有时候.以下这样的选择数据的交互方式应该会更好些: 事实上上面的app效果来自与CapitaineTrain应用,好

iOS开发UI篇—DatePicker和UIToolBar控件简单介绍

iOS开发UI篇—DatePicker和UIToolBar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选择器

ExtJS6.0扩展日期选择控件为也可以选择时间

PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6.0源代码中Picker文件路径下的Date.js脚本(路径:ext-6.0.0-gpl\ext-6.0.0\classic\classic\src\picker),拷贝一份出来命名为DateTimePicker.js 2.修改命名空间(把白色底的改成黑色底的命名空间以及别名,你也可以修改为自己存放该

原创控件代码共享--日期选择控件

思路:实现日期年月日的选择 1.可以设定年的起止年份 2.排除不正确日期选择的可能 3.使用javascript实现控制 4.使用Text属性方便获取设置日期值 ================================= 代码如下: using System; using System.Collections; using System.Collections.Specialized; using System.ComponentModel; using System.IO; using

asp.net mvc中使用jquery H5省市县三级地区选择控件

地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp.net mvc中使用jquery H5省市县三级地区选择控件及中国省市县标准地区库下载地址 咨询QQ:806693619 一.实现原理 一般常用输入控件是input,当点击input的时候执行jquery获取焦点事情,然后弹出本地区选择插件,选择完地区后点击确定将选择的值返回给input完成地区输入