android 相对布局

最新推荐文章于 2024-07-25 16:05:51 发布

一叶知秋dong

最新推荐文章于 2024-07-25 16:05:51 发布

阅读量2.2k

点赞数 1

分类专栏： android app 开发文章标签： android layout encoding dependencies xml class

android app 开发专栏收录该内容

77 篇文章 2 订阅

订阅专栏

相对布局（Relative Layout）的作用就像它的名字所描述的那样：它相对于另一控件或者它本身的父控件来布置控件。这是什么意思呢？它意味着子控件，像ImageView，TextView和Button这些控件，能够摆放在其他控件的上、下、左或右方。子控件同样也能相对于父控件（相对布局的容器）去摆放，例如对齐在父布局的上、下、左或右边缘上。

相对布局（Relative Layout）摆放子控件的是由一系列的原则定义的。这些原则定义了在相对布局（Relative Layout）内的控件如何显示。对于相对布局（Relative Layout）原则的完整列表，请参阅AndroidSDK文档中的RelativeLayout类。在文档中也定义了使用在XML资源文件中的相关的XML属性。

注：原则规定每个子控件都需要正确设置ID属性。

探索相对布局（Relatvie Layout）中的重要特性和属性

现在让我们来聊聊关于有助于配置相对布局（Relative Layout）和它的子控件的属性。一些特定的属性适用于相对布局（Relative Layout）的子控件原则，其中包括：

在父布局中子控件居中的原则，包括：水平居中，垂直居中，或者二者同时。
在父布局中子控件对齐的原则，包括：根据另一个控件上、下、左或右边缘对齐。
子控件相对其他子控件对齐的原则，包括：根据上、下、左或右边缘对齐。
子控件相对于其他子控件摆放位置的原则，包括：摆放在指定控件的左边、右边，或者另一个控件上面和下面。

同样，ViewGroup样式的一般属性也适用于相对布局（Relative Layout）。他们包括：

通用布局参数，如layout_height和layout_width（必需）（class: ViewGroup.LayoutParams）
边距布局参数，如margin_top，margin_left，margin_right和margin_bottom（class: ViewGroup. MarginLayoutParams）
布局参数，如layout_height和layout_width（class: ViewGroup.LayoutParams）

现在让我们在程序中应用这些原则！

使用布局原则

让我们看一个更复杂的屏幕设计。为了练习的目的，我们将先看一下最后的屏幕设计结果，然后再从头设计，讨论用来实现这一最后结果的相对布局（Relative Layout）的特点和原则。

比方说我们想要设计这样的一个屏幕：

为了使用相对布局（Relative Layout）设计这个屏幕，我们将完成下列的步骤：

Step 1: 在你的XML布局资源文件中定义一个相对布局（Relative Layout）

首先，在你的XML资源文件中定义一个相对布局（Relative Layout）。因为你想使用这个布局来控制整个屏幕的内容，设置它的高度和宽度属性为fill_parent。你的XML资源文件现在应该像下面这个样子：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_height="fill_parent"  
    android:layout_width="fill_parent">
</RelativeLayout>

Step 2: 确定子控件

下一步，我们确定我们需要哪些子控件。在本例中，我们需要七个TextView控件（每个控件一种颜色）。正常配置它们，用字符串设置文本属性，背景颜色，字体大小等。并把这些控件放在你的相对布局（Relative Layout）中。

Step 3: 定义相对布局（Relative Layout）原则

接下来，为了让每个控件画在合适的位置上，我们为每个控件定义原则：

红色的TextView控件没有配置的具体设置。默认情况下，这个控件将被绘制在父布局的左上角。
橙色的TextView控件在父布局中水平居中。由于所有控件默认在屏幕的左上角，这有效地标记了父布局顶部边缘的中间位置。
黄色的TextView控件的父布局的右边缘对齐。由于所有控件默认在屏幕的左上角，这有效地标记了父布局右上角的位置。
绿色的TextView控件在父布局中垂直居中，并且使它显示在蓝色TextView控件的左侧。
蓝色的TextView控件对齐在父控件的中心（水平和垂直）。它显示在屏幕正中间。
靛蓝色的TextView控件在父布局中垂直居中，并且使它显示在蓝色TextView控件右边。
紫色的TextView控件的父布局的底边对齐。它的宽度被设置为填满父控件，使得它横跨屏幕的底边。

如果你在你的XML资源文件中定义了这些原则，那么你的代码应该像下面这个样子：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:text="RED"
android:id="@+id/TextView01"
android:layout_height="wrap_content"
android:background="#f00"
android:gravity="center"
android:textColor="#000"
android:layout_width="wrap_content"
android:padding="25dp"></TextView>
<TextView
android:text="ORANGE"
android:layout_height="wrap_content"
android:background="#ffa500"
android:gravity="center"
android:textColor="#000"
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:padding="25dp"></TextView>
<TextView
android:text="YELLOW"
android:layout_height="wrap_content"
android:background="#ffff00"
android:gravity="center"
android:textColor="#000"
android:id="@+id/TextView03"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:padding="25dp"></TextView>
<TextView
android:text="GREEN"
android:layout_height="wrap_content"
android:background="#0f0"
android:gravity="center"
android:textColor="#000"
android:id="@+id/TextView04"
android:layout_width="wrap_content"
android:layout_toLeftOf="@+id/TextView05"
android:padding="25dp"
android:layout_centerVertical="true"></TextView>
<TextView
android:text="BLUE"
android:layout_height="wrap_content"
android:background="#00f"
android:gravity="center"
android:textColor="#fff"
android:id="@+id/TextView05"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:padding="25dp"></TextView>
<TextView
android:text="INDIGO"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#fff"
android:id="@+id/TextView06"
android:layout_width="wrap_content"
android:layout_toRightOf="@+id/TextView05"
android:background="#4b0082"
android:padding="25dp"
android:layout_centerVertical="true"></TextView>
<TextView
android:text="VIOLET"
android:layout_height="wrap_content"
android:background="#ee82ee"
android:gravity="center"
android:textColor="#000"
android:id="@+id/TextView07"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:padding="25dp"></TextView>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_height="fill_parent"  
    android:layout_width="fill_parent">  
  
    <TextView  
        android:text="RED"  
        android:id="@+id/TextView01"  
        android:layout_height="wrap_content"  
        android:background="#f00"  
        android:gravity="center"  
        android:textColor="#000"  
        android:layout_width="wrap_content"  
        android:padding="25dp"></TextView>  
  
    <TextView  
        android:text="ORANGE"  
        android:layout_height="wrap_content"  
        android:background="#ffa500"  
        android:gravity="center"  
        android:textColor="#000"  
        android:id="@+id/TextView02"  
        android:layout_width="wrap_content"  
        android:layout_centerHorizontal="true"  
        android:padding="25dp"></TextView>  
  
    <TextView  
        android:text="YELLOW"  
        android:layout_height="wrap_content"  
        android:background="#ffff00"  
        android:gravity="center"  
        android:textColor="#000"  
        android:id="@+id/TextView03"  
        android:layout_width="wrap_content"  
        android:layout_alignParentRight="true"  
        android:padding="25dp"></TextView>  
  
    <TextView  
        android:text="GREEN"  
        android:layout_height="wrap_content"  
        android:background="#0f0"  
        android:gravity="center"  
        android:textColor="#000"  
        android:id="@+id/TextView04"  
        android:layout_width="wrap_content"  
        android:layout_toLeftOf="@+id/TextView05"  
        android:padding="25dp"  
        android:layout_centerVertical="true"></TextView>  
  
    <TextView  
        android:text="BLUE"  
        android:layout_height="wrap_content"  
        android:background="#00f"  
        android:gravity="center"  
        android:textColor="#fff"  
        android:id="@+id/TextView05"  
        android:layout_width="wrap_content"  
        android:layout_centerInParent="true"  
        android:layout_margin="10dp"  
        android:padding="25dp"></TextView>  
  
    <TextView  
        android:text="INDIGO"  
        android:layout_height="wrap_content"  
        android:gravity="center"  
        android:textColor="#fff"  
        android:id="@+id/TextView06"  
        android:layout_width="wrap_content"  
        android:layout_toRightOf="@+id/TextView05"  
        android:background="#4b0082"  
        android:padding="25dp"  
        android:layout_centerVertical="true"></TextView>  
  
    <TextView  
        android:text="VIOLET"  
        android:layout_height="wrap_content"  
        android:background="#ee82ee"  
        android:gravity="center"  
        android:textColor="#000"  
        android:id="@+id/TextView07"  
        android:layout_alignParentBottom="true"  
        android:layout_width="fill_parent"  
        android:padding="25dp"></TextView>  
  
</RelativeLayout>

相对布局（Relative Layout）用法提示

这有一些关于相对布局（Relative Layout）的用法提示。

为了正确的应用规则，相对布局（Relative layout）的子控件必须有唯一的ID属性。
注意那些循环原则。当两个控件都通过原则指向另外一个的时候，循环原则就产生了。如果在你的布局设计中包含一个循环原则集，你将会遇到下面这样的错误：

IllegalStateException: Circular dependencies cannot exist in a RelativeLayout

IllegalStateException: Circular dependencies cannot exist in a RelativeLayout

它可以帮助你熟记相对布局（Relative Layout）的规则。

保持你的相对布局（Relative Layout）原则到最小程度。这将有助于减少循环原则的机会，并且可以使你的布局更易于管理和灵活。

像往常一样，要记住在纵向和横向模式和不同的屏幕尺寸和分辨率去测试你的布局是否获得期望的设计效果。

使用相对布局（Relative Layout）来代替嵌套的线性布局可以提高应用程序性能和响应时间。

一叶知秋dong

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
android 相对布局

相对布局（Relative Layout）的作用就像它的名字所描述的那样：它相对于另一控件或者它本身的父控件来布置控件。这是什么意思呢？它意味着子控件，像ImageView，TextView和Button这些控件，能够摆放在其他控件的上、下、左或右方。子控件同样也能相对于父控件（相对布局的容器）去摆放，例如对齐在父布局的上、下、左或右边缘上。相对布局（Relative La
复制链接

扫一扫

专栏目录