Android仿微信具有表情输入和拍照上传功能的键盘_安卓表情键盘代码

因公司业务要求，需要做一款类似微信聊天的页面，最主要的是表情输入和拍照、选图上传，因此仿照大神(https://github.com/dss886/Android-EmotionInputDetector)自己写了一个扩展键盘的辅助类(EmotionKeyboard)。废话不多说，先上效果图给各位爷~

github地址：https://github.com/KaneShaw/EmotionKeyboard

效果图

核心类

先贴出核心代码，代码上基本上都有注释，看不明白的可以私我，代码还不够完善，有啥建议的可以下面评论，感谢~

public class EmotionKeyboard {
    private static final String SHARE_PREFERENCE_NAME = "com.xk2318.EmotionKeyboard";
    private static final String SHARE_PREFERENCE_TAG = "soft_input_height";

    private Activity mActivity;
    private InputMethodManager mInputManager;
    private SharedPreferences sp;
    private View mEmotionLayout;//表情布局
    private View mExtendLayout;//扩展布局（上传图片、拍照、位置、红包等等功能）
    private EditText mEditText;
    private View mContentView;

    private EmotionKeyboard() {}

    public static EmotionKeyboard with(Activity activity) {
        EmotionKeyboard EmotionKeyboard = new EmotionKeyboard();
        EmotionKeyboard.mActivity = activity;
        EmotionKeyboard.mInputManager = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE);
        EmotionKeyboard.sp = activity.getSharedPreferences(SHARE_PREFERENCE_NAME, Context.MODE_PRIVATE);
        return EmotionKeyboard;
    }

    public EmotionKeyboard bindToContent(View contentView) {
        mContentView = contentView;
        return this;
    }

    /* 绑定输入框 */
    public EmotionKeyboard bindToEditText(EditText editText) {
        mEditText = editText;
        mEditText.requestFocus();
        mEditText.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    /*
                     * 若表情布局可见，则 锁定内容布局高度、隐藏表情布局、显示软键盘、解锁内容布局高度
                     * 若扩展布局可见，则 锁定内容布局高度、隐藏扩展布局、显示软键盘、解锁内容布局高度
                     * 若表情布局与扩展布局均不可见，则do nothing
                     */
                    if(mEmotionLayout.isShown()){
                        lockContentHeight();
                        hideLayout(mEmotionLayout, true);
                        mEditText.postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                unlockContentHeightDelayed();
                            }
                        }, 200L);
                    } else if(mExtendLayout.isShown()){
                        lockContentHeight();
                        hideLayout(mExtendLayout, true);
                        mEditText.postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                unlockContentHeightDelayed();
                            }
                        }, 200L);
                    }
                }
                return false;
            }
        });
        return this;
    }

    /* 绑定表情按钮 */
    public EmotionKeyboard bindToEmotionButton(View emotionButton) {
        emotionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mEmotionLayout.isShown()) {
                    lockContentHeight();
                    hideLayout(mEmotionLayout, true);
                    unlockContentHeightDelayed();
                } else {
                    if (isSoftInputShown()) {
                        lockContentHeight();
                        showLayout(mEmotionLayout);
                        unlockContentHeightDelayed();
                    } else {
                        if(mExtendLayout.isShown()){
                            hideLayout(mExtendLayout, false);
                        }
                        showLayout(mEmotionLayout);
                    }
                }
            }
        });
        return this;
    }

    /* 绑定扩展按钮(拍照上传、位置、红包等) */
    public EmotionKeyboard bindToExtendbutton(View extendButton){
        extendButton.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                if (mExtendLayout.isShown()) {
                    lockContentHeight();
                    hideLayout(mExtendLayout, true);
                    unlockContentHeightDelayed();
                } else {
                    if (isSoftInputShown()) {
                        lockContentHeight();
                        showLayout(mExtendLayout);
                        unlockContentHeightDelayed();
                    } else {
                        if (mEmotionLayout.isShown()) {
                            hideLayout(mEmotionLayout, false);
                        }
                        showLayout(mExtendLayout);
                    }
                }
            }
        });
        return this;
    }

    /* 设置需要显示的表情布局 */
    public EmotionKeyboard setEmotionView(View emotionView) {
        mEmotionLayout = emotionView;
        return this;
    }

    /* 设置需要显示的扩展布局 */
    public EmotionKeyboard setExtendView(View extendView){
        mExtendLayout = extendView;
        return this;
    }

    public EmotionKeyboard build(){
        mActivity.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN |
                WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
        hideSoftInput();
        return this;
    }

    public boolean interceptBackPress() {
        // TODO: 15/11/2 change this method's name
        if (mEmotionLayout.isShown()) {
            hideLayout(mEmotionLayout, false);
            return true;
        }
        return false;
    }

    /**
     *  显示指定布局
     *  @param layout 需要显示的布局
     */
    private void showLayout(View layout) {
        int softInputHeight = getSupportSoftInputHeight();
        if (softInputHeight == 0) {
            softInputHeight = sp.getInt(SHARE_PREFERENCE_TAG, 750);
        }
        hideSoftInput();
        layout.getLayoutParams().height = softInputHeight;
        layout.setVisibility(View.VISIBLE);
    }

    /**
     * @param layout 需要隐藏的布局视图
     * @param showSoftInput 是否显示软键盘
     */
    private void hideLayout(View layout,boolean showSoftInput) {
        if (layout.isShown()) {
            layout.setVisibility(View.GONE);
            if (showSoftInput) {
                showSoftInput();
            }
        }
    }

    private void lockContentHeight() {
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mContentView.getLayoutParams();
        params.height = mContentView.getHeight();
        params.weight = 0.0F;
    }

    private void unlockContentHeightDelayed() {
        mEditText.postDelayed(new Runnable() {
            @Override
            public void run() {
                ((LinearLayout.LayoutParams) mContentView.getLayoutParams()).weight = 1.0F;
            }
        }, 200L);
    }

    private void showSoftInput() {
        mEditText.requestFocus();
        mEditText.post(new Runnable() {
            @Override
            public void run() {
                mInputManager.showSoftInput(mEditText, 0);
            }
        });
    }

    private void hideSoftInput() {
        mInputManager.hideSoftInputFromWindow(mEditText.getWindowToken(), 0);
    }

    private boolean isSoftInputShown() {
        return getSupportSoftInputHeight() != 0;
    }

    private int getSupportSoftInputHeight() {
        Rect r = new Rect();
        mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r);
        int screenHeight = mActivity.getWindow().getDecorView().getRootView().getHeight();
        int softInputHeight = screenHeight - r.bottom;
        if (softInputHeight < 0) {
            Log.w("EmotionKeyboard", "Warning: value of softInputHeight is below zero!");
        }
        if (softInputHeight > 0) {
            sp.edit().putInt(SHARE_PREFERENCE_TAG, softInputHeight).apply();
        }
        return softInputHeight;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221

如何使用

1. 创建相应布局（这里放张我的图，可以任性一把，想怎么弄就怎么弄，不想设置扩展布局的话就不要那个+号按钮；表情布局类似）

2. 绑定相应的view

EmotionKeyboard emotionKeyboard = EmotionKeyboard.with(this)
　　　　　　　　　　　　　.setExtendView(extendView)
　　　　　　　　　　　　　.setEmotionView(emotionView)
　　　　　　　　　　　　　.bindToContent(contentView)
　　　　　　　　　　　　　.bindToEditText(edittext)
　　　　　　　　　　　　　.bindToExtendbutton(extendButton)
　　　　　　　　　　　　　.bindToEmotionButton(emotionButton)
　　　　　　　　　　　　　.build();
1
2
3
4
5
6
7
8

用起来还是很简单的哈，若没有扩展布局，则不调用setExtendView与bindToEmotionButton即可

3. 设置表情或扩展视图(完全是自己定义的，可根据业务需求自定义)

• 表情布局的xml
  ViewPager + Fragment + GridView显示表情
  RadioGroup显示提示点

<FrameLayout
        android:id="@+id/emotion_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:visibility="gone"
        tools:layout_height="200dp"
        tools:visibility="visible"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:background="@color/transparent" />

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <RadioGroup
            android:id="@+id/rg_reply_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:layout_marginBottom="30dp"
            android:orientation="horizontal" >
        </RadioGroup>
    </FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

• 扩展布局的xml
  其实和表情xml没啥区别。。。

<FrameLayout
        android:id="@+id/extend_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        tools:layout_height="200dp"
        android:orientation="vertical"
        android:visibility="gone"
        tools:visibility="visible" >

        <Button
            android:id="@+id/btn_replay_layout_pic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/photo"
            android:text="@string/photo"
            android:background="@null"
            android:textColor="@color/dark_gray"
            android:layout_margin="5dp"/>

    </FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• 处理表情视图和扩展视图的代码
  由于我比较懒，这里就不贴了。。。具体代码请参照github上MainActivity的setUpEmotionViewPager()和setUpExtendView()方法，哈哈哈哈哈….

好了，到这里就差不多了，代码后期还要优化，有什么好的建议也可以tell me哈~