高仿微信表情控件 -- LQREmojiLibrary

LQREmojiLibrary

一个超级牛逼的表情库,可使用表情及贴图功能,方便好用,抽离图片加载接口,让开发者自己选择图片加载工具。

码云:

https://git.oschina.net/CSDNLQR/LQREmojiLibrary

GitHub:

https://github.com/GitLqr/LQREmojiLibrary

一、简述

这个库相当牛逼,好用。这个库相当牛逼,好用。这个库相当牛逼,好用。好了,接下来直接看效果图吧:

DemoApp下载

二、引用初始化

1、在自己项目中添加本项目依赖:

compile 'com.lqr.emoji:library:1.0.2'

2、初始化

使用本库必须在自定义的Application中使用LQREmotionKit对库进行初始化,LQREmotionKit提供了四种初始化方法,请根据自己的需要选择。

*使用前需要注意以下几点:

  1. 本库抽离出了图片加载接口,可让开发者自己选择图片加载工具(如:Glide、UIL等),所以使用本库必须实现IImageLoader接口。
  2. 本库支持设置贴图的存放路径,这意味着开发者可以根据自己项目需求修改贴图的存放位置,并且支持贴图自定义。默认的贴图存放在/data/data/包名/files/stickers 目录下。

1)不带IImageLoader的init()

public static void init(Context context)

public static void init(Context context, String stickerPath)

2)带IImageLoader的init()

public static void init(Context context, IImageLoader imageLoader)

public static void init(Context context, String stickerPath, IImageLoader imageLoader)

3)示例

public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        LQREmotionKit.init(this, new IImageLoader() {
            @Override
            public void displayImage(Context context, String path, ImageView imageView) {
                Glide.with(context).load(path).centerCrop().diskCacheStrategy(DiskCacheStrategy.SOURCE).into(imageView);
            }
        });
    }
}

三、表情功能集成

1、布局中使用EmotionLayout控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <!--内容区-->
    <LinearLayout
        android:id="@+id/llContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        ...
        这里一般是放消息列表,和内容输入框等控件
        ...

    </LinearLayout>

    <!--表情区-->
    <com.lqr.emoji.EmotionLayout
        android:id="@+id/elEmotion"
        android:layout_width="match_parent"
        android:layout_height="270dp"
        android:visibility="gone"/>

</LinearLayout>

2、实现输入框图文混排

1)将内容输入框交给EmotionLayout管理(强烈建议!!!)

mElEmotion.attachEditText(mEtContent);

2)实现IEmotionSelectedListener接口,手动实现图文混排(有自己的实现方式的,可以采用这种方式)

mElEmotion.setEmotionSelectedListener(new IEmotionSelectedListener() {
    @Override
    public void onEmojiSelected(String key) {
        if (mEtContent == null)
            return;
        Editable editable = mEtContent.getText();
        if (key.equals("/DEL")) {
            mEtContent.dispatchKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL));
        } else {
            int start = mEtContent.getSelectionStart();
            int end = mEtContent.getSelectionEnd();
            start = (start < 0 ? 0 : start);
            end = (start < 0 ? 0 : end);
            editable.replace(start, end, key);

            int editEnd = mEtContent.getSelectionEnd();
            MoonUtils.replaceEmoticons(LQREmotionKit.getContext(), editable, 0, editable.toString().length());
            mEtContent.setSelection(editEnd);
        }
    }

    @Override
    public void onStickerSelected(String categoryName, String stickerName, String stickerBitmapPath) {

    }
});

3、实现内容区与表情区仿微信切换效果

private EmotionKeyboard mEmotionKeyboard;

private void initEmotionKeyboard() {
    mEmotionKeyboard = EmotionKeyboard.with(this);
    mEmotionKeyboard.bindToContent(mLlContent);
    mEmotionKeyboard.bindToEmotionButton(mIvEmo);
    mEmotionKeyboard.bindToEditText(mEtContent);
    mEmotionKeyboard.setEmotionLayout(mElEmotion);
}

4、效果

经过上面几步,就可以实现以下效果了:

四、贴图功能集成

1、设置贴图的存放位置

这一步可略过,不设置的话,贴图的默认存放位置是 /data/data/包名/files/stickers ,可通过LQREmotionKit.getStickerPath()获得。

贴图的存放位置只能通过LQREmotionKit的init()来设置:

LQREmotionKit.init(this, Environment.getExternalStorageDirectory().getAbsolutePath()+ File.separator+"sticker");

LQREmotionKit.init(this, Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + "sticker", new IImageLoader() {
        @Override
        public void displayImage(Context context, String path, ImageView imageView) {
            Glide.with(context).load(path).centerCrop().diskCacheStrategy(DiskCacheStrategy.SOURCE).into(imageView);
        }
    });

2、将贴图下载到指定贴图的存放位置

1)自带贴图

本库支持 集成默认贴图,可将贴图按规则放置在assets的sticker目录下,当程序启动时,会自动将assets的sticker目录下所有的贴图复制到贴图的存放位置。

2)网络下载贴图

//得到贴图的存放位置
String stickerPath = LQREmotionKit.getStickerPath();
...
网络下载(这里不同项目实现方式不同,请根据自己的项目实现该部分代码)
...

3、监听用户点击贴图事件

mElEmotion.setEmotionSelectedListener(new IEmotionSelectedListener() {
    @Override
    public void onEmojiSelected(String key) {
        
    }

    @Override
    public void onStickerSelected(String categoryName, String stickerName, String stickerBitmapPath) {
        String stickerPath = stickerBitmapPath;
        ...
        发送图片
        ...
    }
});

4、效果

经过上面几步,就可以实现以下效果了:

五、拓展按钮的控制

1、设置表情控件的拓展按钮

默认表情控件的底部Tab是不显示“添加”按钮和“设置”按钮的,如果需要,可通过以下代码进行控制。

mElEmotion.setEmotionAddVisiable(true);
mElEmotion.setEmotionSettingVisiable(true);
mElEmotion.setEmotionExtClickListener(new IEmotionExtClickListener() {
    @Override
    public void onEmotionAddClick(View view) {
        Toast.makeText(getApplicationContext(), "add", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onEmotionSettingClick(View view) {
        Toast.makeText(getApplicationContext(), "setting", Toast.LENGTH_SHORT).show();
    }
});

2、效果

欢迎关注微信公众号:全栈行动
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,095评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,625评论 4 61
  • 函数的创建方式: ① 函数声明 ② 函数表达式 ③ 使用Function类型的构造器创建 代码示例 关键字new的...
    码农的世界你不懂阅读 2,415评论 0 0
  • 走过青春岁月,慢慢放下脚步,回头一看,来时的路竟渐渐模糊,记忆中的片段零零散散 给老师的恶作剧 因为不满老师的处罚...
    丩丩阅读 1,166评论 3 2
  • 墙上芦苇,头重脚轻根底浅; 山间竹笋,嘴尖皮厚腹中空 ――(明)解缙 身体透支,健康会亮起红灯;金钱透支,经济会陷...
    裕文书屋阅读 3,244评论 2 4

友情链接更多精彩内容