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

来源:互联网 发布:怎么改淘宝的支付宝 编辑:程序博客网 时间:2024/05/21 03:18

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>

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