基本登录页面的实现
1.简单的自我介绍
我是一名计算机系的大二学生,这个学期刚刚接触Adriod,我们的老师希望我们用写博客的方式记录下自己的学习过程及成果,我也觉得这是个很好的方式让我们理解的更加深入。在这里,我将按照我自己的理解将老师所教的编程知识记录下来。如有学术不精的地方,敬请指教。
2.Andriod基本登录页面的介绍
大家看上面这张图片,登录页面基本由两部分组成,一部分为有点发白的登录框,一部分淡蓝色的背景。这其实是一个布局包裹一个布局所呈现出来的效果。即一个activity_login.xml文件包裹一个login_top.xml文件所呈现出来的(使用<include/>标签)。
3.login_top.xml文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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"
android:background="@drawable/logintopbg_roundcorner"
>
<EditText
android:id="@+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@android:drawable/edit_text"
android:drawableLeft="@drawable/etname"
android:drawablePadding="10dp"
android:ems="10"
android:hint="@string/etName" >
</EditText>
<EditText
android:id="@+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/etName"
android:layout_below="@+id/etName"
android:background="@android:drawable/edit_text"
android:drawableLeft="@drawable/etpassword"
android:drawablePadding="10dp"
android:layout_marginTop="20dp"
android:ems="10"
android:hint="@string/etPassword"
android:inputType="textPassword"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/etPassword"
android:layout_below="@+id/etPassword"
android:layout_marginTop="5dp"
>
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btnLogin"
android:background="@drawable/btn_select"
android:layout_weight="1" />
<Button
android:id="@+id/btnRegist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btnRegist2"
android:background="@drawable/btn_select"
android:layout_weight="1"
android:layout_marginLeft="5dp"
/>
</LinearLayout>
<p style="font-size: 18px;"></RelativeLayout></p>
(1)基本是一些易懂的代码,其中
android:background="@android:drawable/edit_text"
用的是系统定义好的背景。
(2)两个Button按钮使用的是线性布局。
4.activity_login.xml文件(呈现出来则为第一张图片)
<span style="font-size:24px;"><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:background="@color/lightblue"
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" >
<include android:id="@+id/ic1"
layout="@layout/login_top1"/>
<TextView
android:id="@+id/tvForgetPass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@id/ic1"
android:layout_below="@+id/ic1"
android:layout_marginTop="32dp"
android:layout_marginRight="16dp"
android:text="@string/tvForgetPass"
android:textAppearance="?android:attr/textAppearanceButton"
/>
</span><span style="font-size:18px;">
</span><span style="font-size: 18px;"><ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/tvForgetPass"
android:layout_alignRight="@+id/ic1"
android:layout_marginBottom="20dp"
android:src="@drawable/monkey" />
</RelativeLayout></span>
5.Ending Talk
谢谢阅读,请多多指教。