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"
and
4000
roid:layout_alignLeft="@+id/forgetpassword"
android:layout_alignParentBottom="true"
android:src="@drawable/monkey" />

</RelativeLayout>

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