Welcome to my personal blog
Mainly because of the need for an emoji keyboard recently, I feel that I can simply encapsulate it and sort out the knowledge related to emoji.
emoji in android
There are many articles about emoji in Android, I will not simply list the relevant content, here are some pits encountered in the development process...
- The first is that the color of emoji in the first drawing of TextView will be lighter, and this problem still exists in the official demo...
(For details, please refer to https://github.com/googlesamples/android-EmojiCompat), you can see that the emoji colors of two of the Textviews are light in the above picture, but this problem does not occur in EditView...
There are two solutions for the time being. One is for projects that cannot introduce EmojiCompat, and you can consider drawing multiple times for the textview, but it will be invalid when the background is set for this Textview... The second is for projects that can introduce EmojiCompat, but it is simple The direct setting of EmojiCompat is still not easy to use... Solve this problem immediately by customizing the View, that is, the Custom TextView in the demo
- Adaptation of native emoji
Different versions of the system have different emojis. Generally speaking, higher versions are compatible with lower versions of emoji.
The other is the problem of domestic roms. In some roms, the emoji icons of android will be replaced by emoji of ios. It will give people the illusion that there is no difference... However, they are all adapted, and some icons are still android. emoji style, very obsessed
- The size of emoji
The size of emoji... is to follow the textSize of TextView, so if you want to adjust the size of emoji, you need to change the textSize value of textView.
- EditText delete problem
As for the keyboard, you need to operate the editText, including the delete operation. However, some emoji occupy two bytes, and some occupy one. Therefore, when deleting again, you need to verify the content and delete the corresponding bytes.
To put it simply, emoji display is not a problem if the device or development tools are updated in time. The wish is good, but the reality is always unsatisfactory. (Only I think Android's jelly man emoji looks okay...)
Emoji keyboard
Show the renderings first,
The main functions of an emoji keyboard have been realized, including the input and deletion of emoji, the switching between multiple emoji tabs and the change of the bottom sliding indicator. It is necessary to display the effect of the bottom tab exceeding the screen range, so the displayed part Data is duplicated.
designing process
In the original design, there were no multiple emoji tabs at the bottom, and the function felt a bit thin, so the function of switching an item at the bottom was added later.
The entire View design is as follows,
- Emoji display and selection area: It is mainly used to display emoji content. ViewPager is used here. During initialization, the emoji display list will be calculated, and finally filled into ViewPager. For the entire View, the Adapter of ViewPager is initialized. Fill in all the emoji at the same time, and when sliding or selecting the bottom item, the indicator and bottom item will be controlled according to the display information of each page calculated in the initialization.
- ViewPager's indicator: It is actually a LinearLayout, which displays the corresponding number and position according to the settings. Here is the relevant indicator of the current item. When a new item is selected or swiped to a new item, the number of indicators will be displayed. Update, and when the above ViewPager slides but does not switch to the new item, it just updates the content indicated by the indicator.
- Emoji label part: A RecycleView is used because the sliding effect and positioning display are more convenient when there are many labels.
design flaw
- For the time being, only emoji selection is supported, and custom image input cannot be provided.
- The bottom indicator is now updated in the process of removing all views and then setting new views according to new parameters without animation effect
- On the bottom emoji tab, when the selected item is manually slid beyond the screen, slide the top ViewPager page again, the bottom item reset animation is a bit stiff, and there is still room for optimization
Code
- emoji display and selection area:
Mainly for the Adapter processing of the top ViewPager
- EditText text control
After binding the EditText to the view, the content of the EditText will be changed after the view is operated
It should be noted that when deleting again, it is necessary to verify whether the last two digits are a complete emoji. If so, delete the last two bytes, otherwise, delete only one byte.
- Bottom tab indicator
A simple LinearLayout to display the indicator, without switching animation effects, can be optimized for a wave.
- Bottom label selector
Bottom label selector implemented through a RecycleView
- Monitor ViewPager sliding and bottom label selection
Add ViewPager's addOnPageChangeListener method to listen for click callbacks for sliding and bottom label selection
The relevant code can be obtained by visiting my GitHub , and you are welcome to start or provide suggestions.