Android 漫谈---登录窗口

Android 应用程序登录窗口在常见的微信,淘宝等需要身份校验的应用APP中十分常见，作为一个登录用界面，其主要完成用户输入信息的验证和确认。本文将以登录界面为例，简单开启学习Android之路，后续文章中会继续就一些典型控件和问题讨论，希望持续关注哦。

 

先看看我们最终的目标界面吧(图1),整个界面包括用户信息，登录方式，注册等功能，界面布局主要用到相对布局管理，采用简单,扁平化的设计风格(乍一看还有点那么回事~)：

图 1 登录效果图

前期准备

开发环境 ：android studio 1.5.       Java SDK等   

图片资源：用户图标，锁图标，QQ图标，百度图标(可以在http://www.easyicon.net/ 下载)

新建activity

图 2  建立工程

编辑activity.xml文档

android 程序的界面设计通常有XML 文档形式和布局参数的形式，xml 文档形式布局简单便捷比较适合界面控件样式固定的布局，例如本文的登录界面，布局参数形式的界面编写较为复杂通常结合Java code，适合界面样式在运行时需要更新改变的场合，例如listview 中Item 数目随用户的动态添加而更新的场合。本文采用xml文件实现界面布局。将资源管理视图切换到android,选择其下的res目录，这里保存了项目中常用的字符，图片，颜色等等工程资源。在layout目录下编辑当前的activity.编辑代码见下文的实例代码。

，bi

图3 编辑XML 文件

• 依据图1中的布局编辑控件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.yangchao.loginactivity.MainActivity">
    <RelativeLayout
        android:id="@+id/usernamelayout"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:gravity="center"
            android:id="@+id/frameLayout">
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/username"
                android:layout_marginTop="5dp"
                android:inputType="number"
                android:paddingRight="60dp"
                android:maxLength="20"
                android:paddingLeft="55dp"/>
            <ImageView
                android:layout_width="22dp"
                android:layout_height="21dp"
                android:layout_marginStart="8dp"
                android:layout_gravity="left|center_vertical"
                android:background="@mipmap/user"

                android:visibility="visible"/>
            <TextView
                android:id="@+id/contry"
                android:layout_width="40dp"
                android:layout_height="50dp"
                android:layout_gravity="left|center_vertical"
                android:layout_marginTop="4dp"
                android:gravity="center"
                android:text="Hello"
                android:textColor="@android:color/black"
                android:textSize="18sp"
                android:visibility="invisible" />
            <Button
                android:id="@+id/bt_username_clear"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:layout_gravity="right|center_vertical"
                android:layout_marginRight="10dp"
                android:visibility="invisible"
                />
        </FrameLayout>

        <FrameLayout
            android:id="@+id/usercodelayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_below="@+id/frameLayout">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/username"
                android:layout_marginTop="5dp"
                android:inputType="number"
                android:paddingRight="60dp"
                android:maxLength="20"
                android:paddingLeft="55dp"/>
            <ImageView
                android:layout_width="22dp"
                android:layout_height="21dp"
                android:layout_marginStart="8dp"
                android:layout_gravity="left|center_vertical"
                android:background="@mipmap/lock"

                android:visibility="visible"/>
            <TextView
                android:id="@+id/contry"
                android:layout_width="40dp"
                android:layout_height="50dp"
                android:layout_gravity="left|center_vertical"
                android:layout_marginTop="4dp"
                android:gravity="center"
                android:text="Hello"
                android:textColor="@android:color/black"
                android:textSize="18sp"
                android:visibility="invisible" />
            <Button
                android:id="@+id/username_clear"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:layout_gravity="right|center_vertical"
                android:background="@mipmap/clear"
                android:layout_marginRight="10dp"
                android:visibility="invisible"
                />
        </FrameLayout>
        <Button
            android:id="@+id/login_error"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/usercodelayout"
            android:layout_below="@id/usercodelayout"
            android:background="#00000000"
            android:text="忘记密码"
            android:textSize="16sp" />

        <CheckBox
            android:id="@+id/register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/usercodelayout"
            android:layout_below="@id/usercodelayout"
            android:background="#00000000"
            android:gravity="left|center_vertical"
            android:text="下次自动登录"
            android:textSize="16sp"
            android:visibility="visible" />
        <Button
            android:id="@+id/login"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_below="@id/register"
            android:layout_marginTop="30dp"
            android:background="#ffdc3c00"
            android:textColor="@android:color/white"
            android:gravity="center"
            android:text="登录" /> />

            <TextView
                android:id="@+id/other_account"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/login"
                android:text="第三方方账户登录"
                android:layout_marginTop="30dp"/>
            <Button
                android:id="@+id/qq_button"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:layout_below="@+id/other_account"
                android:background="@mipmap/qq"/>
            <Button
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="10dp"
                android:layout_toRightOf="@+id/qq_button"
                android:layout_below="@+id/other_account"
                android:background="@mipmap/baidu"/>
        <TextView
            android:id="@+id/have_no_accout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="还没有FirstStudy账户?"
            android:layout_below="@+id/qq_button"/>

        <TextView
            android:id="@+id/registerLink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@+id/have_no_accout"
            android:text="@string/blog"
            android:layout_below="@+id/qq_button"/>
    </RelativeLayout>
</RelativeLayout>

• 【代码说明】

本实例中用到了相对布局<RelativeLayout>,主要是方便视图在子视图或者父视图中设置其相对位置。例如实例中的qq_button 和baidu_button通过设置相对other_account 的位置以及它们彼此之间的相对关系实现其位于“第三方账户登录”之下和依此从左到右的排布。界面中相对复杂的布局是<FrameLayout>,比较合适的理解它就是word中常用的canvas(画布)工具,在<FrameLayout>中用户可以随意的添加自己需要的元素（当然需要布局好元素之间的位置关系),然后这个的<FrameLayout> 就可以被想象成一个独立的widget ,你可以通过设计Framelayout 的ID实现其相对其他widget 或者FrameLayout 布局，从而实现复杂的布局结构。

• 【图片资源的添加】

对于长久使用Visual studio（VS） 的人来说，在Android studio 中添加图片资源并没有那么便捷，通常VS 中加入图片资源只需要右键资源，选择导入图片菜单即可完成导入工作。而android studio中并没有类似的命令(目前没有发现哈，有的话请留言，谢谢),最直接的做法是复制需要导入的图片，然后选择图片文件夹，右键粘贴即可，如下：

图 4   添加图片资源

复制资源后Make Project,图片资源的id 既可以在R.Java 中看到，用户可以通过指定id号引用。注意图片文件的格式最好使用PNG,文件名称为小写，不然会编译不过哦。

编译运行

代码工作完成后记build 和在ADV 上调试啦，如下:

图 5 编译工程文件

启动AVD 时注意选择合适的模拟器，主要看模拟器内存大小和尺寸是否和设备兼容

 图 6 虚拟调试

通过AVD即可看到图1中的效果。