登陆框 UI

2015/6/23 posted in  Android

实现功能

1.账号自动登陆
2.输入密码时,有全清按钮
3.账号输入失败 > N次,要求用户输入验证码验证

布局文件

登陆核心区域主要由以下几个部分
1.账号
2.密码
3.验证码
4.登陆按钮


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!--应用图标-->
    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:background="@drawable/ic_launcher" />

    <!--中间空-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="16dp">

    </LinearLayout>
    <!--账号栏-->
    <LinearLayout
        android:paddingBottom="8dp"
        android:paddingTop="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_search_edit_text"
        android:orientation="horizontal">

        <!--账号图片-->
        <ImageView
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/img_login_account" />

        <EditText
            android:id="@+id/et_login_username"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/transparent"
            android:layout_weight="1"
            android:hint="@string/prompt_username"
            android:inputType="text"
            android:maxLines="1"
            android:singleLine="true" />

        <!--消除输入图片-->
        <ImageView
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:id="@+id/img_account_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/img_login_clear"
            android:visibility="gone"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="16dp">

    </LinearLayout>

    <!--密码栏-->
    <LinearLayout
        android:paddingBottom="8dp"
        android:paddingTop="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_search_edit_text"
        android:orientation="horizontal">

        <ImageView
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/img_login_code" />

        <EditText
            android:id="@+id/et_login_password"
            android:background="@color/transparent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="@string/prompt_password"
            android:imeActionId="@+id/action_login"
            android:imeActionLabel="@string/action_sign_in"
            android:imeOptions="actionUnspecified"
            android:inputType="textPassword"
            android:maxLines="1"
            android:singleLine="true" />

        <ImageView
            android:id="@+id/img_code_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/img_login_clear"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:visibility="gone"/>

    </LinearLayout>

android:inputType="textPassword" 输入密码的显示***
android:singleLine="true"设置为单行模式

主程序

消除图片设置为隐藏,当edittest有数据时再显示

输入框监听

    mUsername.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) {
        String content = mUsername.getText().toString();
        if (!TextUtils.isEmpty(content)) {
            mAccountClear.setVisibility(View.VISIBLE);
            mUsername.setSelection(content.length());
        } else {
            mAccountClear.setVisibility(View.GONE);
        }
    }
});

mPassword.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) {
        String content = mPassword.getText().toString();
        if (!TextUtils.isEmpty(content)) {
            mCodeClear.setVisibility(View.VISIBLE);
            mPassword.setSelection(content.length());
        } else {
            mCodeClear.setVisibility(View.GONE);
        }

    }
});

消除按键监听

@OnClick(R.id.img_account_clear)
    void claerAccout(){
        if (null != mUsername) {
            mUsername.setText("");
        }
    }


@OnClick(R.id.img_code_clear)
void claerCode(){
    if (null != mPassword) {
        mPassword.setText("");
    }
}

登陆按钮监听

主要实现以下功能
1.判断用户名、密码是否为空,若为空,提示用户。
2.判断需不需要输入验证码,若需要显示验证码edittext和验证码图片
3.登陆。更新UI显示登录中

checkbox监听

若勾选,获取存储的账号密码,登陆