当前位置:文档之家› Android登录界面(步骤详细)

Android登录界面(步骤详细)

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代码是这样的:<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"></LinearLayout>根节点是LinearLayout,即线性布局,所谓线性布局,有点像J2SE上的流式布局,就是其中的UI元素,会按水平或者垂直方向顺序地铺开。

LinearLayout有个xml属性:android:orientation,它有两个可选值:vertical和horizontal,指明该线性布局中的元素,是以垂直(vertical)还是水平(horizontal)方向排列。

下面是两种方式的示意图:接下来,我们要添加两个文本输入框,让用户输入用户名,密码。

输入框使用的是EditText, 我们在LinearLayout中添加两个EditText<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android" android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><EditTextandroid:id="@+id/login_username"android:layout_width="300dp"android:layout_height="wrap_content"android:hint="Type name here...."android:text=""></EditText><EditTextandroid:id="@+id/login_password"android:layout_width="300dp"android:layout_height="wrap_content"android:hint="Type password here...."android:inputType="textPassword"android:text=""></EditText></LinearLayout>对比每个节点属性,我们发现,不管是LinearLayout还是EditText,都会至少包含android:layout_widthandroid: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;}}接下来我们再添加一个用于提交的按钮,以及用于显示结果的文本:<Buttonandroid:id="@+id/login_submit"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="登录"/><TextViewandroid:id="@+id/login_result"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="用于显示登录的结果"/>android:hint是用于提示文本,当android:text有值时,会被替换。

切换回“所见即所得”的图形编辑视图预览一下:布局文件创建完成,我们进行第二步:2. 编写代码在src右键New->Class->需要注意的是,该LoginActivity类必须继承自Activity类public class LoginActivity extends Activity {/*** 必须重载父类的onCreate*/@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);this.setContentView(yout.login);//将布局文件与代码关联起来//获取布局文件中的UI元素对象final EditText mUserName = (EditText)this.findViewById(R.id.login_username);final EditText mPassword = (EditText)this.findViewById(R.id.login_password);Button mSubmit = (Button)this.findViewById(R.id.login_submit);final TextView mResult =(TextView)this.findViewById(R.id.login_result);//设置按钮点击之后的事件处理mSubmit.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {String userName = mUserName.getText().toString();String password = mPassword.getText().toString();if("admin".equals(userName) &&"123".equals(password)){mResult.setText("恭喜您,登录成功!");}else{mResult.setText("登录失败,用户名或密码不正确!"); }}});}}注意以下几点:∙必须重载onCreate()方法,而且必须首先调用一次父类的方法super.onCreate(s avedInstanceState);∙setContentView()方法用于关联布局文件,应该在onCreate中先调用,后面才能获取到UI元素的对象。

相关主题