App开发《知亦学》之--编写登录界面

App开发《知亦学》之–编写登录界面

最近开发了一款App，取名叫《知亦学》，独立开发这款App还是学到了不少东西，现在也基本开发完毕了，暂时没有重构代码，准备接下来重构，登录界面基本不需要重构，所以就先在博客上写这么一篇了，先上登录界面截图吧：

这是一个MD风格的登录界面，那么如何实现那？
先直接上代码

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/backg_color"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="@color/login_app_bar_bg"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">
            <!--由于CollapsingToolbarLayout 的 特点，应用的标题文字在收缩和展开状态是会自动过渡的。如果你想要在展开状态改变标题文字的位置，
            你可以这样做：通过应用的 margin 的4个属性，
            就是：app:expandedTitleMargin, app:expandedTitleMarginBottom, app:expandedTitleMarginEnd 以及 app:expandedTitleMarginStart
            或者如果你想要在折叠和展开状态时改变文本的显示。你可以这样来简单的实现：
            设置 TextAppearance，分别通过 app:collapsedTitleTextAppearance 和 app:expandedTitleTextAppearance 来设置。-->
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleTextAppearance="@style/textToolbarTitle"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="用户登录"
                        android:textColor="@color/white"
                        android:textSize="18dp" />
                </android.support.v7.widget.Toolbar>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:layout_marginTop="84dp"
                    android:padding="4dp"
                    android:text="登录您的“教务处账号”"
                    android:textColor="@color/white"
                    android:textSize="14sp" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="12dp"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:padding="8dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="horizontal">

                <CheckBox
                    android:id="@+id/choose_user_protocol_check_box"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:enabled="false" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/friendly_reminder"
                    android:textSize="14sp" />

                <TextView
                    android:id="@+id/protocol_text_view"
                    style="@style/text_style_blue"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/user_protocol" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="bottom">

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

                <LinearLayout
                    style="@style/general_item_layout_alone_unclick"
                    android:layout_width="fill_parent"
                    android:layout_height="44dp"
                    android:layout_marginTop="12dp"
                    android:paddingRight="16dp">

                    <ImageView
                        android:id="@+id/imageView"
                        android:layout_width="50dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:src="@mipmap/ic_login_account" />

                    <EditText
                        android:id="@+id/account_edit_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:background="@color/lucency_white"
                        android:hint="@string/account"
                        android:inputType="number"
                        android:maxLength="10"
                        android:textColor="#ff333333"
                        android:textColorHint="#ff999999"
                        android:textSize="16.0dip" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="44dp"
                    android:background="@drawable/list_item_middle_selector"
                    android:paddingRight="15dp">

                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:src="@mipmap/ic_login_password" />

                    <EditText
                        android:id="@+id/password_edit_text"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="1"
                        android:background="@color/lucency_white"
                        android:hint="@string/password"
                        android:inputType="textPassword"
                        android:textColor="#ff333333"
                        android:textColorHint="#ff999999"
                        android:textSize="16sp" />

                    <ImageView
                        android:id="@+id/show_password_toggle_image_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical|center_horizontal"
                        android:src="@mipmap/ic_show_password"></ImageView>
                </LinearLayout>

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="44dp"
                    android:background="@drawable/list_item_middle_selector"
                    android:paddingRight="15dp">

                    <ImageView
                        android:id="@+id/identifying_image_image_view"
                        android:layout_width="96dp"
                        android:layout_height="36dp"
                        android:layout_gravity="center_vertical"
                        android:layout_marginLeft="16dp"
                        android:layout_marginRight="15dp"
                        android:scaleType="fitXY" />

                    <EditText
                        android:id="@+id/identifying_image_edit_text"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="1"
                        android:background="@color/lucency_white"
                        android:hint="验证码"
                        android:inputType="number"
                        android:maxLength="4"
                        android:textColor="#ff333333"
                        android:textColorHint="#ff999999"
                        android:textSize="16sp" />
                </LinearLayout>

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/login_button"
                    style="@style/general_green_btn"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="12dp"
                    android:layout_marginRight="12dp"
                    android:layout_marginTop="12dp"
                    android:text="登录"></android.support.v7.widget.AppCompatButton>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="12dp"
                    android:layout_marginLeft="16dp"
                    android:layout_marginRight="16dp"
                    android:layout_marginTop="12dp"
                    android:gravity="center">

                    <CheckBox
                        android:id="@+id/remember_password_check_box"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:text="@string/remember_password" />

                    <TextView
                        android:id="@+id/forget_password_text_view"
                        style="@style/text_style_blue"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:padding="6dp"
                        android:text="@string/forget_password" />
                </RelativeLayout>
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </android.support.design.widget.CoordinatorLayout>

代码不难理解，就不作分析了，今天有点累，明天接着写吧。明天深入分析。