Android 基础课堂
上周我们讲了Android里的五大布局，学会了五大布局就有了搭建一个界面的基础了，但是简单的用一种布局是不行的，真正的开发中，避免不了多种布局的嵌套，各布局的属性也比较多，这些都需要亲自动手去尝试尝试，才能真正的掌握。
本周的内容呢，就让我们来搭建我们的APP的第一个界面吧，那么我们从哪入手呢，在现在的APP中，大多数都是含有登录界面的，登录是大部分APP必不可少的一部分，所以呢，我们就从登录界面开始吧，那么，就让我们进入本周的基础课堂吧。
第四课、从登录界面开始
- 一、登录界面布局分析
- 首先我们先来创建一个新的Activity用于登录，首先打开我们的工程，然后在我们的包处右键，如下：
- 右键后弹出如下菜单，按下图进行选择，最后我们创建一个Empty Activity
- 我们将该Activity命名为LoginActivity，单击Finish完成创建
- 这时候我们可以看到，多了一个LoginActivity和一个activity_login.xml，这就是我们新建的Activity所生成的，在第二课中，我们也介绍了LoginActivity是我们真正的Activity的逻辑所在的地方，而activity_login.xml的系统帮我们自动生成的对应这个Activity的布局，接下来，我们就要在activity_login.xml里开始对我们的登录页面开始局部，我们先来看看效果图，然后分析该如何布局，效果图如下：
- 这是一个比较简易的登录界面，（这里主要讲如何布局，对于一些样式优化之类的是后面的内容）我们可以看到，有两个输入框，一个用于输入账号、一个用于输入密码，在下面还有一个登录按钮，三个控件的总体位置在界面居中显示，下面我们开始来一步步搭建这样的界面
- 首先，我们可以看到三个控件是从上到下排列的，回想上周的五大布局，哪个布局方式和它比较相似，且又最适合用在这里呢，显然我们最容易想到的就是线性布局，即LinearLayout，我们只需要将LinearLayout的布局方式设置为垂直的，那么就可以轻松的实现从上到下的布局方式，底层布局选好后，那么就是上面的控件了，用于输入的控件及按钮，那么我们下面就来介绍下在Android中用于提供输入的控件及按钮，然后再来进行最后的布局
- 二、布局中的EditText
- EditText是Android中提供的用于获取用户输入的控件，Android中每一个控件所含有的方法都很多，不可能一次讲全讲完，我们还是本着用到什么讲什么的方式来讲解，所以，本次我们只讲一些简单的东西，即在布局中对EditText的一些设置，而关于如何获得输入、如何监听输入变化、如何设置可输入内容等等这些东西，我们将在下周中讲到登录界面的逻辑的时候进行叙述，所以本周的关于EditText的内容将会比较简单
- 实现上面这样的EditText只需要在布局中加入该控件即可，就是控件的最简单的使用，下面直接来看看代码
- 我们可以看到，在布局中加入一个控件是很简单的，只需要以 <控件名 属性>这种形式来书写即可，我们来看看我们为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的东西也就更简单了，我们直接来看看代码：
- 在讲解了刚才的EditText之后，再来看Button的代码，就显得更简单了，我们可以看到，前面四个属性，我们在讲EditText都讲过了，下面我们讲下剩下的两个属性：
- android:layout_marginTop 这个属性想必大家也能猜出是什么，刚才我们设置了左边和右边的距离，而这个属性，从英文上便能看出，是用来设置上方距离的，即距离上方控件多少
- android:text 用于设置控件内文字，我们这是一个登录按钮，所以就将内部文字设为“登录”，最后效果图如下：
- 四、布局中的技巧
- 我们已经选定布局了，并且讲解了需要用到的控件，那么我们就可以开始写我们的布局了，根据上面的分析，首先我们的主布局是一个LinearLayout，然后里面有两个EditText和一个Button，按照这个思路，我们可以得出如下的布局代码：
- 然后我们满心欢喜的连接上真机，将我们的工程跑起来（关于如何调试，可以另外找个教程看看，不难，这里就不赘述了），但是此时我们会发现，运行起来后，我们进入的是MainActivity，并不是进入到LoginActivity，看不到我们的效果，那么我们需要怎么做呢，才能在进入的时候是进到LoginActivity而不是MainActivity？这就要设置我们的启动Activity了，如下图，进入到manifests中，找到红色框起来的地方，这就是用于控制我们的APP启动的时候进入到哪个Activity的，我们只需要将这部分代码拷贝到LoginActivity对应的Activity下就行了，这时再次运行我们的工程，便可以进入到LoginActivity：
- 下面来看看我们运行起来的效果图：
- 我们可以看到，两个输入框和登录按钮，按照我们想要实现的方式从上到下排列了，但是和我们最终想要的效果还是有点区别，因为我们希望这两个输入框及登录按钮，在总体布局中是居中显示的，而现在是在最顶部的，那么我们该如何实现居中显示呢？
- 我们知道LinearLayout在垂直布局中，是将内部的一个个控件从上到下排列的，于是我们就想，是不是可以在输入框上面加入一个空的控件，让它占去一定高度，然后输入框和按钮就能显示在中间了？答案当然是可以的，但是新的问题又来了，这个空的控件，该占去多少高度，才能使得输入框和按钮居中呢？难道需要通过代码计算屏幕高度，计算输入框和按钮高度，然后做计算，然后再设置这个空的控件的高度么？当然，这是可以实现的，但是似乎实现起来比较麻烦，那么有没有更便捷的方法呢？答案是肯定的，这时候weight属性就可以派上用场了
- android:layout_weight 用于设置控件宽或高在父布局剩余位置中所占比例，这么说好像不太好理解，我们正好在现在的布局中加入它，来解释
- 新的布局代码如下：
- 可以看到，我们在LinearLayout中加入了两个View，他们的高度都为0dp，weight值都为1，我们先来看看运行起来的效果，再来通过它解释weight值的效果，效果图如下：
- 我们可以看到，这时候的局部，就是我们希望得到的布局，证明我们的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基础课堂就到这啦，让我们下周再见~
时间： 2024-09-15 15:57:13