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

2019-11-09 16:08:50

字体：大中小

来源：转载

供稿：网友

因公司业务要求，需要做一款类似微信聊天的页面，最主要的是表情输入和拍照、选图上传，因此仿照大神(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. 绑定相应的view

EmotionKeyboard emotionKeyboard = EmotionKeyboard.with(this)　　　　　　　　　　　　　.setExtendView(extendView)　　　　　　　　　　　　　.setEmotionView(emotionView)　　　　　　　　　　　　　.bindToContent(contentView)　　　　　　　　　　　　　.bindToEditText(edittext)　　　　　　　　　　　　　.bindToExtendbutton(extendButton)　　　　　　　　　　　　　.bindToEmotionButton(emotionButton)　　　　　　　　　　　　　.build();

用起来还是很简单的哈，若没有扩展布局，则不调用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>扩展布局的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>处理表情视图和扩展视图的代码由于我比较懒，这里就不贴了。。。具体代码请参照github上MainActivity的setUpEmotionViewPager()和setUpExtendView()方法，哈哈哈哈哈….

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

上一篇：android 设置进入全屏,取消全屏的几种方式

下一篇：Android7.1勿扰功能简析