Android 布局入门

Activity 和布局

Activity 是用户可以执行的单一任务。Activity 负责创建新的窗口供应用绘制和从系统中接收事件。Activity 是用 Java 编写的，扩展自 Activity 类。

Activity 会创建视图来向用户显示信息，并使用户与 Activity 互动。视图是 Android UI 框架中的类。它们占据了屏幕上的方形区域，负责绘制并处理事件。Activity 通过读取 XML 布局文件确定要创建哪些视图（并放在何处）。正如 Dan 提到的，这些 XML 文件存储在标记为 layouts 的 res 文件夹内。

布局 XML

XML 看起来是怎样的？请看下面的示例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:padding="16dp"
   tools:context="com.example.android.exampleapp.MainActivity">
   <EditText

       android:id="@+id/edit_text_name_input"

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:background="@color/colorAccent"

       android:hint="Enter your name"

       android:padding="4dp"

       android:textSize="24sp" />
   <TextView

       android:id="@+id/text_view_name_display"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_gravity="center"

       android:layout_marginTop="8dp"

       android:text="Your name appears here"

       android:textSize="30sp" />

</LinearLayout>

在手机屏幕上如下所示：

视图类型：UI 组件

视图分为两大类别。第一种类型是 UI 组件，通常具有互动性。下面是几个示例：

android.widget 程序包包含了你可以使用的大部分 UI 视图类的列表。

视图类型：容器视图

第二种视图叫做“布局”或“容器”视图。它们扩展自 ViewGroup 类。它们主要负责包含一组视图并判断放在屏幕的何处。“包含一组视图”是指视图将嵌套在其他视图标记中，例如：

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:orientation="vertical"

   tools:context="com.example.android.exampleapp.MainActivity">

   <TextView

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_gravity="center"

       android:text="A"

       android:textSize="30sp" />

   <TextView

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_gravity="center"

       android:text="B"

       android:textSize="30sp" />

   <TextView

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_gravity="center"

       android:text="C"

       android:textSize="30sp" />

</LinearLayout>

看起来像：

常见容器视图示例：

注意，布局视图可以相互嵌套，所以你可以将 LinearLayout 嵌套到其他 LinearLayout 中。

XML 属性

视图在 XML 中具有属性，可以控制视图的属性。这是之前的一个示例：

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:orientation="vertical"

   android:padding="16dp"

   tools:context="com.example.android.exampleapp.MainActivity">

   <EditText

       android:id="@+id/edit_text_name_input"

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:background="@color/colorAccent"

       android:hint="Enter your name"

       android:padding="4dp"

       android:textSize="24sp" />
   <TextView

       android:id="@+id/text_view_name_display"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_gravity="center"

       android:layout_marginTop="8dp"

       android:text="Your name appears here"

       android:textSize="30sp" />

</LinearLayout>

属性包括 textSize 和 padding。每个视图都具有大量的属性，可以在相关的文档页面查看这些属性。这些属性可以设为不同的值。属性确定了视图的外观细节和互动方式。我们来看几个属性示例，很快你将用到这些属性。

Text

android:text 属性是 XML 中可以修改的非常简单的属性示例。在上述代码中，有一行内容：

android:text="Your name appears here"

使 TextView 显示单词：

宽度和高度

最重要的属性之一是宽度属性和高度属性，每个视图都必须定义这两个属性。注意，所有视图都在屏幕上占据一个方形区域：宽度和高度属性即该区域的宽度和高度。你可以用像素定义这两个属性，或者最好使用 dp（表示密度独立像素，我们将在后面的课程中详细介绍）：

android:layout_width="200dp"

android:layout_height="300dp"

为了使布局能够自适应，并针对不同的设备进行调整，两个常见的值根本不是数字，而是 wrap_content 和 match_parent，如下所示：

android:layout_width="wrap_content"

android:layout_height="match_parent"

Wrap_content 将收缩视图，以便包含在视图中显示的任何内容。例如，如果视图中包含文字“Hello world”，那么宽度 wrap_content 会将视图的宽度设为完全等于文字“Hello world”在屏幕上占据的宽度”。

Match_parent 将扩展视图的尺寸，使其与所位于的父视图的尺寸一样大。

Padding 和 Margin

padding 和 layout_margin 是两个非常相似的属性。二者都决定了视图周围的空间。区别在于padding 确定的是视图里的边界，而 layout_margin 确定的是视图外面的边界。要了解完整的示例，请观看这一关于 Padding 和 Margin 的视频。

XML 布局与 Java Activity 有何关系？

创建 XML 布局后，你需要将其与你的 Activity 相关联。你可以在 Activity 的 onCreate 方法中使用 setContentView 方法进行关联。你可以以 R.layout.name_of_layout 的形式引用布局文件。例如，如果你的布局名称为 activity_main.xml，则如下所示：

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) { 

       super.onCreate(savedInstanceState);

       setContentView(R.layout.activity_main); 

       // other code to setup the activity

    }    

    // other code

}

 此时，你可能有两个问题，首先什么是 R.layout，其次，实际上 setContentView 是干什么的？

R 类

当你的应用被编译时，系统会生成 R 类。它会创建常量，使你能够动态地确定 res 文件夹的各种内容，包括布局。要了解详情，请参阅关于资源的文档。

setContentView

那么 setContentView 方法是干什么的？它会扩展布局。本质上是 Android 会读取你的 XML 文件并为你的布局文件中的每个标记生成 Java 对象。然后，你可以在 Java 代码中通过对 Java 对象调用方法修改这些对象。我们将在这门课程的稍后阶段看看这些方法并了解如何访问布局文件中的视图。