Реализации Emoji (смайлик) Вид / раскладки клавиатуры

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

Приложение Facebook

facebook

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

Hangouts

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

EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\u1F601");
Источник

6 ответов

Решение

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

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

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

EditText messageInput = (EditText) findViewById(R.id.message_input);
messageInput.getText().append("\ud83d\ude01");
Источник

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

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

Скриншот

Источник

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

  • https://github.com/rockerhieu/emojicon: реализует клавиатуру Emoji с использованием фрагментов (вам нужно будет обработать ее отображение с помощью DialogFragment. Она не поддерживает изменение макета, и по умолчанию используется тема Hole Dark;

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

PS1: обе библиотеки имеют лицензию Apache

Конечный результат должен выглядеть так

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

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

  • Свяжите созданные виды во Фрагментах:

    public class FragmentEmojiNature extends 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: кнопка выше существует, чтобы обеспечить функциональность возврата

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

  • Создайте адаптер для управления вставкой смайликов в 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);
        }
    }
}

  • Создайте классы, которые будут раздувать каждую из страниц смайликов, передавая смайлики (следуя шаблону Юникода) в 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 для отображения значка (в основном, необходимо, если вы хотите переопределить системные эмодзи по умолчанию, чтобы иметь что-то, что выглядит как приложение или телеграмма, например);

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

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

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

Источник

Видовая группа, видимая или отсутствующая, также может изменить это. Она не поддерживает диалог. Каждый раз, когда инициализируешь эмоцию, я всегда использую значение ключа, например [happy]=R.drawable.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;

}
Источник

Вы можете использовать эту библиотеку для Android: https://github.com/rockerhieu/emojicon

Источник

Случай 1: пользовательская клавиатура запускается первой. Клавиатура создается на основе размера клавиатуры Android, так как эта клавиатура имеет высоту Неизвестно. Изначально настраиваемая клавиатура создается с фиксированной высотой - в этом случае вам нужно переместить область редактирования выше Пользовательская клавиатура с фиксированной высотой (которую можно использовать, установив Padding в родительском макете, где расположена область редактирования ( parentLayout->setPadding ( 0, 0, 0, высота) -> где высота - ваша начальная высота клавиатуры). Примечание: Не забывайте устанавливать отступы на 0, когда пользовательская клавиатура разрушена или скрыта.

случай 2: сначала запускается текстовая клавиатура Android

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

Источник
Другие вопросы по тегам