动手学Android之六——布局初步（三）

如果觉得现在做的事情没意思，就自己做点有意思的

我知道之前讲了2节布局，你肯定还是没有感觉，觉得只是知道了一些知识，还不知道怎么用呢。没关系，今天我们就来动手写一个登陆界面，把我们的布局知识实际用一用。

首先新开一个工程，叫做Login，然后把该准备的准备上咯，MainActivity，布局文件…

首先，我们希望登陆者提供账号和密码，并且可以选择下次是否自动登陆，同时，我们还提供注册的功能，我们可以出一个简单的原型稿。

我们的登陆界面大概就是这些元素啦！原型稿过于丑陋，但是我们程序真的出来的话肯定效果比这好的。

废话不多说，先分析下布局：虽然这个布局很普通，但是对于初学者来说并不是一件简单的事情。首先我们想一想，最外层用什么布局比较好，我个人觉得可以用一个线性布局，大的是一个垂直的线性布局包括5栏，第一栏是应用程序标题，第二栏包括中间的应用程序图标、用户名、密码、下次登陆框，第三栏包括登陆和注册按钮，第四栏是一些错误信息，第五栏是永不退缩的广告位。

先把大的布局搞定，为了兼容不同的机型，我们使用weight属性来做：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2" android:background="@color/red"></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="3" android:background="@color/green"></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2" android:background="@color/blue"></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" android:background="@color/black"></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" android:background="@color/white"></LinearLayout></LinearLayout>

这个效果出来后：

然后我们现在第一个红色的栏内写上我们的应用程序标题，标题要水平垂直居中的，所以我们加一个相对布局：

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2" android:background="@color/background"><RelativeLayout android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/titleText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/title" android:layout_centerInParent="true"android:textColor="@color/title"android:textSize="40sp"android:textStyle="bold"/></RelativeLayout></LinearLayout>

看看效果：

下面来看第二栏：由一个ImageView、两个EditText和一个CheckBox组成，使用相对布局，先搞定这个RelativeLayout，我们希望它宽300dp，然后居中显示：

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="3" android:background="@color/background"android:orientation="horizontal"><RelativeLayoutandroid:layout_width="300dp"android:layout_height="match_parent"android:background="@color/red"></RelativeLayout></LinearLayout>

我们先看下这样的效果：

那么我们怎么让它居中呢？你是不是会想到android:layout_centerInParent="true"，但是请注意，这是在RelativeLayout中才能使用的属性，我们这里实在LinearLayout中，这里有两个方法可以解决这个问题：layout_gravity和gravity，其中gravity是用在父元素中的，而layout_gravity用在子元素中。我们先用gravity试下：在LinearLayout中添加属性android:gravity="center"，看一下：（这里我们在Graphical Layout中查看，这样不用运行）

已经居中了，我们再试下layout_gravity，我们在子元素RelativeLayout中加上android:layout_gravity="center"，看下效果：

咦？怎么还是靠左边，难道layout_gravity没有用吗？这里的问题出在我们LinearLayout的orientation上面，我们把它改成vertical就对了，为啥呢？当orientation是水平的时候，只有垂直居中是有效的，反之，当orientation是竖直时，水平居中才是有效的。好了，我们用一种方法让它居中就行。然后我们来看ImageView。

ImageView我们第一次见，其实它很简单，就是代表一个图片，我们看下代码：

<RelativeLayoutandroid:layout_width="300dp"android:layout_height="match_parent"android:background="@color/red"><ImageViewandroid:id="@+id/appImage"android:layout_margin="10dp"android:layout_width="80dp"android:layout_height="100dp"android:layout_alignParentTop="true"android:layout_alignParentLeft="true" android:src="@drawable/cat"/></RelativeLayout>

我们放一张cat的图片到drawable-hdpi中，注意，当我们把图片放在这个文件夹的时候，R.java文件就同步更新了，这时我们就可以通过@drawable/cat来引用这张图片了。我们的cat图片是

我们来看下效果：

这个应该是大家意料之中的，图片会根据我们设置的长宽来进行缩放，但是真的是这样吗？我们其实可以看到ImageView还有一个android:background属性，它同样可以设置图片，那么他们的区别在哪里呢？为了看到他们的区别，我们换一张图片：

先是android:background="@drawable/smallcat"，效果如下：

我们看到图片在两个方向上都被拉伸了，再看下android:src="@drawable/smallcat"

啊哈，图片也被拉伸了，但是它的长宽比没有变，这就是他们的区别，但是src也是可以设置如何拉伸的，如果我们设置android:scaleType="fitXY"，那效果就和background一样了。

我们换回cat图片，下面开始编写两个EditText，其实很简单：

<EditTextandroid:id="@+id/userEdit"android:layout_marginLeft="10dp"android:layout_width="180dp"android:layout_height="wrap_content"android:layout_alignTop="@id/appImage" android:layout_toRightOf="@id/appImage"android:drawableLeft="@drawable/user"android:inputType="textEmailAddress"/><EditTextandroid:id="@+id/passwordEdit"android:layout_marginLeft="10dp"android:layout_width="180dp"android:layout_height="wrap_content"android:layout_alignBottom="@id/appImage" android:layout_toRightOf="@id/appImage"android:layout_alignBaseline="@id/appImage"android:drawableLeft="@drawable/password"android:inputType="textPassword"/>

我们让第一个EditText与图片上方对其，让第二个EditText与图片下方对其，EditText还有一个android:drawableLeft属性，可以指定图片的，这个很好用的，还有一个很好用的属性是android:inputType，如果是密码指定textPassword，输入的时候就会自动变成***了。效果看下吧：

再来搞定CheckBox

<CheckBoxandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/autologin"android:layout_centerHorizontal="true"android:layout_below="@id/appImage"/>

我们去掉红色背景看下效果：

效果还不错的吧，但是好像我们的字离图标太近了，怎么办呢？很好办，我们给图片加一段空白就好了嘛？一个小小的障眼法就OK了

这里先不看效果了，先搞定两个按钮，登陆和注册吧：

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2" android:background="@color/background"android:orientation="horizontal"><Buttonandroid:id="@+id/loginBtn"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:layout_margin="10dp"android:text="@string/login"android:textColor="@color/white"android:background="@color/blue"android:textSize="20sp"android:padding="10dp"></Button><Buttonandroid:id="@+id/loginBtn"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:layout_margin="10dp"android:text="@string/register"android:textColor="@color/white"android:background="@color/blue"android:textSize="20sp"android:padding="10dp"></Button></LinearLayout>

我们又一次用到了weight属性，我个人觉得理解了它还是很好用的哦！看下效果：

不错吧，再把剩下的加上：

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1.5" android:background="@color/background"android:orientation="horizontal"android:gravity="center_horizontal"><TextViewandroid:id="@+id/errMess"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="@color/red"android:textSize="20sp"android:text="test"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" android:background="@color/background"android:orientation="horizontal"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/banner" /></LinearLayout>

我们来看下最终效果：

当然，我这里的图都是没有经过处理的，比较丑陋，但是布局的目的不是图片，而是把元素放在该放的位置，我们的目的已经达到了。

下面我们来总结一下吧：

1、新控件ImageView和CheckBox

2、EditText的属性android:drawableLeft和android:inputType

3、layout_gravity和gravity

4、ImageView的属性src和background

5、还有，你要自己学会总结哈

这节的例子在http://download.csdn.net/detail/yeluoxiang/7306271，欢迎大家和我讨论！

补充：在有些机器上测试，EditText默认不是白色的，这时候有些问题：

解决方法有两个：1、用PS把图片的白色部分改成透明的；2、用原始图片，在EditText中添加属性：android:drawablePadding，该属性可以设置文字和图片的间隔。代码还是老代码，请大家下下来后自己更正。

动手学Android之六——布局初步（三）相关推荐

android Activity布局初步（二）－嵌套布局
http://byandby.iteye.com/blog/830048 Activity布局初步(二)- 嵌套布局采用嵌套的方式来实现复杂的布局,通过2个示例来介绍嵌套布局的方法. 示例1:将 ...
从零开始学android开发-布局中 layout_gravity、gravity、orientation、layout_weight
线性布局中,有 4 个及其重要的参数,直接决定元素的布局和位置,这四个参数是 android:layout_gravity ( 是本元素相对于父元素的重力方向 ) android:gravity (是 ...
12、从头学Android之布局之TableLayout表格布局
类结构图: java.lang.Object ↳ android.view.View ↳ android.view.ViewGroup ↳ android.widget. ...
一步一步学android之布局管理器——LinearLayout
线性布局是最基本的一种布局,在基本控件篇幅中用到的都是LinearLayout,线性布局有两种方式,前面也有用到,一种是垂直的(vertical),一种是水平的(horizontal).我们同样来看下 ...
动手学深度学习(PyTorch实现)(三)--过拟合与欠拟合
过拟合与欠拟合 1. 过拟合与欠拟合 1.1 训练误差和泛化误差 1.2 模型选择 1.2.1 验证数据集 1.2.2 K折交叉验证 1.3 过拟合与欠拟合 1.3.1 模型复杂度 1.3.2 训练数 ...
《动手学深度学习》第三十三天---AdaGrad算法，RMSProp算法，AdaDelta算法，Adam算法
回顾一下之前的优化算法: 在动量法中,我们用到指数加权移动平均来使得自变量的更新方向更加一致,从而降低发散的问题. (一)AdaGrad算法 AdaGrad算法会使用一个小批量随机梯度gt按元素平方的 ...
跟着鬼哥学android java hook（三）
按照上文的约定,我们继续第三篇文章,找一个游戏来测试此框架和插件的稳定性. 一个解谜逃脱类的游戏,挺好玩的,我还是未破解情况下玩通上一个版本了,新版本其实也出来两三个月了,过了那个新鲜劲头,就直接破解 ...
Carson带你学Android：这是一份全面详细的属性动画学习攻略！
前言属性动画的使用是 Android 开发中常用的知识本文将献上一份全面 & 详细的属性动画学习指南,将详细介绍属性动画的所有内容,包括:意义.作用.应用场景.功原理 & 具体使 ...
Carson带你学Android：这是一份全面详细的动画学习指南
前言动画的使用是 Android 开发中常用的知识可是动画的种类繁多.使用复杂,每当需要采用自定义动画实现复杂的动画效果时,很多开发者就显得束手无策本文将献上一份Android动画的全面 ...

动手学Android之六——布局初步（三）

动手学Android之六——布局初步（三）相关推荐

最新文章

热门文章