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

2,019 阅读3分钟
原文链接: blog.csdn.net

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

github地址:github.com/KaneShaw/Em…

效果图

image
image

核心类

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

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. 创建相应布局(这里放张我的图,可以任性一把,想怎么弄就怎么弄,不想设置扩展布局的话就不要那个+号按钮;表情布局类似)
image
image
image

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哈~