项目实战:优雅的实现专车意见反馈

今天我们拆解一下专车的意见反馈,涉及到TextWatcher监听、特殊字符过滤Pattern等知识点和hideInputMethod收键盘、setEnabled按钮使能、shape圆角矩形、maxLength最大长度、hint默认提示、String.format优化效率等细节,如图是我们开发时的标注图,聚焦到每一像素,对UI敏感,练就一双火眼金睛···


项目实战:优雅的实现专车意见反馈_第1张图片
意见反馈标注图.png

现在我们一一拆解这些细节和知识点,绝不仅仅是输入提交看上去这么简单。
交互层面
1.通过TextWatcher监听,
1.1在onTextChanged中处理,无内容时按钮置灰,有内容时按钮高亮;
1.2在afterTextChanged中处理,提示用户还可输入的字数;
2.在onClick中处理点击事件,点击提交按钮后,进行下一步操作:
2.1通过正则和String API过滤特殊字符,防止注入攻击;
2.2将意见通过网络传回后台;
2.2.1如果网络请求成功
Toast提示“提交成功”--》通过系统服务InputMethodManager收键盘--》finish()关闭当前页面,回到上一页面
2.2.2如果网络请求失败
Toast提示“提交失败”--》保留键盘并停在当前页面
视觉层面
UI设计师专业把控+前端工程师经验直觉,从整体到局部,一个个像素、一个个样式的推敲。
拆解输入框,不仅仅是一个输入框。
如图,最外层一个圆角矩形样式,垂直分布的LinearLayout,里面包着一个EditText输入框和一个TextView动态显示字数。

项目实战:优雅的实现专车意见反馈_第2张图片
输入框结构.png

安全层面
通过Pattern进行特殊字符过滤,防止注入攻击做好安全防范。

Coding实战
1.通过TextWatcher监听,为EditText输入框添加监听事件。

        mContentEt.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void afterTextChanged(Editable s) {
            }
        });

1.1在onTextChanged中处理,无内容时按钮置灰,有内容时按钮高亮;

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (TextUtils.isEmpty(mContentEt.getText().toString())) {
                    mCommitTv.setEnabled(false);
                } else {
                    mCommitTv.setEnabled(true);
                }
            }

1.2在afterTextChanged中处理,提示用户还可输入的字数;
1.3在afterTextChanged中处理,字数到达上限后进行拦截并给出提示。

            @Override
            public void afterTextChanged(Editable s) {
                int length = mContentEt.getText().length();
                if (length > MAXNUM) {
                    Toast.makeText(mContext, getString(R.string.input_feedback_content_long), Toast.LENGTH_SHORT).show();
                    String text = mContentEt.getText().toString()
                            .substring(0, MAXNUM - 1);
                    mContentEt.setText(text);
                    length = MAXNUM;
                }
                int left = MAXNUM - length;
                mWatchWordsTv.setText(String.format(getResources().getString(R.string.default_feedback_words), Integer.toString(left)));
            }

2.在onClick中处理点击事件,点击提交按钮后,进行下一步操作:

    @Override
    public void onClick(View v) {
        super.onClick(v);
        switch (v.getId()) {
            case R.id.commit_tv_feedback:
                ~~~
            default:
                break;
        }
    }

2.1通过正则和String API过滤特殊字符,防止注入攻击;

    /**
     * 过滤特殊字符
     */
    public static String stringFilter(String str) {
        if (TextUtils.isEmpty(str)) {
            return "";
        }
        String regEx = "[<>'\"]";
        str = str.replaceAll(" ", "").replaceAll("&", "")
                .replaceAll("#160;", "").replaceAll("<", "")
                .replaceAll(">", "").replaceAll(""", "")
                .replaceAll("<", "").replaceAll(">", "")
                .replaceAll("&", "").replaceAll(""", "");
        Pattern p = Pattern.compile(regEx);
        Matcher m = p.matcher(str);
        return m.replaceAll("").trim();
    }

2.2将意见通过网络传回后台;
以后专门拿一篇文章讲Volley,在这不做实现。

2.2.1如果网络请求成功
Toast提示“提交成功”--》通过系统服务InputMethodManager收键盘--》finish()关闭当前页面,回到上一页面

                Toast.makeText(mContext, getString(R.string.feedback_success), Toast.LENGTH_SHORT).show();
                hideInputMethod();
                finish();

    /**
     * 隐藏软键盘
     */
    public void hideInputMethod() {
        InputMethodManager imm = (InputMethodManager) mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
        if (imm != null && this.getCurrentFocus() != null) {
            imm.hideSoftInputFromWindow(this.getCurrentFocus().getWindowToken(), 0);
        }
    }

2.2.2如果网络请求失败
Toast提示“提交失败”--》保留键盘并停在当前页面

至此,主流程拆解完毕。
关于shape圆角矩形、maxLength最大长度、hint默认提示、String.format优化效率等细节可以参考源码,在此不一一展开了。

最后效果如图,画面有点不流畅,大家最好自己动手试试哈。


项目实战:优雅的实现专车意见反馈_第3张图片
意见反馈流程.gif

原创不易,转载请注明出处哈。
权兴权意
产品可以更优雅~

项目源代码,欢迎提建议(Star和Fork)。
项目实战:优雅的实现专车意见反馈 · HXQWill/QuanStudy@f489374 https://github.com/HXQWill/QuanStudy/commit/f489374d0e3f7ad3e0b9b2831f63ab96bec9d7ea

你可能感兴趣的:(项目实战:优雅的实现专车意见反馈)