仿知乎登陆邮箱自动补全

项目要求:

登陆界面输入邮箱,自动匹配常用邮箱并自动补全后缀。

比如邮箱为[email protected],当我输入[email protected]时,输入框自动补全后面的q.com且颜色为灰浅色,输入框失去焦点时,补全q.com颜色变为黑色,和前面[email protected]的颜色一致。

解决:

1.通过查看知乎的布局,发现没有用自定义控件,仅仅用了普通的EditText。

2.查看EditTex(继承TextView)t的API,最终想到了用下面这个方法

void android.widget.TextView.setCompoundDrawables(Drawable left,
Drawable top, Drawable right, Drawable bottom)

通过绘制EditText右边的Drawable来显示需要自动补全的字符串

3.演示

4.关键代码

package com.lt.autoemailactivity;

import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.view.View.OnFocusChangeListener;
import android.widget.EditText;

public class AutoCompleteEditTextActivity extends Activity implements
		TextWatcher {

	/**
	 * 邮箱EditText
	 */
	private EditText mEmailEditText;
	/**
	 * 常用的邮箱
	 */
	private HashMap<String, String> mAutoData = new HashMap<String, String>();

	/**
	 * 邮箱editText的高度
	 */
	private int mHeight;

	/**
	 * 邮箱editText的宽度
	 */
	private int mWidth;

	/**
	 * 输入框中字符的baseLine
	 */
	private int baseLine;

	/**
	 * 画笔
	 */
	private Paint mPaint;

	private Bitmap mBitmap;

	/**
	 * 画布
	 */
	private Canvas canvas;

	private Drawable drawable;

	/**
	 * 后缀字符串
	 */
	private String mAddedText = "";

	/**
	 * 记录是否为空
	 */
	private boolean mFlag;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_auto_complete_edittext);

		initEmail();
		mEmailEditText = (EditText) findViewById(R.id.email);
		mEmailEditText.addTextChangedListener(this);
		mEmailEditText.setOnFocusChangeListener(new OnFocusChangeListener() {

			@Override
			public void onFocusChange(View v, boolean hasFocus) {
				if (!hasFocus) {
					mEmailEditText.append(mAddedText);
				}
			}
		});
	}

	@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) {
		String text = s.toString();
		mFlag = true;
		Iterator<Map.Entry<String, String>> iterator = mAutoData.entrySet()
				.iterator();
		// 遍历常用邮箱
		while (iterator.hasNext()) {
			Map.Entry<String, String> entry = iterator.next();
			if (text.endsWith(entry.getKey())) {
				drawAddedText(entry.getValue());
				mAddedText = entry.getValue();
				mFlag = false;
				break;
			}
		}

		// 如果没有匹配,就画一个空
		if (mFlag) {
			drawAddedText("");
			mAddedText = "";
		}
	}

	/**
	 * 画出后缀字符串
	 *
	 * @param addedText
	 */
	private void drawAddedText(String addedText) {
		// 如果字符串为空,画空
		if (addedText.equals("")) {
			mEmailEditText.setCompoundDrawables(null, null, null, null);
			return;
		}
		// 只需要初始化一次
		if (mBitmap == null) {
			mHeight = mEmailEditText.getHeight();
			mWidth = mEmailEditText.getWidth();

			// 初始化画笔
			mPaint = new Paint();
			mPaint.setColor(Color.GRAY);
			mPaint.setAntiAlias(true);// 去除锯齿
			mPaint.setFilterBitmap(true);// 对位图进行滤波处理
			mPaint.setTextSize(mEmailEditText.getTextSize());

		}

		// 计算baseLine
		Rect rect = new Rect();
		int baseLineLocation = mEmailEditText.getLineBounds(0, rect);
		baseLine = baseLineLocation - rect.top;

		// 添加的字符窜的长度
		int addedTextWidth = (int) (mPaint.measureText(addedText) + 1);

		// 创建bitmap
		mBitmap = Bitmap.createBitmap(addedTextWidth, mHeight,
				Bitmap.Config.ARGB_8888);
		canvas = new Canvas(mBitmap);

		// 绘制后缀字符串
		canvas.drawText(addedText, 0, baseLine, mPaint);
		// bitmap转化为Drawable
		drawable = new BitmapDrawable(mBitmap);

		String text = mEmailEditText.getText().toString();
		// 计算后缀字符串在输入框中的位置
		int addedTextLeft = (int) (mPaint.measureText(text) - mWidth + addedTextWidth);
		int addedTextRight = addedTextLeft + addedTextWidth;
		int addedTextTop = 0;
		int addedTextBottom = addedTextTop + mHeight;
		// 设置后缀字符串位置
		drawable.setBounds(addedTextLeft, addedTextTop, addedTextRight,
				addedTextBottom);
		// 显示后缀字符串
		mEmailEditText.setCompoundDrawables(null, null, drawable, null);
	}

	/**
	 * 初始化常用的邮箱
	 */
	private void initEmail() {
		mAutoData.put("@q", "q.com");
		mAutoData.put("@qq", ".com");
		mAutoData.put("@qq.", "com");
		mAutoData.put("@qq.c", "om");
		mAutoData.put("@qq.co", "m");
		mAutoData.put("@1", "63.com");
		mAutoData.put("@16", "3.com");
		mAutoData.put("@163", ".com");
		mAutoData.put("@163.", "com");
		mAutoData.put("@163.c", "om");
		mAutoData.put("@163.co", "m");
		mAutoData.put("@s", "ina.cn");
		mAutoData.put("@si", "na.cn");
		mAutoData.put("@sin", "a.cn");
		mAutoData.put("@sina", ".cn");
		mAutoData.put("@sina.", "cn");
		mAutoData.put("@sina.c", "n");
		mAutoData.put("@s", "ina.com");
		mAutoData.put("@si", "na.com");
		mAutoData.put("@sin", "a.com");
		mAutoData.put("@sina", ".com");
		mAutoData.put("@sina.", "com");
		mAutoData.put("@sina.c", "om");
		mAutoData.put("@sina.co", "m");
		mAutoData.put("@1", "26.com");
		mAutoData.put("@12", "6.com");
		mAutoData.put("@126", ".com");
		mAutoData.put("@126.", "com");
		mAutoData.put("@126.c", "om");
		mAutoData.put("@126.co", "m");
	}

}

5.源码下载(有注释)

http://download.csdn.net/detail/a15501628162/8412245

时间: 2024-10-30 01:43:55

仿知乎登陆邮箱自动补全的相关文章

知问前端——邮箱自动补全

本节课,我们通过自动补全source属性的function回调函数,来动态的设置我们的数据源,以达到可以实现邮箱补全功能. 数据源function 自动补全UI的source不但可以是数组,也可以是function回调函数,提供了自带的两个参数设置动态的数据源. $('#email').autocomplete({ source : function (request, response) { //获取用户输入的内容 alert(request.term); //可以获取你输入的值 //绑定数据

jquey ui 实现注册,邮箱自动补全

//----------------------------------------------------------------------------------------------- //----------------------------------------------------------------------------------------------- //静态页面 <!DOCTYPE html> <html> <head> <

jquery邮箱自动补全

在使用前需要有如下文件: jquery-1.7.1.min.js jquery.mailAutoComplete-3.1.js 大家可以到网上下载: [jquery.mailAutoComplete-3.1.js]的请到这里下载:  http://download.csdn.net/detail/xiaolinzai888/7794939 [jquery-1.7.1.min.js]可以到jquery官网下载 页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

jquery UI邮箱自动补全

<1> 自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. <html> <head> <title></title> <script src="js/jquery-1.11.2.js"></script> <script src="js/jquery-ui.js"><

jQuery邮箱自动补全代码

JScript 代码   复制 (function($){ $.fn.emailMatch= function(settings){ var defaultSettings = { emailTip:"请输入邮箱地址", aEmail: ["163.com", "qq.com", "gmail.com", "126.com", "hotmail.com", "yahoo.com

邮箱自动补全

百度网盘地址:http://pan.baidu.com/s/1yIM8e

知问前端——自动补全UI

自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host }); 修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式,我们通过Firebug想获取到

JS实现在输入框内输入@时,邮箱账号自动补全

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>邮箱自动补全</title> <style type="text/css"> .wrap{width:200px;margin:0 auto;} h1{font-size:36px;text-align:center;lin

javascript 邮箱输入自动补全插件(转)

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>inputSuggest_0.1.js</title> <style type="text/css"> body{margin:0;padding:0;} input{width:200px;} .suggest-container{border:1px solid