Android显示自定义聊天表情

来一支蓝立群

已于 2024-08-01 18:26:14 修改

阅读量293

点赞数 9

文章标签： android

于 2024-07-29 18:15:20 首次发布

本文链接：https://blog.csdn.net/lzb342999453/article/details/140775747

版权

思路：

1、用RecycleView加载表情

2、每一个表情对应一个key

3、输入聊天框：自定义监听EditText获取到内容，找出内容包含的key，将key替换成图片

4、显示聊天记录：同理，自定义TextView

按照上面的思路完成功能：

第一步：引入图片

将所有的表情图片引入到drawable（或者加入压缩包，代码解压缩包，本地引入）

我是摸鱼摆烂，直接引入到drawable里的，哈哈哈哈

文件命名格式最好有规律，方便CV

第二步：创建表情List以及map

（List是RecycleView展示用，Map是监听文字内容包含的key，查找替换图片，用List还需循环）

创建实体类，方便引用

public class EmojiBean {
    private String code;
    private int icon;

    public EmojiBean(String code, int icon) {
        this.code = code;
        this.icon = icon;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    @Override
    public String toString() {
        return "EmojiBean{" +
                "code='" + code + '\'' +
                ", icon=" + icon +
                '}';
    }
}

创建List以及Map

import android.os.Build;

import com.okcis.linphone_demo.R;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

public class EmojiManager {
    public static final List<EmojiBean> EMOJI_LIST = new ArrayList<>();
    public static Map<String, Integer> EMOJI_MAP = new HashMap<>();


    public EmojiManager(){
        // 初始化表情数据
        EMOJI_LIST.add(new EmojiBean("[微笑]", R.drawable.emoji_0));
        EMOJI_LIST.add(new EmojiBean("[撇嘴]", R.drawable.emoji_1));
        //....省略
        EMOJI_LIST.add(new EmojiBean("[转圈]", R.drawable.emoji_108));

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            //将List转为Map，时代在发展，暂时不考虑N以下的设备
            EMOJI_MAP = EMOJI_LIST.stream().collect(Collectors.toMap
                    (EmojiBean::getCode, EmojiBean::getIcon, (value1, value2) -> value1));
        }
    }

    public static List<EmojiBean> getEmoticonList() {
        return EMOJI_LIST;
    }
    public static Map<String, Integer> getEmoticonMap() {
        return EMOJI_MAP;
    }
}

将整个功能模块封装

加入到RecycleView

import android.content.Context;
import android.view.View;

import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.okcis.linphone_demo.R;
import com.okcis.linphone_demo.page.msg.emoji.data.EmojiBean;
import com.okcis.linphone_demo.page.msg.emoji.data.EmojiCallback;
import com.okcis.linphone_demo.page.msg.emoji.data.EmojiManager;
import com.okcis.linphone_demo.page.msg.emoji.data.EmojiAdapter;

import java.util.List;


public class EmojiView {
    private Context mContext;
    private View emojiView;
    private EmojiCallback mEmojiCallback;

    public EmojiView(Context context){
        mContext = context;
        initView();
    }

    private void initView(){
        emojiView = View.inflate(mContext, R.layout.chat_emoji_view_layout, null);
        EmojiManager emojiManager = new EmojiManager();
        RecyclerView recyclerView = emojiView.findViewById(R.id.recyclerView_emoji);
        List<EmojiBean> items = emojiManager.getEmoticonList();
        RecyclerView.LayoutManager layoutManager = new GridLayoutManager(mContext, 8);
        recyclerView.setLayoutManager(layoutManager);
        EmojiAdapter adapter = new EmojiAdapter(mContext, items);
        adapter.setOnItemClickListener((view, i) -> {
            if (mEmojiCallback != null){
                mEmojiCallback.EmojiResult(items.get(i));
            }
        });
        recyclerView.setAdapter(adapter);



    }

    public void setEmojiCallback(EmojiCallback callback){
        mEmojiCallback = callback;
    }

    public View getEmojiView(){
        return emojiView;
    }

}

chat_emoji_view_layout.xml 就一个recycleView

<?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="wrap_content">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_emoji"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:overScrollMode="never"
        android:padding="10dp"/>

</LinearLayout>

Adapter

import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.luck.picture.lib.interfaces.OnItemClickListener;
import com.okcis.linphone_demo.R;

import java.util.List;

public class EmojiAdapter extends RecyclerView.Adapter<EmojiAdapter.ViewHolder> {
    private Context mContext;
    private OnItemClickListener mOnItemClickListener;
    private List<EmojiBean> mDataList;
    public EmojiAdapter(Context context, List<EmojiBean> mDataList) {
        super();
        mContext = context;
        this.mDataList = mDataList;
    }
    public void setOnItemClickListener(OnItemClickListener listener) {
        mOnItemClickListener = listener;
    }
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.chat_emoji_item_layout, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, @SuppressLint("RecyclerView") int position) {
        EmojiBean data = mDataList.get(position);
        Glide.with(mContext).load(data.getIcon()).into(holder.DataIv);
        holder.DataIv.setOnClickListener(view -> {
            if (mOnItemClickListener != null){
                mOnItemClickListener.onItemClick(holder.DataIv, position);
            }
        });

    }

    @Override
    public int getItemCount() {
        if(mDataList != null){
            return mDataList.size();
        }
        return 0;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView DataIv;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            DataIv = itemView.findViewById(R.id.chat_emoji_icon);
        }
    }
}

chat_emoji_item_layout.xml，就一个图片

<?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="wrap_content"
    android:gravity="center">

    <ImageView
        android:id="@+id/chat_emoji_icon"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:layout_marginVertical="8dp"/>

</LinearLayout>

点击表情Item，将key返回，EmojiCallback

public interface EmojiCallback {
    void EmojiResult(EmojiBean data);
}

第三步：自定义EditText

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.TextWatcher;
import android.text.style.ImageSpan;
import android.util.AttributeSet;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.widget.AppCompatEditText;
import androidx.core.content.ContextCompat;

import com.okcis.linphone_demo.page.msg.emoji.data.EmojiManager;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class EmojiEditText extends AppCompatEditText {
    private Context mContext;
    private TextWatcher mTextWatcher;
    private Pattern pattern;
    private SpannableString spannableString;
    private Matcher matcher;

    public EmojiEditText(@NonNull Context context) {
        super(context);
        mContext = context;
        initView();
    }

    public EmojiEditText(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        initView();
    }

    public EmojiEditText(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        initView();
    }

    private void initView() {
        pattern = Pattern.compile("\\[(\\S+?)\\]");//正则，找出输入框符合key结构的字段
        mTextWatcher = new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence charSequence, int start, int before, int count) {
                //移除监听，不移除下面有setText，会死循环
                removeTextChangedListener(mTextWatcher);
                String result = charSequence.toString();
                spannableString = new SpannableString(result);
                matcher = pattern.matcher(result);//找出内容中所有符合key规则的字段
                while (matcher.find()) {
                    if (EmojiManager.EMOJI_MAP.containsKey(matcher.group())) {
                        //Map根据key中找到图片
                        int icon = EmojiManager.EMOJI_MAP.get(matcher.group());
                        int startIndex = matcher.start();
                        int endIndex = matcher.end();
                        Drawable drawable = ContextCompat.getDrawable(mContext, icon);
                        //设置输入框内表情显示大小
                        drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() / 4), (int) (drawable.getIntrinsicHeight() / 4));
//                      有缺点，用ImageSpan表情图片和文字不会居中，并且会改变文字上下位置，因此需要自定义ImageSpan
//                     （自定义后也会有小浮动的改变，但还可以接受，不完美）
//                      ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_CENTER);
                        CenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable, ImageSpan.ALIGN_CENTER);
                        spannableString.setSpan(imageSpan, startIndex, endIndex, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
                    }
                }
                setText(spannableString);
                setSelection(start + count);//光标移动，手动setText后光标会自动跳到最后面
                addTextChangedListener(mTextWatcher);//完成后再添加监听
            }

            @Override
            public void afterTextChanged(Editable editable) {
            }
        };
        addTextChangedListener(mTextWatcher);
    }

}

第四步：自定义TextView（与EditText同理，代码没有添加注释）

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.TextWatcher;
import android.text.style.ImageSpan;
import android.util.AttributeSet;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.widget.AppCompatTextView;
import androidx.core.content.ContextCompat;

import com.okcis.linphone_demo.page.msg.emoji.data.EmojiManager;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class EmojiTextView extends AppCompatTextView {
    private Context mContext;
    private TextWatcher mTextWatcher;
    private Pattern pattern;
    private SpannableString spannableString;
    private Matcher matcher;
    public EmojiTextView(@NonNull Context context) {
        super(context);
        mContext = context;
        initView();
    }

    public EmojiTextView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        initView();
    }

    public EmojiTextView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        initView();
    }

    private void initView() {
        pattern = Pattern.compile("\\[(\\S+?)\\]");
        mTextWatcher = new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence charSequence, int start, int before, int count) {
                removeTextChangedListener(mTextWatcher);
                String result = charSequence.toString();
                spannableString = new SpannableString(result);
                matcher = pattern.matcher(result);
                while (matcher.find()) {
                    if (EmojiManager.EMOJI_MAP.containsKey(matcher.group())) {
                        int startIndex = matcher.start();
                        int endIndex = matcher.end();
                        int icon = EmojiManager.EMOJI_MAP.get(matcher.group());
                        Drawable drawable = ContextCompat.getDrawable(mContext, icon);
                        drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() / 4), (int) (drawable.getIntrinsicHeight() / 4));
//                      有缺点，用ImageSpan表情图片和文字不会居中，并且会改变文字上下位置，因此需要自定义ImageSpan
//                     （自定义后也会有小浮动的改变，但还可以接受，不完美）
//                      ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_CENTER);
                        CenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable, ImageSpan.ALIGN_CENTER);
                        spannableString.setSpan(imageSpan, startIndex, endIndex, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
                    }
                }
                setText(spannableString);
                addTextChangedListener(mTextWatcher);
            }

            @Override
            public void afterTextChanged(Editable editable) {
            }
        };
        addTextChangedListener(mTextWatcher);
    }
}

参考：CenterAlignImageSpan

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.text.style.ImageSpan;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class CenterAlignImageSpan extends ImageSpan {

    /**
     * 图片和文字的左边距
     */
    private int mMarginLeft = 0;

    /**
     * 图片和文字的右边距
     */
    private int mMarginRight = 0;

    public CenterAlignImageSpan(@NonNull Drawable d) {
        super(d);
    }

    public CenterAlignImageSpan(@NonNull Drawable d, int verticalAlignment) {
        super(d, verticalAlignment);
    }

    public CenterAlignImageSpan(@NonNull Drawable d, int verticalAlignment, int marginLeft, int marginRight) {
        super(d, verticalAlignment);
        mMarginLeft = marginLeft;
        mMarginRight = marginRight;
    }

    @Override
    public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, @NonNull Paint paint) {
        Drawable drawable = getDrawable();
        canvas.save();
        Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
        x = x + mMarginLeft;
        int fontHeight = fmPaint.descent - fmPaint.ascent;
        int centerY = y + fmPaint.descent - fontHeight / 2;
        int transY = centerY - (drawable.getBounds().bottom - drawable.getBounds().top) / 2;
        canvas.translate(x, transY);
        drawable.draw(canvas);
        canvas.restore();

    }

    @Override
    public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, @Nullable Paint.FontMetricsInt fontMetricsInt) {
        Drawable drawable = getDrawable();
        Rect rect = drawable.getBounds();
        if (fontMetricsInt != null) {
            Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
            int fontHeight = fmPaint.descent - fmPaint.ascent;
            int drHeight = rect.bottom - rect.top;
            int centerY = fmPaint.ascent + fontHeight / 2;

            fontMetricsInt.ascent = centerY - drHeight / 2;
            fontMetricsInt.top = fontMetricsInt.ascent;
            fontMetricsInt.bottom = centerY + drHeight / 2;
            fontMetricsInt.descent = fontMetricsInt.bottom;
        }
        return mMarginLeft + rect.right + mMarginRight;
    }
}

使用：

输入框使用EmojiEditText

聊天记录使用EmojiTextView

将EmojiView加入到预留的表情View位置（kotlin）

EmojiView(this).apply {
            setEmojiCallback {
                val sb = StringBuilder(binding.etContent.text.toString())
                val currentSelect = binding.etContent.selectionStart
                val msg = sb.insert(currentSelect, it.code)
                binding.etContent.setText(msg)
            }
        }.let {
            binding.emojiAddLayout.addView(it.emojiView)
        }

java

EmojiView emojiView = new EmojiView(this);
emojiView.setEmojiCallback(new EmojiCallback(){
        @Ov
        public void EmojiResult(EmojiBean data){
            //拼接输入框内容+表情key
            StringBuilder sb = new StringBuilder(EditText.getText().toString())//输入框内容
            int currentSelect = EditText.getSelectionStart()//当前光标所在位置
            String msg = sb.insert(currentSelect, data.code)//在光标位置插入表情key
            EditText.setText(msg)
        }
    }
)

完活
效果图：