EmailEditView的实现(仿知乎邮箱登录效果)

实现的效果如下：

当用户输入‘@’之后，根据邮箱前缀自动填充后面的内容。

基本原理：

其实就是两个EditView叠加在一起，前后的EditView颜色值不同，其他的所有属性设置都相同。

代码如下：

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.FrameLayout;public class EmailTextView extends FrameLayout implements TextWatcher {private EditText mBgText;private EditText mFrontText;private CharSequence mHintText = "";private int mFirstAtIndex;private String EMAILS[] = {"qq.com", "126.com", "gmail.com","hotmail.com", "163.com", "yahoo.com", "yahoo.com.cn", "sina.com","sohu.com", "fenqile.com", "yeah.net", "foxmail.com", "icloud.com","live.com", "msn.com", "outlook.com", "tom.com", "vip.qq.com","zhihu.com", "sogou.com"};private AttributeSet mAttrs;public EmailTextView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);this.mAttrs = attrs;init();}public EmailTextView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public EmailTextView(Context context) {super(context);init();}private TextWatcher mTextWatcher;private void init() {setPadding(0, 0, 0, 0);mBgText = new EditText(getContext(), mAttrs);mBgText.setEnabled(false);mBgText.setCursorVisible(false);mBgText.setFocusable(false);mBgText.setFocusableInTouchMode(false);mFrontText = new EditText(getContext(), mAttrs);mFrontText.setBackgroundColor(0x00000000);addView(mBgText);addView(mFrontText);mFrontText.addTextChangedListener(this);mFrontText.setOnFocusChangeListener(new OnFocusChangeListener() {@Overridepublic void onFocusChange(View v, boolean hasFocus) {String bgText = mBgText.getText().toString();if (!hasFocus) {if (bgText.equals(mHintText)) {mFrontText.setText("");} else {mFrontText.setText(mBgText.getText().toString());}}}});mFrontText.setImeOptions(EditorInfo.IME_ACTION_NEXT);requestFocus();mFrontText.requestFocus();}public void setHintTextColor(int color) {mBgText.setTextColor(color);}public void setTextColor(int color) {mFrontText.setTextColor(color);}public void setHintText(CharSequence s) {this.mHintText = s;if (mBgText.getText().length() == 0) {mBgText.setText(s);}}/*** Change the editor type integer associated with the text view, which will* be reported to an IME with {@link EditorInfo#imeOptions} when it has* focus.** @see android.view.inputmethod.EditorInfo*/public void setImeOptions(int imeOptions) {mFrontText.setImeOptions(imeOptions);}@Overridepublic void beforeTextChanged(CharSequence s, int start, int count,int after) {if (mTextWatcher != null) {mTextWatcher.beforeTextChanged(s, start, count, after);}}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {if (s.length() == 0) {mBgText.setText(mHintText);} else {String str = s.toString();mFirstAtIndex = str.indexOf("@");if (mFirstAtIndex < 0) {mBgText.setText(s + "@" + EMAILS[0]);} else {mBgText.setText(s.subSequence(0, mFirstAtIndex + 1)+ findEmailSuffix(str.substring(mFirstAtIndex + 1)));}}if (mTextWatcher != null) {mTextWatcher.onTextChanged(s, start, before, count);}}@Overridepublic void afterTextChanged(Editable s) {if (mTextWatcher != null) {mTextWatcher.afterTextChanged(s);}}public String findEmailSuffix(String start) {for (String str : EMAILS) {if (str.startsWith(start)) {return str;}}return start;}public Editable getText() {return mFrontText.getText();}public void setText(CharSequence cs) {mBgText.setText(cs);mFrontText.setText(cs);}public void addTextChangedListener(TextWatcher tw) {this.mTextWatcher = tw;}public void setTextSize(int sp) {mFrontText.setTextSize(TypedValue.COMPLEX_UNIT_SP, sp);mBgText.setTextSize(TypedValue.COMPLEX_UNIT_SP, sp);}public boolean requestFocused() {boolean b = requestFocus();mFrontText.requestFocus();return b;}
}

该组件可以直接在XML里使用，当它是EditView就是了。

EmailEditView的实现(仿知乎邮箱登录效果)相关推荐

仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...
PHP仿百度实现弹窗登录效果,js仿百度登录页实现拖动窗口效果
在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动:那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了:首当其冲的,要涉及到鼠标 ...
canvasnest 移动距离_GitHub - XiaoxinJiang/canvas-nest: 仿知乎登录页面canvas-nest
canvas-nest 仿知乎登录页面canvas-nest 首先上效果图: 因为使用gif图片的原因,线条不是很清晰,大家可以到我的博客观看效果:http://cherryblog.site/ ,( ...
android采用MVP完整漫画APP、钉钉地图效果、功能完善的音乐播放器、仿QQ动态登录效果、触手app主页等源码...
Android精选源码一个可以上拉下滑的Ui效果,觉得好看可以学学 APP登陆页面适配一款采用MVP的的完整漫画APP源码 android实现钉钉地图效果源码一个使用单个文字生成壁纸图片的app ...
android采用MVP完整漫画APP、钉钉地图效果、功能完善的音乐播放器、仿QQ动态登录效果、触手app主页等源码
Android精选源码一个可以上拉下滑的Ui效果,觉得好看可以学学 APP登陆页面适配一款采用MVP的的完整漫画APP源码 android实现钉钉地图效果源码一个使用单个文字生成壁纸图片的app ...
JS面向对象（仿邮箱登录提示框）
最近在好好的研究JS,通过一个仿邮箱登录提示框的案例加深下对面向对象的理解!啥都别说,先上图: 功能:实现正则匹配显示相符的内容.键盘事件.鼠标事件简单布局: <div id="lo ...
android 邮箱知乎,仿知乎登陆邮箱自动补全，邮箱补全
仿知乎登陆邮箱自动补全,邮箱补全项目要求: 登陆界面输入邮箱,自动匹配常用邮箱并自动补全后缀. 比如邮箱为10376129@qq.com,当我输入10376129@q时,输入框自动补全后面的q.co ...
koa2 仿知乎笔记
Koa2 仿知乎笔记路由普通路由 const Router = require("koa-router") const router = new Router()router. ...
Koa 2 基础(仿知乎)
Koa 2 基础接口文档 Postman仿知乎在线测试 REST 简介 REST是什么 REST是Resource Representational State Transfer的缩写,是一种Web ...

EmailEditView的实现(仿知乎邮箱登录效果)

EmailEditView的实现(仿知乎邮箱登录效果)相关推荐

最新文章

热门文章