android最常见的UI之一，登录遍布各大APP，这么easy的东西还是要写写，主要是介绍下：密码的显示与隐藏，用户名和密码表单的网络请求和提交方式等细节问题。看一个简单的效果：

一，乾言

界面元素，logo，用户名，密码，登录按钮，底部两个按钮，访问有loading效果。
点击登录，获取用户和密码，简单校验，发送网络请求，然后校验请求结果，有异常做响应处理。

二，xml布局，view

布局代码，有点多，直接贴出来。需要的对应改吧改吧。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:background="@drawable/login_bg">

    <!--main content-->
    <LinearLayout
        android:id="@+id/ll_login_body"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_centerVertical="true"
        android:orientation="vertical">
        <!--logo-->
        <ImageView
            android:id="@+id/iv_logo"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="30dp"
            android:src="@drawable/logo_oair" />
        <!--login username-->
        <LinearLayout
            android:id="@+id/ll_login_user"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="@drawable/input_bg"
            android:layout_gravity="center"
            android:orientation="horizontal"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:background="@drawable/icon_user" />

            <EditText
                android:id="@+id/et_username"
                android:layout_width="0dp"
                android:layout_height="40dp"
                android:layout_weight="5"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:singleLine="true"
                android:ellipsize="middle"
                android:background="@android:color/transparent"
                android:text="@string/login_username_default"
                android:editable="false"
                android:textColor="@color/white" />
            <ImageView
                android:id="@+id/iv_show_name"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="2dp"
                android:scaleType="center"
                android:clickable="true"
                android:src="@drawable/icon_down" />
        </LinearLayout>
        <!--login password-->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="@drawable/input_bg"
            android:layout_gravity="center"
            android:orientation="horizontal"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="15dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:background="@drawable/icon_pwd"
                />

            <EditText
                android:id="@+id/et_password"
                android:layout_width="0dp"
                android:layout_height="40dp"
                android:layout_weight="5"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:focusable="true"
                android:inputType="textPassword"
                android:background="@android:color/transparent"
                android:textColor="@color/white" />

            <ImageView
                android:id="@+id/iv_hidden_pwd"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="2dp"
                android:scaleType="center"
                android:clickable="true"
                android:src="@drawable/icon_hidden" />

        </LinearLayout>
        <!--login btn-->
        <Button
            android:id="@+id/btn_login"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="40dp"
            android:text="@string/login_btn"
            android:textSize="20sp"
            android:textColor="@drawable/text_select"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:background="@drawable/btn_login_bg" />

    </LinearLayout>
    <!--bottom btn-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:layout_below="@id/ll_login_body">

        <TextView
            android:id="@+id/tv_login_contactus"
            android:text="@string/login_about"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:textSize="16sp"
            android:padding="10dp"
            android:clickable="true"
            android:textColor="#FFF" />

        <TextView
            android:id="@+id/tv_login_guest"
            android:text="@string/login_guest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:textSize="16sp"
            android:padding="10dp"
            android:clickable="true"
            android:textColor="#FFF" />
    </RelativeLayout>

    <ProgressBar
        android:id="@+id/pb_login"
        style="@style/MyCircleProgressBar"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone"
        android:indeterminateDuration="700"/>
</RelativeLayout>

注册view和事件

findViewById的事情就别自己一个个复制了，使用ButterKnife依赖注入view和事件，类似的框架很多。例如：

    @Bind(R.id.et_username)
    public EditText et_username;
    @Bind(R.id.et_password)
    public EditText et_password;

在onCreate方法中，注入：

 ButterKnife.bind(this);

之前犯过错误，@Bind view需要使用public修饰属性。

Error:(68, 23) 错误: @Bind fields must not be private or static. (com.oair.oair_client.LoginActivity.iv_logo)

三，activity登录逻辑

获取edittext中的value，判断用户名，密码是否为空，如果ok就进行网络请求，post后台登录接口。我用retrofit＋okhttp+RxJava/RxAndroid实现登录，json用内部封装的gson解析。

 @OnClick(R.id.btn_login)
    public void LoginOair(){
        Login();
    }
    //Login 管理员登录
    public void Login() {
        // 点击登录的时候 拿到用户名和密码的值
        username = et_username.getText().toString();
        password = et_password.getText().toString();
        //判断密码是否为空
        if (StringUtils.isEmpty(password)) {
            showDialog(context.getResources().getString(R.string.dialog_pwd_empty));
        } else {
            //验证登录是否成功
            postLogin();
        }
    }
    private void postLogin() {
        pb_login.setVisibility(View.VISIBLE);
        MyRetrofitUtils.init().loginOair(password, new Subscriber<OairResponse>() {
            @Override
            public void onCompleted() {
                pb_login.setVisibility(View.GONE);
            }
            @Override
            public void onError(Throwable e) {
                checkLocalPwd();
                LogUtils.debug(TAG,"error "+e.toString());
                pb_login.setVisibility(View.GONE);
            }
            @Override
            public void onNext(OairResponse oairResponse) {
                LogUtils.debug(TAG,oairResponse.toString());
                if (oairResponse.result == MyConstant.RESULT_SUCCESS){
                    enterMainActivity();
                }else{       showDialog(context.getResources().getString(R.string.dialog_pwd_error));
                }
            }
        });
    }

不会用？可以使用你喜欢的网络访问方式，OKHTTP，HTTPUrlConnection，xUtils，volley都行。或者请看我的另外一篇文章，点击打开：
RxJava＋Retrofit＋Gson实现网络请求

四，隐藏和显示密码

EditText控件本身就封装好了显示与隐藏的方法，可以方便地将文本置为可见，或者隐藏。

 //切换输入密码的模式，明文or密文显示
    private boolean isHidden=true;
    @OnClick(R.id.iv_hidden_pwd)
    public void hiddenPassword() {
        if (isHidden) {
            //设置EditText文本为可见的
            et_password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        } else {
            //设置EditText文本为隐藏的
            et_password.setTransformationMethod(PasswordTransformationMethod.getInstance());
        }
        isHidden = !isHidden;
        et_password.postInvalidate();
        //切换后将EditText光标置于末尾
        CharSequence charSequence = et_password.getText();
        if (charSequence!=null) {
            Spannable spanText = (Spannable) charSequence;
            Selection.setSelection(spanText, charSequence.length());
        }
    }

五，输入法弹出，布局调整

有时候手机频幕小，弹出输入法框，可能会将edittext控件挡住，影响输入。这时候我们可以配置下activity。

 <activity
            android:name="com.xx.client.LoginActivity"
            android:configChanges="keyboardHidden|orientation"
            android:label="@string/title_activity_login"
            android:launchMode="singleTask"
            android:screenOrientation="portrait"
            android:windowSoftInputMode="adjustResize"/>

重点就是android:configChanges和android:windowSoftInputMode的属性，让activity自动调整界面，输入法位于输入框的下方。

六，总结

看似简单的一个功能，细看起来，知识点还是挺多的。这里面还有很多东西没有列出，比如用户名下拉选择一个用户登录，登录保存状态下次免登录，cookie的使用等。
未完待续，欢迎交流，杜乾，Dusan，Q 291902259。