Android9编程八：RelativeLayout排版

最新推荐文章于 2019-06-09 09:24:46 发布

置顶牛搞

最新推荐文章于 2019-06-09 09:24:46 发布

阅读量580

点赞数

分类专栏： android开发 java android开发教程

本文链接：https://blog.csdn.net/niu_gao/article/details/90311003

版权

android开发同时被 3 个专栏收录

107 篇文章 7 订阅

订阅专栏

android开发教程

99 篇文章 46 订阅

订阅专栏

java

28 篇文章 1 订阅

订阅专栏

上一篇：Android9编程七：ConstraintLayout 排版

其实在ConstraintLayout出来之前，Android推荐的排版控件是RelativeLayout。它的能力与ConstraintLayout差不多，也是专用于设计复杂的排版。它与ConstraintLayout的区别是，它对于鼠标拖放的方式来布局控件支持得不好，比如我用它时更喜换直接在属性栏中设置与位置相关的各种属性来对子控件进行排版，非常麻烦。

虽然Android现在推荐的排版控件是ConstraintLayout，但是RelativeLayout依然可用。因为你有可能要面对一些旧代码，所以有必要把它搞清楚，而且后面我用RelativeLayout实现了一个登录界面，其实现过程与ConstraintLayout差不多，所以你在用ConstraintLayout实现相同的界面时，可以参考这里的做法。

Relative的意思是关系，也就是它里面的子控件之间可以设置相对位置关系，其实这跟ConstraintLayout的作用差不多。可以在这里找到RelativeLayout：
在这里插入图片描述

把ConstraintLayout改为RelativeLayout

新建的Activity默认都用ConstraintLayout作为内容区的最外层控件，所以我们要使用RelativeLayout时，有两种办法，一是将一个RelativeLayout放在ConstraintLayout中作为儿子，二是将ConstraintLayout改为RelativeLayout。显然第二种方式更干净，不易受干扰，所以我选择第二种方式玩RelativeLayout。

首先把现在layout文件中的控件都删掉，删除的方法嘛，选中控件点删除键即可。最后只剩下ConstraintLayout。把ConstraintLayout改为RelativeLayout，需要改源码。点“Text”打开源码：
在这里插入图片描述
把android.support.constraint.ConstraintLayout改为RelativeLayout，现在整个Layout文件的源码变成了这样：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="niuedu.com.andfirststep.MainActivity">

</RelativeLayout>

现在界面空了，我们拖一个图像控件进来，然后为它设置图像，最终效果如下：
在这里插入图片描述
我把图像控件放到了左上角。现在属性栏中看不到使用ConstraintLayout时的那些控件了，要了解一个控件的layout位置，只能去属性栏中看那些与layout有关的属性的值。现在进入“View all properties”视图，确保选中了图像，可以看到其属性设置如下：
在这里插入图片描述
红框框起来的是三个与位置有关的属性。第一个是与父控件的左边对齐，第二个是与父控件的开始对齐，第三个是与父控件的顶部对齐。其中alignParentLeft与alignParentStart作用完全一样，都是表示左边，但是Left是旧的叫法，新版API中都改叫Start了。你可以只设置Start，而这两个都设置的话，带来的好处是，可以让你的代码在旧的编译工具中被正确编译。
我不知你是否注意到，当你把一个控件拖进RelativeLayout中时，会出现箭头指示，它表示被拖的控件与谁发生了相对位置关系。可以为控件设置很多种layout属性，这些属性都以“layout_” 开头，在属性栏中向下滚动才能看到。看下图这一坨layout属性吧，要理解它们的作用其实也不难，查一下各单词的意思就行了。
在这里插入图片描述
此时的layout文件的源码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="niuedu.com.andfirststep.MainActivity">
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        app:srcCompat="@drawable/female" />
</RelativeLayout>

RelativeLayout也可以玩出与ConstraintLayout差不多的姿式，下面就让我们玩一玩。

左右对齐与居中

图像控件现在位于最左上角。如果要靠近左上解并保持一定的距离，请设置layout_Margin属性。其实在ConstaintLayout中控件之间的空白也是通过这个属性设置的。
让图像居中，选哪些属性呢? 直接上图：
在这里插入图片描述
我选中了center horizontal（横向居中）和center vertical（纵向居中）。其实你也可以不选这两个，而是只选center in parent（在老爸中居中）。

但是现在看起来并没居中。这是因为在拖入时，设置了靠上和靠左，它们之间是有冲突的！一个控件不能既靠上靠左又要居中吧? 把冲突去掉吧，我们要居中，只能把靠左靠上去掉了。怎么去掉就不用我再演示了吧?

在排版上设置正确了，你的App的界面就可以放之四海而皆可居中了。比如我们把虚拟机旋转一下，看看横屏时是不是还会居中?
在这里插入图片描述
上图中红框内的两个图标就是旋转虚拟机的，很好玩哦。

下面是几种对齐的方案，都试一下吧：

上下居中，横向靠右：
layout_centerVertical + layout_alignParentRight。
上下居中，横向靠左：
layout_centerVertical + layout_alignParentLeft。
纵向靠下，横向居中：
Layout_centerHorizontal+layout_alignParentBottom。

其实你只要认识这几个单词：align（对齐）、parent（父母，就是包含所操作控件的容器）、left（左边），right（右边），top（顶部）、bottom（底部）、width（宽）、height（高）等，你就可以知道那些layout属性的作用了。

充满整个父控件

需这样设置：layout_width=”match_parent” 并且 layout_height=”match_parent”。大家可以看到充满整个父控件后，图像被拉伸变模糊了。为了更能清楚的看到图像控件的大小，我们可以把控件的背景(background)设置为一种颜色（默认是透明的）：
在这里插入图片描述
选中图像控件，然后在background属性行靠右的“…”图标上点一下，就会出现Drawable选择对话框：

你可以选择一个图像作为背景，也可以选择一个颜色。为了容易观察，我们选择一个颜色吧。现在界面变成了下面这个样子：
在这里插入图片描述

兄弟之间相对排

我想这样玩一下：把图像的放在屏幕中间，然后弄一个文本控件显示在图像的上方。图像放中间，我们搞过了，所以先把图像放到中间去，选中以下两个：
在这里插入图片描述
但是，你还要把下面三条删掉(如果被选中的话)：

现在拖一个文本控件（TextView）进来，放到下图所示的位置：

可以看到在拖的过程中，会出现一些虚线和箭头，橘黄色虚线框表示控件拖到的位置，蓝色虚线和箭头表示与谁发生了关系。我们可以看到上图中，被拖动的控件右边与图像控件右边对齐了，向下的箭头表示被拖动的控件的底部与图像的顶部有一个相对距离。在我们拖动完成后，界面设计器会自动为我们设置一些layout相关的属性，让我们看一看都设置了哪些。选中TextView控件，就可以在属性栏看到下图的项：
在这里插入图片描述
有四个Layout相关的属性被设置：

layout_marginBottom ：底部空白。
layout_above ：在谁之上。
layout_alignEnd ：与谁右边对齐。
layout_alignRight ：与谁右边对齐。

注意这些项可能不靠在一起，那么你就需要挨个找找，甚至可能会发现已被设置的layout属性要比上面的多。

Layout_abouve的值是“@+id/imageView2”指向了图像控件，在下图中我们可以看到图像控件的ID的确是“imageView2”（此时选中了图像控件）：
在这里插入图片描述
再说一下padding属性。padding是内部空白的意思，是控件的边到其内容之间的空白，与margin效果看起来差不多但实际很不一样。现在文本控件的layout_marginBottom的值是17dp，就是说文本控件的底边与其它控件之间要空出17dp，于是我们就看到了文本控件与图像控件之间有一定的距离。你可以改个其它值试试。文本控件的layout_above的值是图像控件的id，表示文本控件要在图像控件的上面。

运行APP，旋转屏幕看看，是不是它们的相对位置是不变的? 现在的layout源码是这样的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="niuedu.com.andfirststep.MainActivity">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/colorAccent"
        app:srcCompat="@drawable/female" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/imageView2"
        android:layout_alignEnd="@+id/imageView2"
        android:layout_alignRight="@+id/imageView2"
        android:layout_marginBottom="17dp"
        android:text="TextView" />
</RelativeLayout>

dp是什么

dp是一个表示距离的单位。我并不想说清楚它是怎么计算的，网上有的是文章。我只想说它是与像素无关的单位，它几乎等同于实际的物理距离单位。

试想，一个像素是100x100的图像，在不同的屏幕上按像素显示时会是什么样? 如果一个5寸老屏幕，其宽度上像素数是480，那么这个图像在宽度上占约五分之一，而如果在一个5寸的高分屏上显示的话，假设这个屏幕的宽是1080个像素，那么这个图像只占到十分之一，别忘了这两个都是五寸，实际大小一样，但看到的图像的实际大小差一倍，有可能小到手指头很难点到它了。

所以不能用像素为单位指定控件的大小，而使用“dp”，指定一个与分辩率无关的实际尺寸。在指定距离和大小的地方，千万不要忘记这个单位。

（摘自《Android9编程通俗演义》-清华大学出版社，京东淘宝及各大书店有售）

牛搞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android9编程八：RelativeLayout排版

上一篇：Android9编程七：ConstraintLayout 排版其实在ConstraintLayout出来之前，Android推荐的排版控件是RelativeLayout。它的能力与ConstraintLayout差不多，也是专用于设计复杂的排版。它与ConstraintLayout的区别是，它对于鼠标拖放的方式来布局控件支持得不好，比如我用它时更喜换直接在属性栏中设置与位置相关的各种属性...
复制链接

扫一扫