gravity、layout_gravity及orientation

gravity、layout_gravity及orientation

 

　　最近在弄一个简单的界面：横向，添加一张准备好的背景图，在界面右边居中放置一个按钮。实现过程中发现对布局的主要属性没有想象中地那么熟悉，又重新找资料树梳理了一遍，这里总结一下。

 

       1、gravity、layout_gravity及orientation基本概念

　　gravity，中文意思为重心（理科生不会陌生吧），表示组件（View）横向和纵向的停靠位置。如果不进行任何设置，默认是靠左。

　　android:gravity，对组件本身来说的，作用是设置表示组件包含的内容显示在表示组件的什么位置，默认值为左侧。最常见的例子就是组件上的文本，如android:gravity=”center”，那么文本显示位置为垂直和水平方向均居中。

　　android:layout_gravity，相对于包含该组件（元素）的父组件来说的，设置该组件在父组件的显示位置。若android:layout_gravity="center_vertical"，那么该组件在父组件中的位置为垂直方向居中，但水平方向可能是靠左的。orientation，线性布局时以列或行来显示内部子元素，注意在其他布局一般用不到该属性，如AbsoluteLayout等。该属性默认是水平排列（horizontal），即以行的形式来布置包含的子组件，在实际应用程序的开发中用得较多是垂直排布，即不一定要进行如下设定：android:orientation=”vertical”。

 

　　2、gravity与layout_gravity属性介绍

　　top，Put the object at the top of its container, not changing its size。将对象放在其容器的顶部，不改变其大小。

　　bottom，Put the object at the bottom of its container, not changing its size。将对象放在其容器的底部，不改变其大小。

　　left，Put the object at the left edge of its container, not changing its size。将对象放在其容器的左侧，不改变其大小。

　　right ，Put the object at the right edge of its container, not changing its size。将对象放在其容器的右侧，不改变其大小。

　　center_vertical，Place object in the vertical center of its container, not changing its size。将对象纵向居中，不改变其大小。垂直对齐方式：垂直方向上居中对齐。

　　fill_vertical，Grow the vertical size of the object if needed so it completely fills its container。必要的时候增加对象的纵向大小，以完全充满其容器。垂直方向填充。

　　center_horizontal，Place object in the horizontal center of its container, not changing its size。将对象横向居中，不改变其大小。水平对齐方式：水平方向上居中对齐

　　fill_horizontal， Grow the horizontal size of the object if needed so it completely fills its container。必要的时候增加对象的横向大小，以完全充满其容器。

　　center，Place the object in the center of its container in both the vertical and horizontal axis, not changing its size。将对象横纵居中，不改变其大小。

　　fill，Grow the horizontal and vertical size of the object if needed so it completely fills its container。This is the default。必要的时候增加对象的横纵向大小，以完全充满其容器。水平方向填充。

　　clip_vertical，Additional option that can be set to have the top and/or bottom edges of the child clipped to its container's bounds。 The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges。附加选项，用于按照容器的边来剪切对象的顶部和/或底部的内容。 剪切基于其纵向对齐设置：顶部对齐时，剪切底部；底部对齐时剪切顶部；除此之外剪切顶部和底部。垂直方向裁剪。

　　clip_horizontal，Additional option that can be set to have the left and/or right edges of the child clipped to its container's bounds。 The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges。附加选项，用于按照容器的边来剪切对象的左侧和/或右侧的内容。 剪切基于其横向对齐设置：左侧对齐时，剪切右侧；右侧对齐时剪切左侧；除此之外剪切左侧和右侧。水平方向裁剪。

 

　　3、xml代码实现

　　界面的横向设置与背景图的添加很容易实现，针对按钮靠右居中，刚开始没有想到利用orientation这个属性，想当然地以为layout_gravity能够搞定，所以过程有点波折。

　　整体设计思路为：最外层放置一个LinearLayout，设置子组件的布局为垂直方向居中并靠右，代码如下：

android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|right"
android:background="@drawable/login_bg"

　　里层再放置一个LinearLayout，用来放置具体的按钮。通过上一步的设置，该LinearLayout显示在了界面的右边，并且是垂直方向居中（其实一般应用中是让该LinearLayout的layout_height属性为match_parent，故父组件中gravity属性的center_vertical值可以不添加）。

　　到这里，完成了大半，接下来就是添加按钮。注意，目标是让按钮在界面上靠右并居中。刚开始将内层LinearLayout的gravity属性设置为垂直居中，纵向铺满屏幕，为了美观，让其距界面右边界40个像素无关点。代码如下：

android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginRight="@dimen/margin_Right"

　　但是问题来了，添加三个按钮，以为能够达到预想的效果：水平与垂直方向上均居中地排布在内层的LinearLayout中，并且第二个在第一个下面，第三个在第二个下面。然而，现实是这样的：

　　后面看了一些例子，恍然大悟，子组件的纵向或横向上的排布，需要借助orientation属性。马上加入代码：

　　android:orientation="vertical"

　　满意的结果出现了：

　　三个按钮的实现代码如下：

<Button android:id="@+id/button1"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="@string/login_by_weixin"
    android:textColor="@string/color_weixin"
    android:textSize="@dimen/margin_Right" />

<Button android:id="@+id/button2"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:text="@string/logout_by_weixin"
    android:textColor="@string/color_weixin"
    android:textSize="@dimen/margin_Right" />

<Button android:id="@+id/button3"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:text="@string/close"
    android:textColor="@string/color_weixin"
    android:textSize="@dimen/margin_Right" />

　　代码中对按钮的大小、具体位置、文本（颜色、大小）进行了设置。

　　可以发现，若仅将LinearLayout的gravity属性设置为垂直居中，那么当子组件个数大于1时，会全部排列在居中位置，放不下只会在水平方向上错位显示，并不会从上到下依次排布，此时就需要借助orientation属性了。