处理表情和文字输入的正确姿势

文章目录

点击“输入框”以外的区域，如果当前他们显示的话，需要隐藏表情面板或者软键盘。
点击“输入框”，如果当前表情面板显示的话，需要先隐藏之，然后弹出软键盘。
输入框中一般会有显示当前输入状态的提示按钮（有的在输入框左边，有的在右边），比如，如果当前是表情输入状态，该提示按钮的图标应该是软键盘，以提示用户点击该按钮切换到文字输入状态。这个提示按钮的图标和点击后的响应要分情况处理，是动态的。

键盘相关操作方法

private InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
/**
 * 弹出软键盘
 */
private void showKeyboard() {
    imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
}
/**
 * 隐藏软键盘
 */
private void hideKeyboard() {
    if (getWindow().getAttributes().softInputMode != WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN) {
        if (getCurrentFocus() != null)
            imm.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),   InputMethodManager.HIDE_NOT_ALWAYS);
    }
}

表情面板如何在xml中布局

主要有两部分，可见的“输入框”和不可见的表情面板。其实还有一部分，是系统提供的软键盘，不过不需要在布局中做处理。

表情面板中用ViewPager来翻页，用ViewpagerIndicator做分页器

环信示例：

<LinearLayout
    android:id="@+id/bar_bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="vertical"
    android:paddingBottom="2dip"
    android:paddingTop="2dip">
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@color/divider_color" />
    <LinearLayout
        android:id="@+id/rl_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingTop="4dp">
        <Button
            android:id="@+id/chat_sendpic"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/chat_input_img_btn" />
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="8"
            android:layout_margin="5dp" >
            <EditText
                android:id="@+id/et_sendmessage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/chat_input_box"
                android:hint="@string/input_chat_msg_hint"
                android:imeOptions="actionSend"
                android:inputType="text"
                android:maxLines="6"
                android:padding="5dp" />
            <Button
                android:id="@+id/btn_chat_emoj_switch"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginRight="10dp"
                android:layout_gravity="right|center_vertical"
                android:background="@drawable/chat_input_emoji_btn" />
        </FrameLayout>
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp">
            <Button
                android:id="@+id/btn_chat_send"
                android:layout_width="80dp"
                android:layout_height="40dp"
                android:text="@string/chat_btn_send"
                android:background="@drawable/bg_chat_send" />
        </RelativeLayout>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_face_container"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="vertical"
        android:visibility="gone">
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_chat_pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

实现同微信Android客户端那样的输入效果

点击表情按钮，弹出表情面板，emojPanelShown = true, 表情按钮图标变成键盘图标
点击键盘按钮，弹出软键盘，emojPanelShown = false, 但是表情面板并没有被隐藏，只是被键盘盖住而已，键盘按钮图标改成表情按钮图标
点击表情按钮图标，emojPanelShown = true, 隐藏软键盘，表情面板再次出现，表情按钮图标再次变成键盘按钮图标
点击键盘按钮，同第二步，以此类推。
这里还有两点需要特别注意：
- 点击空白区域，表情面板和软键盘都收起
- 点击软键盘上的“收起”按钮，收起软键盘时，获取键盘收起的事件，并且在emojPanelShown = false时才收起表情面板和软键盘。这是为了防止键盘的该收起事件与点击表情按钮时收起键盘的事件冲突。

文字输入框随着输入的文字增多，输入框高度自动增加

<EditText
 android:id="@+id/edtInput"
 android:layout_width="0dip"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:hint="@string/compose_hint"
 android:inputType="textCapSentences|textMultiLine"
 android:maxLength="2000"
 android:maxLines="4" />

一些未解决的问题

[已解决］表情面板和软键盘来回切换次数超过3次，第4次及以后会，软键盘再次弹出时，会盖住输入栏。一个原因是软键盘高度比表情面板高度高，但是根本原因还没找到。＊已经发现原因＊，是由于点击区域太小，误点击到其它区域导致键盘收起的。

Kevin博客

梦想还是要有的，万一实现了呢？

处理表情和文字输入的正确姿势