web-dev-qa-db-ja.com

絵文字(絵文字)ビュー/キーボードレイアウトの実装

FacebookアプリとGoogle Hangoutsアプリで絵文字(絵文字)の選択がどのように実装されているかを把握しようとしています。 Android AP​​IサンプルのSoftKeyboard Demoアプリを調べましたが、これらの絵文字ビューの表示はSoftKeyboardのようには見えません。これは、カスタムDialogビューのように見え、動作します。誰がこれらがどのように実装されているか考えていますか?

Facebookアプリ

Facebook

Googleハングアウトアプリ

Hangouts

また、 nicode は絵文字を送信する最良の方法ですか、それとも代替手段はありますか? \u1F601のようないくつかのUnicodeシーケンスは、対応する絵文字をレンダリングせず、代わりにそのシーケンスが1として表示されることに気付きました。

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

非常に便利な Emoticon Keyboard が見つかりました。このキーボードはUnicodeシーケンスを使用せず、ローカルイメージアセットのみを使用します。このタイプのキーボードは、このアプリ内でのみ使用でき、他のアプリやオペレーティングシステムでは使用できないと考えています。

その代わりに、アセットを含むImageViewをUnicodeシーケンスを含むTextViewに置き換えています。

サポートされているUnicodeシーケンス および Visual Unicode Database を相互参照した後、\u1F601は32ビットUnicode表現であり、16ビット表現は次のように設定できることに気付きました。 :

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

Hieu Rockerのライブラリに基づいてこのライブラリを使用できます。 https://github.com/ankushsachdeva/emojicon

これは見た目です

Screenshot

24
ankush

ビューグループが表示されるか、表示されなくなると、ダイアログが不要になります。感情を初期化するたびに、私は常に[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;

}
7
user1971705

絵文字キーボード機能の実装方法の詳細を知りたくない場合は、次のライブラリを試すことができます。

  • Rockerhieu/emojiconはフラグメントを使用して絵文字キーボードを実装します(DialogFragmentを使用して表示を処理する必要があります。レイアウトの変更をサポートしておらず、デフォルトはHole Darkテーマです。

  • Android Emoji KeyboardRockerhieuの作業に基づいて、絵文字キーボードを提供するライブラリを構築しました。 WhatsAppやTelegramなどのアプリで見ました。レイアウトをLinearLayoutとして処理し、したがって、ソフトキーボードとの対話を自分で処理することができます(以下で説明します)か、ライブラリによって提供されるTelegram PanelまたはWhatsApp Panelのどちらを使用するかを選択できます。

PS1:両方のライブラリはApacheライセンスです

Final Result should look like that

パート01:レイアウトの構築

  • キーボードで使用する絵文字ページごとにGridViewを作成します。例えば:

  • フラグメントで作成されたビューをバインドします。

    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という3番目のパーツライブラリを使用しました。

    <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);
            }
        }
    }
    
  • (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から拡張するクラスの2つのクラスを作成します。入力された要素が絵文字かどうかを識別するためにそれぞれの入力をインターセプトし、そうであれば、アイコンを表示するためにspannableを追加します(主にオーバーライドしたい場合に必要)システムのデフォルトの絵文字は、たとえばwhats-appやtelegramのように見えます);

  • ソフトキーボードとのやり取りを処理します。次の2つの方法で実行できます。

    1. ソフトキーボード上にダイアログを描画します。
    2. ソフトキーボードとアクティビティの対話を無効にし、画面を自分で描画します。

PS3:コードをフォーマットするのに苦労しましたが、まだXMLの一部が表示されていません。誰かがそれを修正できれば感謝します

このライブラリはAndroidで使用できます。 https://github.com/rockerhieu/emojicon

4
Hieu Rocker

ケース1:最初に起動されるカスタムキーパッドこのキーパッドは高さが不明であるため、キーパッドはAndroidキーパッドのサイズに基づいて作成されます最初は、カスタムキーパッドは固定の高さで作成されます。高さが固定されたカスタムキーパッドの上に編集領域を移動します(編集領域が配置されている親レイアウトにPaddingを設定することで使用できます(parentLayout-> setPadding(0、0、0、Height)-> Weight height is your Initialキーパッドの高さ)。注:カスタムキーパッドが破棄または非表示になっている場合、パディングを0に設定することを忘れないでください。

ケース2:Androidテキストキーパッドが最初に起動されます

キーパッドは、このキーの高さを使用してカスタムキーパッドを起動すると、環境設定に書き込まれます。パディングを設定する必要はありません。これがAndroidキーパッドの機能です。

3
surya