Подтвердить что ты не робот

Реализации Emoji (Emoticon) View/Keyboard Layouts

Я пытаюсь выяснить, как выбор emoji (emoticon) реализован в приложении Facebook и приложении Google Hangouts. Я просмотрел демонстрационное приложение SoftKeyboard в образцах Android API, но отображение этих представлений emoji не похоже на SoftKeyboard. Он выглядит и ведет себя как пользовательский вид Dialog. Кто-нибудь имеет представление о том, как они реализованы?

Приложение Facebook

Facebook

Приложение Google Hangouts

Hangouts

Кроме того, Unicode лучший способ отправить смайлики или есть альтернатива? Я заметил, что некоторые Unicode последовательности, такие как \u1F601, не отображают соответствующий смайлик, и вместо этого последовательность просто отображается как 1:

EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\u1F601");
4b9b3361

Ответ 1

Я нашел очень полезную Emoticon Keyboard. Эта клавиатура не использует последовательности Unicode, а скорее как локальные изображения. Я думаю, что этот тип клавиатуры может быть полезен только в этом приложении, а не в других приложениях или операционных системах.

Поэтому вместо этого я заменяю ImageView, содержащий актив, с TextView, содержащим последовательность Unicode.

После перекрестного ссылки Поддерживаемые последовательности Unicode, а также Visual Unicode Database Я понял, что \u1F601 представляет собой 32-битное представление Unicode, а 16-битное представление может быть установлено следующим образом:

EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\ud83d\ude01");

Ответ 2

Вы можете использовать эту библиотеку на основе библиотеки Hieu Rocker: https://github.com/ankushsachdeva/emojicon

Вот как выглядит

Screenshot

Ответ 3

Группа просмотра должна быть видимой или удаленной, также может ее изменить, она не выполняет диалог. Каждый раз, когда вы инициализируете эмоции, я всегда использую ключевое значение, например [happy] = R.drawable.happy. это текст эмоции, тогда как контент [happy]

public SpannableString textToImage(String content,Context c){
    SpannableString ss = new SpannableString(content);
    int starts = 0;
    int end = 0;
    if(content.indexOf("[", starts) != -1 && content.indexOf("]", end) != -1){
        starts = content.indexOf("[", starts);
        end = content.indexOf("]", end);
         SharedPreferences shared=c.getSharedPreferences("emotion",0);
         int resource=shared.getInt(content,0);
        try {
            Drawable drawable =c.getResources().getDrawable(resource);  
            if (drawable != null) {
                drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); 
                ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);  
                ss.setSpan(span, starts,end + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
            }
        } catch (Exception ex){

        }
    }
    return ss;

}

Ответ 4

Если вы не хотите подробно описывать, как реализовать функциональность Emoji-Keyboard, вы можете попробовать эти библиотеки:

  • Rockerhieu/emojicon: реализует Emoji-Keyboard с использованием фрагментов (вам нужно будет обрабатывать отображение его с помощью диалогового окна "Диалог". У него нет поддержки для изменения макета, а по умолчанию используется тема "Отверстие темное",

  • Android Emoji Keyboard: Основываясь на работе Rockerhieu, я создал еще один lib, который предоставляет emoji-keyboard, как ближе к тому, что мы видели в таких приложениях, как WhatsApp или Telegram. Вы можете обрабатывать макет как LinearLayout и, следовательно, самостоятельно обрабатывать взаимодействие с мягкой клавиатурой (как описано ниже) или использовать панель Telegram или панель WhatsApp, предоставленную библиотекой, которая делает это для вас.

PS1: Обе библиотеки - это Apache License

Final Result should look like that

Часть 01: построение макета

  • Создайте GridView для каждой страницы Emoji, которую вы хотите на клавиатуре. Например:

  • Связать созданные представления в фрагментах: Открытый класс FragmentEmojiNature расширяет FragmentEmoji {

    public static final String TAG = "FragmentEmojiNature";
    
    private View mRootView;
    private Emoji[] mData;
    private boolean mUseSystemDefault = false;
    
    private static final String USE_SYSTEM_DEFAULT_KEY = "useSystemDefaults";
    private static final String EMOJI_KEY = "emojic";
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        this.mRootView = inflater.inflate(R.layout.frag_emoji_nature, container, false);
        return this.mRootView;
    }
    
    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        GridView gridView = (GridView) view.findViewById(R.id.Emoji_GridView);
        Bundle bundle = getArguments();
        if (bundle == null) {
            mData = Nature.DATA;
            mUseSystemDefault = false;
        } else {
            Parcelable[] parcels = bundle.getParcelableArray(EMOJI_KEY);
            mData = new Emoji[parcels.length];
            for (int i = 0; i < parcels.length; i++) {
                mData[i] = (Emoji) parcels[i];
            }
            mUseSystemDefault = bundle.getBoolean(USE_SYSTEM_DEFAULT_KEY);
        }
        gridView.setAdapter(new EmojiAdapter(view.getContext(), mData, mUseSystemDefault));
        gridView.setOnItemClickListener(this);
    }
    

    }

  • Создайте новый макет, содержащий пейджер представления и некоторый компонент для управления переходом на просмотр пейджера (в моем случае я использовал библиотеку третьей части с именем SmartTabLayout, как показано ниже:

    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/emoji_tabs"
        android:layout_width="0dip"
        android:layout_height="40dip"
        android:layout_weight="1"
        app:stl_clickable="true"
        app:stl_defaultTabBackground="@color/rsc_emoji_tab_bkg"
        app:stl_defaultTabTextAllCaps="true"
        app:stl_defaultTabTextColor="#000"
        app:stl_defaultTabTextHorizontalPadding="0dip"
        app:stl_defaultTabTextMinWidth="0dp"
        app:stl_defaultTabTextSize="14sp"
        app:stl_distributeEvenly="true"
        app:stl_dividerColor="@color/rsc_emoji_tab_bkg"
        app:stl_drawDecorationAfterTab="true"
        app:stl_indicatorColor="@color/rsc_emoji_tab_indicator"
        app:stl_indicatorGravity="bottom"
        app:stl_indicatorInFront="false"
        app:stl_indicatorInterpolation="smart"
        app:stl_indicatorThickness="2dp"
        app:stl_overlineThickness="0dp"
        app:stl_titleOffset="24dp"
        app:stl_underlineThickness="0dp"/>
    
    <ImageButton
        android:id="@+id/backspace"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/rsc_emoji_tab_bkg"
        android:paddingLeft="10dip"
        android:paddingRight="10dip"
        android:src="@drawable/sym_keyboard_delete_holo_dark"/>
    

PS2: кнопка выше существует для обеспечения функциональности backspace

Часть 02: Уровень контроллера

  • Создайте адаптер для управления вставкой emojis в GridView, например:

    public class EmojiAdapter extends ArrayAdapter<Emoji> {
    
        private boolean mUseSystemDefault = Boolean.FALSE;
    
        // CONSTRUCTOR
        public EmojiAdapter(Context context, Emoji[] data) {
            super(context, R.layout.rsc_emoji_item, data);
        }
    
        public EmojiAdapter(Context context, List<Emoji> data) {
            super(context, R.layout.rsc_emoji_item, data);
        }
    
        public EmojiAdapter(Context context, List<Emoji> data, boolean useSystemDefault) {
            super(context, R.layout.rsc_emoji_item, data);
            this.mUseSystemDefault = useSystemDefault;
        }
    
        public EmojiAdapter(Context context, Emoji[] data, boolean useSystemDefault) {
            super(context, R.layout.rsc_emoji_item, data);
            this.mUseSystemDefault = useSystemDefault;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = convertView;
    
            if (view == null) {
                view = View.inflate(getContext(), R.layout.rsc_emoji_item, null);
                view.setTag(new ViewHolder(view, this.mUseSystemDefault));
            }
    
            Emoji emoji = this.getItem(position);
            ViewHolder holder = (ViewHolder) view.getTag();
            holder.icon.setText(emoji.getEmoji());
    
            return view;
        }
    
        static class ViewHolder {
            EmojiTextView icon;
    
            public ViewHolder(View view, Boolean useSystemDefault) {
                this.icon = (EmojiTextView) view.findViewById(R.id.emoji_icon);
                this.icon.setUseSystemDefault(useSystemDefault);
            }
        }
    }
    
  • Создайте классы, которые будут раздувать каждую из страниц emoji, передающих emojis (после шаблона unicode) в gridview. то есть:.

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        GridView gridView = (GridView) view.findViewById(R.id.Emoji_GridView);
        Bundle bundle = getArguments();
        if (bundle == null) {
            mData = Nature.DATA;
            mUseSystemDefault = false;
        } else {
            Parcelable[] parcels = bundle.getParcelableArray(EMOJI_KEY);
            mData = new Emoji[parcels.length];
            for (int i = 0; i < parcels.length; i++) {
                mData[i] = (Emoji) parcels[i];
            }
            mUseSystemDefault = bundle.getBoolean(USE_SYSTEM_DEFAULT_KEY);
        }
        gridView.setAdapter(new EmojiAdapter(view.getContext(), mData, mUseSystemDefault));
        gridView.setOnItemClickListener(this);
    }
    
  • Создайте два класса: один, который простирается от EditText и другой, который простирается от TextView. Перехватите вход каждого из них, чтобы определить, когда введенный элемент является Emoji, если это так, добавьте spannable для того, чтобы опустить значок (в основном, нужно, если вы хотите переопределить системный эмулятор по умолчанию, чтобы иметь что-то похожее на whats- приложение или леграмма, например);

  • Управление взаимодействием с мягкой клавиатурой. Это можно сделать двумя способами:

    • Нарисуйте диалог по мягкой клавиатуре;
    • Отключите взаимодействие мягкой клавиатуры с активностью и обработайте экран самостоятельно;

PS3: мне было трудно отформатировать код, но пока не отображается какой-либо из XML, если кто-то может это исправить, я был бы благодарен

Ответ 6

Случай 1: начальная пользовательская клавиатура  Клавиатура создана на основе размера клавиатуры Android, так как эта клавиатура высока. Первоначально пользовательская клавиатура создается с фиксированной высотой - в этом случае вам необходимо переместить область редактирования над пользовательской клавиатурой с фиксированной высотой (которую можно использовать с помощью набора "Заполнение" на родительском макете, где расположена область редактирования (parentLayout- > setPadding (0, 0, 0, Height) → Где высота - начальная высота клавиатуры). Примечание: Donot Забудьте установить дополнение к 0, когда пользовательская клавиатура разрушена или скрыта.

случай 2: Android Text Keypad запускается первым

Клавиатура известна как запись в настройках при запуске пользовательской клавиатуры с использованием этой высоты. Нет необходимости устанавливать какие-либо дополнения, потому что это то, что делает Android Keypad для вас.