小KING教你做android项目（二）---实现登陆页面并跳转和简单的注册页面

原文：http://blog.csdn.net/jkingcl/article/details/10989773

 

 

 

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

 

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

login.xml

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. <LinearLayout
8. android:layout_width="fill_parent"
9. android:layout_height="50dp"
10. android:background="@drawable/topbg2"
11. android:gravity="center_vertical"
12. android:orientation="horizontal" >
13. <Button
14. android:id="@+id/cancel"
15. android:layout_width="65.83dp"
16. android:layout_height="30.5dp"
17. android:layout_marginLeft="10dp"
18. android:background="@drawable/normal_btn"
19. android:text="@string/cancel"
20. android:textColor="#ffffff" />
21. <TextView
22. android:id="@+id/tv_friend_title"
23. android:layout_width="wrap_content"
24. android:layout_height="50dip"
25. android:layout_weight="1"
26. android:gravity="center"
27. android:text="AppName"
28. android:textColor="#ffffff"
29. android:textSize="20dip" />
30. <Button
31. android:id="@+id/login_in"
32. android:layout_width="65.83dp"
33. android:layout_height="30.5dp"
34. android:layout_marginRight="10dp"
35. android:background="@drawable/normal_btn"
36. android:text="@string/login_in"
37. android:textColor="#ffffff" />
38. </LinearLayout>
39. <RelativeLayout
40. android:id="@+id/editRel"
41. android:layout_width="fill_parent"
42. android:layout_height="wrap_content" >
43. <RelativeLayout
44. android:id="@+id/accountRel"
45. android:layout_width="fill_parent"
46. android:layout_height="wrap_content"
47. android:layout_marginTop="14dp"
48. android:background="@drawable/preference_first_item"
49. android:clickable="true"
50. android:gravity="center_vertical" >
51. <TextView
52. android:id="@+id/account"
53. android:layout_width="wrap_content"
54. android:layout_height="wrap_content"
55. android:padding="8dp"
56. android:text="@string/account"
57. android:textColor="#000"
58. android:textSize="17sp" />
59. <EditText
60. android:id="@+id/accountEdittext"
61. android:layout_width="fill_parent"
62. android:layout_height="wrap_content"
63. android:layout_centerVertical="true"
64. android:layout_marginLeft="20dip"
65. android:layout_toRightOf="@id/account"
66. android:background="@null"
67. android:hint="@string/account"
68. android:textSize="15sp" />
69. </RelativeLayout>
70. <RelativeLayout
71. android:id="@+id/pwdRel"
72. android:layout_width="fill_parent"
73. android:layout_height="wrap_content"
74. android:layout_below="@id/accountRel"
75. android:background="@drawable/preference_last_item"
76. android:clickable="true"
77. android:gravity="center_vertical" >
78. <TextView
79. android:id="@+id/pwd"
80. android:layout_width="wrap_content"
81. android:layout_height="wrap_content"
82. android:padding="8dp"
83. android:text="@string/pwd"
84. android:textColor="#000"
85. android:textSize="17sp" />
86. <EditText
87. android:id="@+id/pwdEdittext"
88. android:layout_width="fill_parent"
89. android:layout_height="wrap_content"
90. android:layout_centerVertical="true"
91. android:layout_marginLeft="20dip"
92. android:layout_toRightOf="@id/pwd"
93. android:background="@null"
94. android:hint="@string/pwd"
95. android:textSize="15sp" />
96. </RelativeLayout>
97. </RelativeLayout>
98. <TextView
99. android:id="@+id/sound_help"
100. android:layout_width="wrap_content"
101. android:layout_height="wrap_content"
102. android:layout_marginTop="15dip"
103. android:layout_marginLeft="15dip"
104. android:text="@string/forget_pwd"
105. android:textColor="#29981A" />
106. </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：转载请说明出处，本来我也不是什么高手大神，也可能有很多错误，请高人勿鄙视，新人理解包涵，只是希望和大家多交流，我自己也和弟弟共同巩固学习，提高进步。最后祝大家学习进步，工作顺利，身体健康。