Android课程学习：Walker(登录界面)

   通过打招呼案例的完成，对Android课程有了一些了解，但是想要完成像手机上的功能齐全，界面新颖的应用软件，只做几个简单的Android案例是远远不够的，而是需要学习大量大量的Android基础知识，并能够熟练的掌握和运用，这次是一个登录界面的实现，在现在的应用中，用户的登录和注册用的越来越多，所以，下面是一个登录界面的完(以Walker应用为例) ，实现如下界面：

 

  1.首先创建一个安卓项目，关于项目的创建不再细说，创建完成后，开始进行界面的设计，看上图界面可以知道，如果用一个界面实现的话，上半部分(两个输入框+两个按钮)的排布实现起来要比较麻烦一下，还要牵扯到两个按钮的相对位置，以及按钮相对于父容器的位置，由此，我们可以将界面分为两部分来实现，

界面一(只是xml界面，不需Java代码编写)如图：

   1.上半部分top.xml代码为

<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="wrap_content"    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=".TopActivity"     android:background="@drawable/logintopbg">    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"//水平居中        android:layout_marginTop="20dp"//距离顶部20dp        android:orientation="vertical" >        <EditText            android:id="@+id/etname"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:ems="10"            android:hint="@string/etname"            android:background="@android:drawable/edit_text"//为文本框加上框，在点击的文本框中输内容时，表示被选中            android:drawableLeft="@drawable/icons_user_img" >//在文本框的最左边添加一张小图片            <requestFocus />        </EditText>        <EditText            android:id="@+id/editText1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="30dp"            android:ems="10"            android:inputType="textPassword" //文本类型是密码，这样在用户输入内容的时候，显示的是*号            android:hint="@string/etpassword"            android:background="@android:drawable/edit_text"            android:drawableLeft="@drawable/icons_password_img"            />       <LinearLayout        android:id="@+id/linearLayout2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"        android:layout_marginTop="20dp"        android:orientation="horizontal" >           <Button               android:id="@+id/btnlogin"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/btnlogin"                android:layout_weight="1"//两个button组件按照1：1平分空间               android:background="@drawable/btn_select"/>//背景为自己编写的xml代码，下面会有详细代码          <Button               android:id="@+id/btnzhure"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/btnzhure"                android:layout_weight="1"               android:background="@drawable/btn_select"               android:layout_marginLeft="5dp"/>          </LinearLayout>    </LinearLayout></RelativeLayout>           

</pre><pre>

【注】btn_select，btn_shape_before，btn_shape_after都放在drawable里，调用时跟添加图片是一样的，它们的创建是通过:右击drawable---new---android XML File---(选择点击按钮时的可以选择selector,简单的设计一种形状或是颜色就选择shape,起好名字后回车建立完成)

xml代码中牵扯到的btn_select：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:drawable="@drawable/btn_shape_before" android:state_pressed="false"></item>//没有按下去时应用btn_shape_before    <item android:drawable="@drawable/btn_shape_after" android:state_pressed="true"></item>//按下去后应用btn_shape_after</selector></span>

btn_select.xml代码中牵扯到的btn_shape_before和btn_shape_after

btn_shape_before：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <solid android:color="#FF72CAE1"/>    //填充颜色<corners android:radius="10dp"/>    //边角的弯曲程度</shape></span>

btn_shape_after：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <solid android:color="#87cefa"/><corners android:radius="10dp"/></shape></span>

   2.编写整体的activity_login，将编写好的上半部分top.xml包含进去，加上一张monky图片以及“忘记密码”字样即可，代码如下：

<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=".LoginActivity"     android:background="@drawable/btn_shape_before">    <include                       //将activity_top包含进来需要用include组件        android:id="@+id/include1"        layout="@layout/activity_top"/>    <TextView                      //添加“忘记密码”字样        android:id="@+id/forgetpassword"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignRight="@+id/include1"        android:layout_below="@+id/include1"        android:layout_marginTop="27dp"        android:text="@string/forgetpassword"         >        <requestFocus />    </TextView><ImageView                //添加monky图片    android:id="@+id/image1"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_alignLeft="@+id/forgetpassword"    android:layout_alignParentBottom="true"    android:src="@drawable/monkey" /></RelativeLayout>

  到现在为止，代码基本完成，可以通过在模拟器上运行看一下效果。