1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > android显示ios emoji表情符号 IM 使用的 Emoji 表情显示

android显示ios emoji表情符号 IM 使用的 Emoji 表情显示

时间:2021-11-24 12:53:22

相关推荐

android显示ios emoji表情符号 IM 使用的 Emoji 表情显示

估计很多人都看到输入法键盘中使用的输入表情的Emoji。

键盘emoji.png

Emoji.png

Emoji使用基础

可以看到在不同的Native Android IOS系统中对应的emoji码显示的图片都不同。

国内这种环境,一般都想统一显示成ios对应样式的表情包的样式。

signal中已经提供了一个比较完善的方案显示自定义表情Emoji

/signalapp/Signal-Android

1.添加对应的Emoji资源到asset(png)

asset资源.png

2.自定义EmojiTextView

image.png

3.在setText时替换emoji码显示的图片

image.png

有一个问题需要提醒,就是Emoji的表情符,只能用过双引号一个个隔断,而IOS中显示可以直接使用直接加载一堆Emoji表情(IOS傻瓜式开发做得好啊)

以此为基础。

我们想显示类似于微信那种效果的显示,输入框后加入表情按钮

image.png

Emoji输入方案

一般都要制作成滑动显示的。

这里就有两种方案

1.使用ViewPager,每页嵌套一个RecylerView,然后每一个页取出对应的图像资源

2.使用一个RecylerView滑动完成关联加上SnapHelper

第一种实现比较简便,但是这样比较耗资源且View的复用性不高。

第二种方案看起来是非常好的,但是实现起来肯定有有难度。

第一种方案就直接略过了,介绍第二种。

首先思考哦一个问题,使用recylerView滑动,使用pagerSnapHelper是无法卡位的。需要自顶一个

GridPagerSnapHelper来完成这种操作。

可以查看,直接附上开源代码。

/hanhailong/GridPagerSnapHelper

这里需要提示一个虽然你recylerview使用了GridLayoutManager但是你使用的,但是普通的GridLayoutManger要做到横向滑动要使用竖向排列,那么排列效果就会有问题,GridPagerSnapHelper提供自定义的排列方式来满足横向排列。这里显示4行,7列。

GridPagerSnapHelper().apply {

setRow(4)

setColumn(7)

attachToRecyclerView(emoji_recycler)

}

然后编辑indicator的显示。监听滑动,计算出第一显示的item是在第几页。

```

emoji_recycler.addOnScrollListener(object : RecyclerView.OnScrollListener() {

override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) {

// 停止滑动,计算当前页数

if (newState == RecyclerView.SCROLL_STATE_IDLE) {

val index = (emoji_recycler.layoutManager as GridLayoutManager).findFirstCompletelyVisibleItemPosition()

emoji_indicator.setCurrentIndicator(index / 28)

}

}

})

emoji_indicator.setIndicators((emoji_recycler.adapter as EmojiPanelAdapter).getPageSize())

class EmojiPanelAdapter(private val context: Context, private val onClick: (emoji: String) -> Unit) : RecyclerView.Adapter() {

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): EmojiViewHolder {

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。