小KING教你做android项目(二)---实现登陆页面并跳转和简单的注册页面
原文:http://blog.csdn.net/jkingcl/article/details/10989773
今天我们主要来介绍登陆页面的实现,主要讲解的就是涉及到的布局,以及简单的跳转需要用到的代码。
首先我们来看看布局的xml代码
login.xml
- <span style="font-family:Arial;font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/bkcolor"
- android:orientation="vertical" >
- <LinearLayout
- android:layout_width="fill_parent"
- android:layout_height="50dp"
- android:background="@drawable/topbg2"
- android:gravity="center_vertical"
- android:orientation="horizontal" >
- <Button
- android:id="@+id/cancel"
- android:layout_width="65.83dp"
- android:layout_height="30.5dp"
- android:layout_marginLeft="10dp"
- android:background="@drawable/normal_btn"
- android:text="@string/cancel"
- android:textColor="#ffffff" />
- <TextView
- android:id="@+id/tv_friend_title"
- android:layout_width="wrap_content"
- android:layout_height="50dip"
- android:layout_weight="1"
- android:gravity="center"
- android:text="AppName"
- android:textColor="#ffffff"
- android:textSize="20dip" />
- <Button
- android:id="@+id/login_in"
- android:layout_width="65.83dp"
- android:layout_height="30.5dp"
- android:layout_marginRight="10dp"
- android:background="@drawable/normal_btn"
- android:text="@string/login_in"
- android:textColor="#ffffff" />
- </LinearLayout>
- <RelativeLayout
- android:id="@+id/editRel"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content" >
- <RelativeLayout
- android:id="@+id/accountRel"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="14dp"
- android:background="@drawable/preference_first_item"
- android:clickable="true"
- android:gravity="center_vertical" >
- <TextView
- android:id="@+id/account"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:padding="8dp"
- android:text="@string/account"
- android:textColor="#000"
- android:textSize="17sp" />
- <EditText
- android:id="@+id/accountEdittext"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_centerVertical="true"
- android:layout_marginLeft="20dip"
- android:layout_toRightOf="@id/account"
- android:background="@null"
- android:hint="@string/account"
- android:textSize="15sp" />
- </RelativeLayout>
- <RelativeLayout
- android:id="@+id/pwdRel"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/accountRel"
- android:background="@drawable/preference_last_item"
- android:clickable="true"
- android:gravity="center_vertical" >
- <TextView
- android:id="@+id/pwd"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:padding="8dp"
- android:text="@string/pwd"
- android:textColor="#000"
- android:textSize="17sp" />
- <EditText
- android:id="@+id/pwdEdittext"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_centerVertical="true"
- android:layout_marginLeft="20dip"
- android:layout_toRightOf="@id/pwd"
- android:background="@null"
- android:hint="@string/pwd"
- android:textSize="15sp" />
- </RelativeLayout>
- </RelativeLayout>
- <TextView
- android:id="@+id/sound_help"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="15dip"
- android:layout_marginLeft="15dip"
- android:text="@string/forget_pwd"
- android:textColor="#29981A" />
- </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:转载请说明出处,本来我也不是什么高手大神,也可能有很多错误,请高人勿鄙视,新人理解包涵,只是希望和大家多交流,我自己也和弟弟共同巩固学习,提高进步。最后祝大家学习进步,工作顺利,身体健康。