Android 基础课堂 - Lesson.4-阿里云开发者社区

开发者社区> 开发与运维> 正文

Android 基础课堂 - Lesson.4

简介: #### Android 基础课堂 上周我们讲了Android里的五大布局,学会了五大布局就有了搭建一个界面的基础了,但是简单的用一种布局是不行的,真正的开发中,避免不了多种布局的嵌套,各布局的属性也比较多,这些都需要亲自动手去尝试尝试,才能真正的掌握。 本周的内容呢,就让我

Android 基础课堂

上周我们讲了Android里的五大布局,学会了五大布局就有了搭建一个界面的基础了,但是简单的用一种布局是不行的,真正的开发中,避免不了多种布局的嵌套,各布局的属性也比较多,这些都需要亲自动手去尝试尝试,才能真正的掌握。
本周的内容呢,就让我们来搭建我们的APP的第一个界面吧,那么我们从哪入手呢,在现在的APP中,大多数都是含有登录界面的,登录是大部分APP必不可少的一部分,所以呢,我们就从登录界面开始吧,那么,就让我们进入本周的基础课堂吧。

第四课、从登录界面开始

  • 一、登录界面布局分析

  • 首先我们先来创建一个新的Activity用于登录,首先打开我们的工程,然后在我们的包处右键,如下:

  • TB19yRaNXXXXXXuaXXXXXXXXXXX-391-616.png

  • 右键后弹出如下菜单,按下图进行选择,最后我们创建一个Empty Activity

  • TB1n40ANXXXXXXvXpXXXXXXXXXX-554-360.png

  • 我们将该Activity命名为LoginActivity,单击Finish完成创建

  • TB1gBXfNXXXXXbPXVXXXXXXXXXX-554-467.png

  • TB16dtENXXXXXa5XXXXXXXXXXXX-385-535.png

  • 这时候我们可以看到,多了一个LoginActivity和一个activity_login.xml,这就是我们新建的Activity所生成的,在第二课中,我们也介绍了LoginActivity是我们真正的Activity的逻辑所在的地方,而activity_login.xml的系统帮我们自动生成的对应这个Activity的布局,接下来,我们就要在activity_login.xml里开始对我们的登录页面开始局部,我们先来看看效果图,然后分析该如何布局,效果图如下:

  • TB16MXaNXXXXXa5aXXXXXXXXXXX-554-913.png

  • 这是一个比较简易的登录界面,(这里主要讲如何布局,对于一些样式优化之类的是后面的内容)我们可以看到,有两个输入框,一个用于输入账号、一个用于输入密码,在下面还有一个登录按钮,三个控件的总体位置在界面居中显示,下面我们开始来一步步搭建这样的界面

  • 首先,我们可以看到三个控件是从上到下排列的,回想上周的五大布局,哪个布局方式和它比较相似,且又最适合用在这里呢,显然我们最容易想到的就是线性布局,即LinearLayout,我们只需要将LinearLayout的布局方式设置为垂直的,那么就可以轻松的实现从上到下的布局方式,底层布局选好后,那么就是上面的控件了,用于输入的控件及按钮,那么我们下面就来介绍下在Android中用于提供输入的控件及按钮,然后再来进行最后的布局

  • 二、布局中的EditText

  • EditText是Android中提供的用于获取用户输入的控件,Android中每一个控件所含有的方法都很多,不可能一次讲全讲完,我们还是本着用到什么讲什么的方式来讲解,所以,本次我们只讲一些简单的东西,即在布局中对EditText的一些设置,而关于如何获得输入、如何监听输入变化、如何设置可输入内容等等这些东西,我们将在下周中讲到登录界面的逻辑的时候进行叙述,所以本周的关于EditText的内容将会比较简单

  • TB1XDFfNXXXXXbPXVXXXXXXXXXX-401-133.png

  • 实现上面这样的EditText只需要在布局中加入该控件即可,就是控件的最简单的使用,下面直接来看看代码

  • TB1eThoNXXXXXa0XFXXXXXXXXXX-339-143.png

  • 我们可以看到,在布局中加入一个控件是很简单的,只需要以 <控件名 属性>这种形式来书写即可,我们来看看我们为EditText设置了什么属性(上周中我们对常用的属性进行了简单介绍,现在我们针对用到的属性进行进一步介绍)

  • android:layout_width 该属性用于设置控件的宽度,它可以是一个确定的值,如50dp,100dp等(dp,一个基于density的抽象单位),也可以是相对值,Android给我们提供了match_parent 及 wrap_content两个值,match_parent 即填充父控件,就是父控件剩下多少都补满,wrap_content 即包含本身的大小,控件内容有多大,就显示多少,当然了这两个值的具体表现形式,得结合父控件情况看

  • android:layout_height 该属性用于设置控件的高度,同宽度

  • android:layout_marginLeft 距离左边距离

  • android:layout_marginRight 距离右边距离

  • android:hint 这是EditText 特有的属性,用于显示EditText的默认内容,啥叫默认内容呢,就是用于提示用户在该输入框输入啥,就像我们上图中的 “点击输入账号” 及 “点击输入密码” 当我们点击该输入框,并输入内容时,这两行字就会消息,当输入框再次为空时,又会显示这些用于提示的文字

---

  • 三、布局中的Button

  • Button是Android中提供的按钮控件,同上面讲解EditText时说的,本次我们只讲一些简单的东西,即本次在局部中用到的部分,还是本着用到什么讲什么的形式,所以关于Button的东西也就更简单了,我们直接来看看代码:

  • TB1t0pvNXXXXXclXpXXXXXXXXXX-282-155.png

  • 在讲解了刚才的EditText之后,再来看Button的代码,就显得更简单了,我们可以看到,前面四个属性,我们在讲EditText都讲过了,下面我们讲下剩下的两个属性:

  • android:layout_marginTop 这个属性想必大家也能猜出是什么,刚才我们设置了左边和右边的距离,而这个属性,从英文上便能看出,是用来设置上方距离的,即距离上方控件多少

  • android:text 用于设置控件内文字,我们这是一个登录按钮,所以就将内部文字设为“登录”,最后效果图如下:

  • TB1SGtGNXXXXXXYXXXXXXXXXXXX-526-106.png

---

  • 四、布局中的技巧

  • 我们已经选定布局了,并且讲解了需要用到的控件,那么我们就可以开始写我们的布局了,根据上面的分析,首先我们的主布局是一个LinearLayout,然后里面有两个EditText和一个Button,按照这个思路,我们可以得出如下的布局代码:

  • TB1sF3YMVXXXXbraFXXXXXXXXXX-484-580.png

  • 然后我们满心欢喜的连接上真机,将我们的工程跑起来(关于如何调试,可以另外找个教程看看,不难,这里就不赘述了),但是此时我们会发现,运行起来后,我们进入的是MainActivity,并不是进入到LoginActivity,看不到我们的效果,那么我们需要怎么做呢,才能在进入的时候是进到LoginActivity而不是MainActivity?这就要设置我们的启动Activity了,如下图,进入到manifests中,找到红色框起来的地方,这就是用于控制我们的APP启动的时候进入到哪个Activity的,我们只需要将这部分代码拷贝到LoginActivity对应的Activity下就行了,这时再次运行我们的工程,便可以进入到LoginActivity:

  • TB1hINGNXXXXXXJXXXXXXXXXXXX-554-280.png

  • 下面来看看我们运行起来的效果图:

  • TB1Fs4rNXXXXXbrXFXXXXXXXXXX-554-913.png

  • 我们可以看到,两个输入框和登录按钮,按照我们想要实现的方式从上到下排列了,但是和我们最终想要的效果还是有点区别,因为我们希望这两个输入框及登录按钮,在总体布局中是居中显示的,而现在是在最顶部的,那么我们该如何实现居中显示呢?

  • 我们知道LinearLayout在垂直布局中,是将内部的一个个控件从上到下排列的,于是我们就想,是不是可以在输入框上面加入一个空的控件,让它占去一定高度,然后输入框和按钮就能显示在中间了?答案当然是可以的,但是新的问题又来了,这个空的控件,该占去多少高度,才能使得输入框和按钮居中呢?难道需要通过代码计算屏幕高度,计算输入框和按钮高度,然后做计算,然后再设置这个空的控件的高度么?当然,这是可以实现的,但是似乎实现起来比较麻烦,那么有没有更便捷的方法呢?答案是肯定的,这时候weight属性就可以派上用场了

  • android:layout_weight 用于设置控件宽或高在父布局剩余位置中所占比例,这么说好像不太好理解,我们正好在现在的布局中加入它,来解释

  • 新的布局代码如下:

  • TB1roxwNXXXXXXuXXXXXXXXXXXX-512-689.png

  • 可以看到,我们在LinearLayout中加入了两个View,他们的高度都为0dp,weight值都为1,我们先来看看运行起来的效果,再来通过它解释weight值的效果,效果图如下:

  • TB16MXaNXXXXXa5aXXXXXXXXXXX-554-913.png

  • 我们可以看到,这时候的局部,就是我们希望得到的布局,证明我们的weight值起效果了,下面我们来分析下weight值的效果。首先,在这有三个控件的时候,即只有两个输入框和一个按钮的时候,我们的LinearLayout剩下了下面一大部分的高度,这时候,我们在上下分别加入了一个高度为0dp,weight为1的View,weight值的概念就是,将父布局中所剩余的全部空间(由于我们现在是垂直布局,所以剩余的全部空间则指全部剩余高度),按比例分给设置了weight值的控件,那比例如何计算呢?首先我们将所有在该父控件中的设置了weight值的子控件的weight进行累加,在我们这里,即 1 + 1 = 2 (由此可见,weight值不一定是1,可以设置为2 3 4 等等),然后用我们的子控件自己的weight值除以累加的总值则得到比例,我们这里是 1 / 2 = 0.5 ,所以两个设置了weight值的控件,将LinearLayout剩余的高度,按0.5 0.5 的比例进行了划分,各自占用分配到的高度,所以便使得两个输入框及按钮位于总体布局的中间了

---

  • 好了,至此我们的登录界面算是搭建完了,虽然样式比较丑,但也还是达到目的了,之后我们将会在自定义样式的课堂讲如何对界面进行美化,其实这样一个界面的实现方式有很多种,这里选择了这种方式大体上只是为了引入weight属性的介绍,有兴趣的同学们可以考虑用不同的方式去实现这个登录界面,也算是对布局的加深了解
  • 本周的Android基础课堂就到这啦,让我们下周再见~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章