精巧对话框设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/quanjin24k/article/details/38921301

有段时间没有写代码了，布局都不太会写了，好一会儿才写出个像样的dialog。刀不磨要生锈啊。

先上需求跟最终实现的UI看看吧。

需求UI：

实现UI：

看起来是不是很简单，没错，相信各位android看官第一眼看过来肯定觉得这是个分分钟的事情，汗，不过对于好久没认真写代码的我来说，还是费了一番功夫。完整实现出来要处理好多细节的东西；囧。

1. 用dialog；

2.dialog全屏显示，并且有遮罩；

3.edittext的重写，默认圆点，要用星号来显示；

4.edittext内容要居中显示，而且输入内容有长度限制，左侧有间距，输入状态要高亮显示；

好，那一步步的说下：

首先重写一个dialog，oncreate方法中对edittext进行处理；

然后重点处理布局上的edittext，重写其属性，将默认的圆点换成 *号；

edittext间隔左侧20距离，我就在edittext外层套一布局，将edittext本身的背景框隐藏掉；

/**
 * 密码验证框。
 * @author quanjin
 * @created 2014年8月29
 */
public class CheckKeyDialog extends Dialog {

	private Context context;
	
	public CheckKeyDialog(Context context, int style) {
		super(context, R.style.dialog_fullscreen);
		this.context = context;
	}
	
	private EditText edit_pwd;
	private RelativeLayout ll_edit;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		setContentView(R.layout.dialog_pwd_ll);
		
		ll_edit = (RelativeLayout) findViewById(R.id.ll_edit);
		
		edit_pwd = (EditText) findViewById(R.id.edit_pwd);
		edit_pwd.setTransformationMethod(new WordReplacement());
		edit_pwd.setOnFocusChangeListener(new OnFocusChangeListener() {
			@Override
			public void onFocusChange(View v, boolean hasFocus) {
				if(hasFocus) {
					ll_edit.setBackgroundResource(R.drawable.dialog_pwd_edittext_focus_bg);
				} else {
					ll_edit.setBackgroundResource(R.drawable.dialog_pwd_editext_no_focus_bg);
				}
			}
		});
	}

}

看看dialog布局，根据布局资源来一步步列出自己写的内容；因为是定制机，因此所有尺寸都用的px，一般不建议用呵；

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="1920px"
    android:layout_height="1080px"
    android:background="@drawable/dialog_pwd_mask_bg" >

    <RelativeLayout
        android:layout_width="770px"
        android:layout_height="480px"
        android:layout_centerInParent="true"
        android:background="@drawable/dialog_pwd_bg" >

        <RelativeLayout
            android:id="@+id/dialog_pwd_title_ll"
            android:layout_width="match_parent"
            android:layout_height="60px" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="TP-LINK_70D62E"
                android:textSize="30sp" />
        </RelativeLayout>

        <TextView
            android:id="@+id/tv_pwd_input_tips"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/dialog_pwd_title_ll"
            android:layout_marginLeft="60px"
            android:layout_marginTop="45px"
            android:text="请输入密码 :"
            android:textColor="#ffffff"
            android:textSize="30sp" />

        <RelativeLayout
            android:id="@+id/ll_edit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv_pwd_input_tips"
            android:layout_marginLeft="30px"
            android:layout_marginRight="30px"
            android:background="@drawable/dialog_pwd_edittext_focus_bg" >

            <EditText
                android:id="@+id/edit_pwd"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20px"
                android:paddingTop="15px"
                android:background="@null"
                android:inputType="numberPassword"
                android:textColor="#ffffff"
                android:textCursorDrawable="@null"
                android:textSize="36sp" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/ll_btn_yes_no"
            android:layout_width="match_parent"
            android:layout_height="160px"
            android:layout_marginTop="10px"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="20px" >

            <Button
                android:id="@+id/btn_connect_pwd"
                android:layout_width="300px"
                android:layout_height="170px"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="50dp"
                
                android:background="@drawable/btn_selector"
                android:text="@string/connect"
                android:textColor="@color/white"
                android:textSize="30sp" />

            <Button
                android:id="@+id/btn_cancel_pwd"
                android:layout_width="300px"
                android:layout_height="170px"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@+id/btn_connect_pwd"
                android:background="@drawable/btn_selector"
                android:text="@string/cancel"
                android:textColor="@color/white"
                android:textSize="30sp" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

把edittext单独拿出来看看：隐藏edittext背景框的就是background 和 textCursorDrawable属性。

<EditText
                android:id="@+id/edit_pwd"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20px"
                android:paddingTop="15px"
                android:background="@null"
                android:inputType="numberPassword"
                android:textColor="#ffffff"
                android:textCursorDrawable="@null"
                android:textSize="36sp" />

然后为了让edittext显示星号，而不是默认圆点，我们要做的事情是：见注释

/**
 * 输入框带星号。
 * @author quanjin
 * @created 2014年8月29
 */
public class WordReplacement extends ReplacementTransformationMethod {

	String strWord = null;  
	  
    @Override  
    protected char[] getOriginal() {  
        //循环ASCII值 字符串形式累加到String  
        for (char i = 0; i < 256; i++) {    
            strWord += String.valueOf(i);  
        }  
        //strWord转换为字符形式的数组  
        char[] charOriginal = strWord.toCharArray();  
        return charOriginal;  
    }  
  
    @Override  
    protected char[] getReplacement() {  
        char[] charReplacement = new char[255];  
        //输入的字符在ASCII范围内，将其转换为*  
        for (int i = 0; i < 255; i++) {  
            charReplacement[i] = '*';  
        }  
        return charReplacement;  
    }  

}

然后对上文的CheckKeyDialog中的edittext进行属性更改：

edit_pwd.setTransformationMethod(new WordReplacement());

还有个问题就是输入文本相对左侧有一定间隔：

edittext外面有一层布局，背景就是edittext的背景， 对edittext本身进行背景隐藏，然后左间距设置成20就OK。

有问题留言商讨吧，实现一个精致的东西需要完善很多小细节呵、毕竟要精益求精嘛。

实现一个密码验证输入框