Android UI Design 03 : 线性布局 Linear Layout

最新推荐文章于 2022-11-08 09:41:47 发布

JimmySO

最新推荐文章于 2022-11-08 09:41:47 发布

阅读量1.1k

点赞数

分类专栏： Android UI Design 文章标签： layout android ui xml java encoding

Android UI Design 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原文地址：http://mobile.tutsplus.com/tutorials/android/android-sdk_linear-layouts_2/

对于设计好的应用程序理解布局是非常重要的。在本教程中，你可以学到关于线性布局(Linear Layout)的一切，其中包括在屏幕上垂直和水平的排列用户接口控件或者Widget。使用得当的话，利用线性布局(Linear Layout)作为基本布局可以设计出许多有趣的Android应用。

什么是线性布局(Linear Layout)?

线性布局(Linear layout)是一种Android开发人员去组织他们的用户接口最简单而且最普通的布局类型。线性布局(Linear Layout)正如它的名字所描述的那样：它以垂直或水平的方式线性的组织控件。当布局的方向设置为垂直时，所有的子控件都被排列在一列上；当布局的方向设置为水平时，所有的子控件都被排列在一行上。

线性布局(Linear layout)可以通过XML布局文件或程序中的Java代码来定义。

下面的图片显示了一个包含了7个TextView空间的线性布局(Linear Layout)。这个线性布局的方向设置为垂直，所以每个TextView都被排列在一列上。每个TextView控件都使用一个颜色集来设置背景颜色，每个控件一种颜色；每个控件通过设置layout_width属性为fill_parent来铺满屏幕的宽度。

通过XML文件来定义一个线性布局(Linear Layout)

最方便和可维护的去设计应用程序的用户界面的方法是创建XML布局文件。这种方法设计UI的过程很简单，与杂乱的代码相比，XML布局文件可以使用布局设计器来拖拽控件来摆放控件，并且设置控件的属性。

XML布局文件必须存储在项目的/res/layout文件夹下。让我们来看一下上一节讲的彩虹线性布局(Linear Layout)。同样，这个垂直线性布局通过设置它的layout_width和layout_height属性为fill_parent来填满整个屏幕。这个布局文件合适的名字是/res/layout/rainbow.xml，在XML文件中由下面的代码定义：

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent" android:layout_height="fill_parent"  
    android:orientation="vertical">  
    <TextView android:text="RED" android:id="@+id/TextView01"  
        android:layout_height="wrap_content" android:background="#f00"  
        android:layout_width="fill_parent" android:layout_weight=".14"  
        android:gravity="center" android:textColor="#000"></TextView>  
    <TextView android:text="ORANGE" android:id="@+id/TextView02"  
        android:layout_height="wrap_content" android:layout_width="fill_parent"  
        android:layout_weight=".15" android:background="#ffa500"  
        android:gravity="center" android:textColor="#000"></TextView>  
    <TextView android:text="YELLOW" android:id="@+id/TextView03"  
        android:layout_height="wrap_content" android:layout_width="fill_parent"  
        android:layout_weight=".14" android:background="#ffff00"  
        android:gravity="center" android:textColor="#000"></TextView>  
    <TextView android:text="GREEN" android:id="@+id/TextView04"  
        android:layout_height="wrap_content" android:layout_width="fill_parent"  
        android:layout_weight=".15" android:background="#0f0" android:gravity="center"  
        android:textColor="#000"></TextView>  
    <TextView android:text="BLUE" android:id="@+id/TextView05"  
        android:layout_height="wrap_content" android:layout_width="fill_parent"  
        android:layout_weight=".14" android:background="#00f" android:gravity="center"  
        android:textColor="#fff"></TextView>  
    <TextView android:text="INDIGO" android:id="@+id/TextView06"  
        android:layout_height="wrap_content" android:layout_width="fill_parent"  
        android:layout_weight=".14" android:background="#4b0082"  
        android:gravity="center" android:textColor="#fff"></TextView>  
    <TextView android:text="VIOLET" android:id="@+id/TextView07"  
        android:layout_height="wrap_content" android:layout_width="fill_parent"  
        android:layout_weight=".14" android:background="#ee82ee"  
        android:gravity="center" android:textColor="#000"></TextView>  
</LinearLayout>

或许你已经注意到线性布局(Linear Layout)的子控件有一些有趣的属性，包括一个叫做layout_weight的属性。下面我们将花几分钟来讨论一下关于这方的事情。

下面的两张图片分别显示了布局在设备上的横屏和竖屏模式：

回忆一下，在Activity中只需要在onCreate()方法中使用一行代码来读取并在屏幕上显示布局资源文件的方法。如果布局资源文件存储在/res/layout/rainbow.xml文件中，那么这一行代码是：

setContentView(R.layout.rainbow);

通过程序代码来定义一个线性布局(Linear Layout)

同样你可以通过程序来创建和设置线性布局(Linear Layout)。你可以使用LinearLayout类(android.widget.LinearLayout)。你会发现在LinearLayout.LayoutParams类中有许多专用的参数。同时也有其特有的的布局参数(android.view.ViewGroup.LayoutParams)，如layout_height和layout_width，以及边距参数(ViewGroup.MarginLayoutParams)，这些都可以在线性布局(Linear Layout)中使用。
与我们之前所讲的读取一个布局资源文件并直接使用在setContentView()方法中不同，这里你必须用Java代码提供一个包含所有作为子控件视图的父布局对象，并使用setContentView()方法显示在屏幕上。在下面的例子中，父布局是一个线性布局(Linear Layout)。
例如，下面的代码说明了如何在Activity的onCreate()方法中用程序实例化一个线性布局(Linear Layout)并放置三个TextView对象：

public void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    // setContentView(R.layout.rainbow);  
    TextView tv1 = new TextView(this);  
    tv1.setText("FIRST");  
    tv1.setTextSize(100);  
    tv1.setGravity(Gravity.CENTER);  
  
    TextView tv2 = new TextView(this);  
    tv2.setTextSize(100);  
    tv2.setGravity(Gravity.CENTER);  
    tv2.setText("MIDDLE");  
  
    TextView tv3 = new TextView(this);  
    tv3.setTextSize(100);  
    tv3.setGravity(Gravity.CENTER);  
    tv3.setText("LAST");  
  
    LinearLayout ll = new LinearLayout(this);  
    ll.setOrientation(LinearLayout.VERTICAL);  
    ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
    ll.setGravity(Gravity.CENTER);  
    ll.addView(tv1);  
    ll.addView(tv2);  
    ll.addView(tv3);  
    setContentView(ll);  
}

下面的两张图片分别显示了布局在设备上的横屏和竖屏模式：

让我们来仔细分析一下上面所列的Java代码吧。首先，创建并为三个TextView控件设置属性。为每个控件设置文本大小(font size)，对齐方式(gravity)和文本内容。接下来，创建一个垂直方向的线性布局(Linear Layout)。它的布局参数可以设置为填满整个父控件区域（在本例中，填满整个屏幕）并且他的对齐方式使得所有的子控件以左上角为基点在屏幕中居中显示。使用addView()方法把三个TextView添加到父控件中。最后一步，使用setContentView()方法把线性布局(Linear Layout)作为父控件显示在屏幕上。
正如你所看到的，使用代码能快速的把更多的控件增加到屏幕上。为了可组织和可维护性，对于一些怪异的项目，与传统方法相比用程序来定义布局是最好的办法了。

探索线性布局(Linear Layout)中重要的属性

现在让我们来讨论一下对配置线性布局(Linear Layout)和它的子控件有用的属性。

应用于线性布局(Linear Layout)中一些特定的属性。你会使用在线性布局(Linear Layout)中的一些最重要的属性包括：

设置垂直或水平的方向属性（必须）（类：LinearLayout）
设置所有子控件如何在线性布局(Linear Layout)中对齐和显示的对齐方式属性（可选）（类：LinearLayout）
设置特定的子控件在父线性布局(Linear Layout)中的相对重要性的layout_weight属性（可选，每个子控件都需要设置）（类：LinearLayout.LayoutParams）

此外，普通的ViewGroup的样式也可以用在线性布局(Linear Layout)上。这些属性包括：

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

权衡子控件

大部分的线性布局(Linear Layout)都有完美的解释。然而，layout_weight属性值得额外讨论一下。与那些应用在线性布局视图本身的属性不同，这个属性是应用于它的子控件的。权值本身应该是个数值（例如.50，.25，.10，.10，.05），并且把所有子控件的权值加在一起应该等于1（100%）。

权值表示的是一个子控件有多“重要”或者其在父线性布局中有多少“空间”。下面让我们来用一个例子来说明它。让我们回到之前我们所做的彩虹线性布局。不管屏幕的大小如何，为了允许子控件都可以在线性布局中“扩展”，我们通过layout_weight属性给每个TextView设置相对权值。这有七种颜色，为了使它们的宽度相等，我们在1到7个颜色的权值中都使用0.143的权值。但是为了使权值的和加起来为1，其中5个控件的权值设为0.14，另外2个控件的权值设为0.15—这种细微的差别使得我们的权值之和刚好为1，但是第一个和最后一个控件很明显跟其他的相比不是那么协调。

使用权值的这个技巧对所有控件在屏幕上有足够的显示空间非常有用。也就是说，权值属性可能会被其他因素所覆盖，如一个不换行TextView。我们可以想象到，当我们改变rainbow.xml布局文件并且包含一个水平的布局时的情况（layout_height同样也设为fill_parent）。
下面两张图片显示了相同的布局（仅仅改变成了水平方向）在设备上的横屏和竖屏模式：

我们期望红色和紫色（权值为0.15）区域要比其他颜色（权值为0.14）的区域稍大一些，但是并没有那样显示。仔细看那个红色的TextView，它并没有比与它临近的橙色TextView占用更多的空间。因为“Red”这个词长度比“Orange”要短，为了能裹住所有的词，有些宽度的调整是自动完成的。这种结果可能更令人更舒服，但是如果这不是我们所期望的结果，可能对于我们日以继夜工作的成果感觉有点郁闷。