Android开发-UI控件:实现登陆页面并跳转和简单的注册页面

转载自： http://blog.csdn.net/jkingcl/article/details/10989773

由于前几日感冒发烧了，加之老婆怀孕了，所以更新不及时，请朋友们见谅 ，同时弟弟开学了，我的教学继续摧残着他！文章稍后整理好了更新上来。

今天我们主要来介绍登陆页面的实现，主要讲解的就是涉及到的布局，以及简单的跳转需要用到的代码。

 

首先我们来看看布局的xml代码

login.xml

[html]  view plain copy

1. <span style="font-family:Arial;font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:background="@drawable/bkcolor"  
6.     android:orientation="vertical" >  
7.   
8.     <LinearLayout  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="50dp"  
11.         android:background="@drawable/topbg2"  
12.         android:gravity="center_vertical"  
13.         android:orientation="horizontal" >  
14.   
15.         <Button  
16.             android:id="@+id/cancel"  
17.             android:layout_width="65.83dp"  
18.             android:layout_height="30.5dp"  
19.             android:layout_marginLeft="10dp"  
20.             android:background="@drawable/normal_btn"  
21.             android:text="@string/cancel"  
22.             android:textColor="#ffffff" />  
23.   
24.         <TextView  
25.             android:id="@+id/tv_friend_title"  
26.             android:layout_width="wrap_content"  
27.             android:layout_height="50dip"  
28.             android:layout_weight="1"  
29.             android:gravity="center"  
30.             android:text="AppName"  
31.             android:textColor="#ffffff"  
32.             android:textSize="20dip" />  
33.   
34.         <Button  
35.             android:id="@+id/login_in"  
36.             android:layout_width="65.83dp"  
37.             android:layout_height="30.5dp"  
38.             android:layout_marginRight="10dp"  
39.             android:background="@drawable/normal_btn"  
40.             android:text="@string/login_in"  
41.             android:textColor="#ffffff" />  
42.     </LinearLayout>  
43.   
44.     <RelativeLayout  
45.         android:id="@+id/editRel"  
46.         android:layout_width="fill_parent"  
47.         android:layout_height="wrap_content" >  
48.   
49.         <RelativeLayout  
50.             android:id="@+id/accountRel"  
51.             android:layout_width="fill_parent"  
52.             android:layout_height="wrap_content"  
53.             android:layout_marginTop="14dp"  
54.             android:background="@drawable/preference_first_item"  
55.             android:clickable="true"  
56.             android:gravity="center_vertical" >  
57.   
58.             <TextView  
59.                 android:id="@+id/account"  
60.                 android:layout_width="wrap_content"  
61.                 android:layout_height="wrap_content"  
62.                 android:padding="8dp"  
63.                 android:text="@string/account"  
64.                 android:textColor="#000"  
65.                 android:textSize="17sp" />  
66.   
67.             <EditText  
68.                 android:id="@+id/accountEdittext"  
69.                 android:layout_width="fill_parent"  
70.                 android:layout_height="wrap_content"  
71.                 android:layout_centerVertical="true"  
72.                 android:layout_marginLeft="20dip"  
73.                 android:layout_toRightOf="@id/account"  
74.                 android:background="@null"  
75.                 android:hint="@string/account"  
76.                 android:textSize="15sp" />  
77.         </RelativeLayout>  
78.   
79.         <RelativeLayout  
80.             android:id="@+id/pwdRel"  
81.             android:layout_width="fill_parent"  
82.             android:layout_height="wrap_content"  
83.             android:layout_below="@id/accountRel"  
84.             android:background="@drawable/preference_last_item"  
85.             android:clickable="true"  
86.             android:gravity="center_vertical" >  
87.   
88.             <TextView  
89.                 android:id="@+id/pwd"  
90.                 android:layout_width="wrap_content"  
91.                 android:layout_height="wrap_content"  
92.                 android:padding="8dp"  
93.                 android:text="@string/pwd"  
94.                 android:textColor="#000"  
95.                 android:textSize="17sp" />  
96.   
97.             <EditText  
98.                 android:id="@+id/pwdEdittext"  
99.                 android:layout_width="fill_parent"  
100.                 android:layout_height="wrap_content"  
101.                 android:layout_centerVertical="true"  
102.                 android:layout_marginLeft="20dip"  
103.                 android:layout_toRightOf="@id/pwd"  
104.                 android:background="@null"  
105.                 android:hint="@string/pwd"  
106.                 android:textSize="15sp" />  
107.         </RelativeLayout>  
108.     </RelativeLayout>  
109.   
110.     <TextView  
111.         android:id="@+id/sound_help"  
112.         android:layout_width="wrap_content"  
113.         android:layout_height="wrap_content"  
114.         android:layout_marginTop="15dip"  
115.         android:layout_marginLeft="15dip"  
116.         android:text="@string/forget_pwd"  
117.         android:textColor="#29981A" />  
118.   
119. </LinearLayout></span>  

我们来看第一行，这里主要就是介绍xml的版本信息和编码格式。

 

接下来就是重点了，代码写好了，我们可以看看写好代码这个布局究竟是什么样子的也便于调试，那么这个时候需要点击一下下方的Graphical Layout，这个是一个可视化的编辑窗口，我们写的xml代码是什么样子的，这里都可以见到，所以这个非常的方便。基本上这里显示是什么样，到了手机实际运行就是什么样子的，所以大家写好一个布局样式的时候都要来回的切换一下，调整细节布局都靠这个了。

 

首先说明一下常用的5种布局：

1.LinearLayout（线性布局）

2.RelativeLayout(相对布局)

3.AbsoluteLayout（绝对布局）

4.TableLayout(表格布局)

5.FrameLayout(单帧布局)

 

今天我只会用到其中两种，那么我就只会讲其中两种啦，至少我现在做的那么多项目的话，用的最最多的其实就是前两种，基本上可以完成大多数的布局了。

讲到这里

我的弟弟又问：那么多布局，布局里面貌似还有啥子长宽高，还有好多属性哦，怎么记得完记得住啊？这个布局不好搞啊，页面图不好画呀。

我说：确实啊，但是谁要求你记那么多啊？现在开始，用到什么再去查什么，记住基础的属性就可以了，其他的还是需要用的时候再去查，这样才能快速从零开始，每一个你都问为什么去深入，那可不行。很多东西现在讲了也不明白，等时间到了，不讲你也自己都明白了。不过弄完过后，下来的查资料和思考是必不可少的。并且最最重要的就是动手实验，自己去敲代码，才是王道。

 

好了散打回到我们的布局代码上来，首先我们就来了一个LinearLayout作为整体的一个布局基调，接下来的东西都写到这个大的LinearLayout上面。然后这里说明一下，布局是可以嵌套的，意思就是LinearLayout下面还可以嵌套其他的布局或者还是LinearLayout。具体怎么的呢，不急，我们慢慢一步一步的来。

弟弟立刻就问了：xmlns:android=http://schemas.android.com/apk/res/android这句是什么意思呢？

我说：我都还不知道呢，于是乎，去查，哦原来这个是xml的命名空间，有了他，你就可以alt+/作为提示，提示你输入什么，不该输入什么，什么是对的，什么是错的，也可以理解为语法文件。或者语法判断器什么的。

 

  android:layout_width="fill_parent"

  android:layout_height="fill_parent"

  android:background="@drawable/bkcolor"

  android:orientation="vertical"

 

第一句其实就是设置这个宽度，那么值我们填的是填充这个宽度，大家还可以alt+/查看还有什么属性，到时候会用到其他的

第二句其实也是同样的是设置高度。

第三句就是整个的背景我们直接引用了一个颜色，同样的你可以引用你放到drawable-hdpi下面的图片，其实就相当于我们微信或者有些app启动的时候的背景图片。

第四句是设置在这个布局下面的空间采用什么排列方式，我们这里是采用垂直排序的方式，意思就是后面的组件都是从上到下排列，当然如果你选择horizontal则是从左到右的方式排列。

 

好了大的背景我们就搭建好了，其实这个时候什么都木有，只是你会看到背景颜色变了。

 

接下来我们就要添加按钮，输入框，文字等内容了。

 

首先这个时候我们要有一个思维就是，布局都是分块的，而不是所有的东西都是一个字一个字，一个按钮一个按钮来写的。

 

这里我们来看看 我们把最上面的titile栏作为一块，中间的账号密码输入框作为一块，最下面的忘记密码为一块。那么我们就可以知道接下来应该有三块了，然后首先完成第一块，根据第一块，对了这里说明一般的开发流程是，首先是美工会设计整个页面的样式，然后切图，我们才会根据那个来作为参考来布局我们的内容。

 

最上面的一块根据他的设计我们看到是三个内容，2个BUTTON，1个TextView。而且是水平排列的，那么就可以利用我们的只是嵌套一个LinearLayout 并且排列方式应该用什么呢？前面说了，当然就用horizontal啦，它就会自动从左到右的排列了

 

同样的就不介绍了，不过也是设置按钮的大小，这里的大小是根据美工切的图片来计算的，有一个转换工具就是像素转换成dip的

下载地址 dip转换工具

 

android:id="@+id/cancel"

这是为这个按钮添加一个id号，便于在代码中找到这个按钮，为这个按钮写对应的功能，这里也就贴出在loginActivity中找到这个按钮的代码吧.

       

 Button cancel;

        cancel=(Button)findViewById(R.id.cancel);

        cancel.setOnClickListener(new OnClickListener() {

            @Override

            public void onClick(View v) {

                //这里做你想你的这个按钮想做的事情吧。

            }

        });

android:layout_marginLeft="10dp"

这句话的意思就是距离左边距多远，一般10-15dp是最好看的距离，反正所有统一就好了。

 

同样还有就是按钮的文字内容我们都写到strings.xml里面，通过android:text="@string/cancel"

这种方式来调用，这样做的好处是以后万一有修改就不用一一的去改了。上一篇文章页介绍了，这里就是实际使用了。大家照着写吧。

android:textColor="#ffffff"

这句话就是文字颜色，这里是黑色，至于其他颜色大家可以去查。

好了其他的都大同小异，相信各位智商一定比我弟弟高，他都能做出来，各位小天才们一定是可以举一反三的，不然我不是在侮辱各位么不是么。说太多会挨打的。

 

 android:layout_weight="1"当然这个还是要讲一下，这个是在这个LinearLayout中的一个权重，相当于把整个分成几份，我这里设置1的目的其实就是居中显示这个TextView，同时剩下的两个按钮分剩下的空间，类似于TextView占了两份，其他的按钮各自占一份。或者大家可以试一试其他的方式来达到这个效果，也许我也做错了。

 

弟弟：你为什么这样做呢？可以用其他的方式么？

我：我也不晓得，你记着我给你讲的很有可能是错的，所以你要有怀疑的精神，同时可以试验其他方法。

 

预告：后面发生了一件事情证明了这个，所以我还是错的凶。大家如果我有错，请指正，我改，我是好孩子，不是那种你给我指出来了，我反正不改，你来打我呀那种人！

 

预告：后面发生了一件事情证明了这个，所以我还是错的凶。大家如果我有错，请指正，我改，我是好孩子，不是那种你给我指出来了，我反正不改，你来打我呀那种人！

 

接下来讲一下RelativeLayout，也就是下面账号密码的实现中的关键点了

这种布局叫相对布局，那么必然有一个相对的对象

这时我的弟弟问：到底@+id/name和@id/name有什么区别呢？怎么使用呢？

我回答：其实有加号的那个是添加一个id，另外一个是引用那个id。

 

好了再相对布局中会类似这样的代码

 android:layout_toRightOf="@id/account"

它的意思就是把该空间放到id为account的空间的右边，当然还有很多参数，还可以放到左边，放到下面，放到上面等等，大家可以在输入完android:后按ctrl+/来查看。后面的文章我会做一个详细的具体的有哪些参数的说明。等用到的时候继续讲解。基本的布局就差不多这样完成了。再讲解跳转方法之前说一下引用的图片，大家可能看到了drawable-hdpi中有的图片的结尾格式是.9.png说明一下个图片是利用android自带的工具制作而成的，目的是让图片具有较小的体积同时拉伸的时候图片不会变型，大家先了解有这么一回事吧。

 

接下来是跳转相关的代码了主要就是利用intent，什么时候跳转呢？我们在点击了登陆的时候跳转，我的代码如下：

Button loginBtn = (Button)findViewById(R.id.login_in);

        loginBtn.setOnClickListener(new OnClickListener() {

            

            @Override

            public void onClick(View v) {

                // TODO Auto-generated method stub

                //这里就可以判断账号密码是否正确了，这里让大家自己试验动手一下谢谢如果账号密码是admin 123456就成功

                //否则就提示登陆失败，大家试一试吧，我这里直接跳转了，没做验证

                

                //这个是直接跳转到MainActivity

                Intent intent = new Intent();

                intent.setClass(LoginActivity.this, MainActivity.class);

                startActivity(intent);

            }

        });

同时留一个作业就是，大家去获取编辑框的内容，然后以账号为admin,密码为123456作为正确账号，来判断输入是否正确，成功了就跳转，失败了就弹出提示。

 

Intent负责对应用中一次操作的动作、动作涉及数据、附加数据进行描述，Android则根据此Intent的描述，负责找到对应的组件，将 Intent传递给调用的组件，并完成组件的调用。intent可以带参数传递，还可以绑定bundle。这些后期会用到我们继续讲 ，这里我们就是单纯的实现了跳转，setClass就是告诉计算机从哪个类到哪个类去，然后调用startActiviy()方法就可以成功的跳转了。这周的讲解就到这里了。

 

 特别说明：这周太霉了，首先是周一周二的感冒发烧，然后是周三晚上汽车刚做完首保出来没开多远，遇着一个打电话的 傻b司机，从左边超车，正准备开窗看看司机到底在爪子的时候，前面的进口golf踩急刹车，结果我也刹车不急就撞上了。还好不严重，同时要说明一下的就是，以后不要心怀不轨 ，不要看美女，不要想着骂别人，上路了就不要着急，老老实实的吧，不然车坏了事小，人伤了 ，耽误很多时间办很多手续，报保险那些什么杂碎的事情多的烦死你。切忌切忌，弟弟你也要记住哦！

 PS：转载请说明出处，本来我也不是什么高手大神，也可能有很多错误，请高人勿鄙视，新人理解包涵，只是希望和大家多交流，我自己也和弟弟共同巩固学习，提高进步。最后祝大家学习进步，工作顺利，身体健康。