当前位置:
文档之家› Android简单登录界面共5页文档
Android简单登录界面共5页文档
Android简单登录界面
接着上一讲留下的“需求”:
设计一个登陆界面:
允许用户输入用户名,密码;
用户点击“Login”之后,如果用户名为admin, 密码为123则显示“登陆成功”;
如果用户名密码其中之一不正确,红色字体显示“登陆失败!”
首先我们来建立一个新的项目:
图标那一步就随便选吧,下一步:
这一步与上次有点不同,这次我们不要ADT 帮我们创建任何的Activity,我们只需要一个空的项目。
点击Finish后,我们会发现,项目文件视图下,与上次的不一样,src, res/layout 是空的,这一会需要我们自己去添加了。
首先来明确一下我们现在的目标:
建立一个包含登录框的界面,并将它显示在我们的手机(模拟器)上。
建立一个界面的主要步骤是什么呢?主要有以下几步:
?在res/layout下创建布局文件;
?在src下创建Activity子类,并将布局文件与这个Activity联系起来。
?在AndroidManifest.xml程序配置文件中,添加Activity的声明。
我们先来
1. 创建布局文件:
在Eclipse项目文件中选中layout 文件夹,在工具栏里点击下面图标
在弹出的窗口,填上这个xml布局文件的文件名,Root Element 根节点就选择Linearlayout 即可
点击下一步,这一步是选择更多配置属性的,暂且不用理会,直接点击Finish。
我们发现,在res/layout 下面多了一个login.xml文件,同时Android 的Layout 编辑器也把它打开了。
切换到“source”代码视图,今天我们不用“所见即所得”的傻瓜拖拽方式。
我们看到xml代码是这样的:
android:layout_height="match_parent"
android:orientation="vertical">
根节点是LinearLayout,即线性布局,所谓线性布局,有点像J2SE上的流式布局,就是其中的UI元素,会按水平或者垂直方向顺序地铺开。
LinearLayout有个xml属性:android:orientation,它有两个可选值:vertical和horizontal,指明该线性布局中的元素,是以垂直(vertical)还是水平(horizontal)方向排列。
下面是两种方式的示意图:
接下来,我们要添加两个输入框,让用户输入用户名,密码。
输入框使用的是EditText, 我们在LinearLayout中添加两个EditText
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/login_username"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:hint="Type name here...."
android:text="">
android:id="@+id/login_password"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:hint="Type password here...."
android:inputType="textPassword"
android:text="">
对比每个节点属性,我们发现,不管是LinearLayout还是EditText,都会至少包含
android:layout_width
android:layout_height
上一讲我们有介绍这两个属性,这里再详细介绍一下,
不管是android:layout_width还是android:layout_height 都有四种可选填的值:
?wrap_content
?fill_parent
?match_parent
具体数值
前面三个参考上一讲。
具体数值可以填像素px,如300px, 也可以填dp. dp(也写作dip)是Android平台上特有的长度计量单位,它是与设备屏幕无关的单位,强烈建议我们在设计界面元素时,都使用dp,而非px!原因这里不多拓展,以后会详细描述。
还有一个重要的属性是:android:id,它是UI元素的唯一标识,格式为@+id/XXXXXXX 保存之后,我们会发现,在gen文件夹下面,ADT为我们自动生成了代码R.java:
他们都是静态且final 的类或者成员。它的作用是,为资源建立索引,以便代码中或者layout 中方便的引用。
public final class R {
public static final class attr {
public static final class drawable {
public static final int ic_launcher=0x7f020000;
public static final class id {
public static final int login_password=0x7f060001;
public static final int login_username=0x7f060000;
public static final class layout {
public static final int login=0x7f030000;
public static final class string {
public static final int app_name=0x7f040000;
public static final class style {
public static final int AppTheme=0x7f050000;
接下来我们再添加一个用于提交的按钮,以及用于显示结果的文本: