Xamarin 简明教程

Xamarin - Layouts

Linear Layout

在线性布局中，内容水平或垂直排列。

In linear layout, the contents are arranged in either horizontal or vertical manner.

Linear Layout ─ Horizontal

此布局的内容水平排列。对于此演示，我们将创建 3 个按钮并将它们水平排列在线性布局中。

The contents of this layout are arranged horizontally. For this demo, we are going to create 3 buttons and arrange them horizontally in a linear layout.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:orientation = "horizontal"
   android:layout_width = "fill_parent"
   android:layout_height = "fill_parent"
   android:background = "#d3d3d3"
   android:minWidth="25px"
   android:minHeight="25px">
   <Button
      android:id="@+id/MyButton1"
      android:layout_width="wrap_content"
      android:layout_margin="10dp"
      android:layout_height="wrap_content"
      android:text="Button 1"
      android:background="@android:color/holo_green_dark" />
   <Button
      android:id="@+id/MyButton2"
      android:layout_width="wrap_content"
      android:layout_margin="10dp"
      android:layout_height="wrap_content"
      android:text="Button 2"
      android:background="@android:color/holo_green_dark" />
   <Button
      android:id="@+id/MyButton3"
      android:layout_width="wrap_content"
      android:layout_margin="10dp"
      android:layout_height="wrap_content"
      android:text="Button 3"
      android:background="@android:color/holo_green_dark" />
</LinearLayout>

结果输出如下所示 -

The resulting output is as shown below −

linear layout horizontal

Linear Layout ─ Vertical

这种类型的布局将子视图垂直放置。

This type of layout places the child view in a vertical manner.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:orientation = "vertical"
   android:layout_width = "fill_parent"
   android:layout_height = "fill_parent"
   android:background = "#d3d3d3"
   android:minWidth = "25px"
   android:minHeight = "25px">
   <Button
      android:id = "@+id/MyButton1"
      android:layout_width = "fill_parent"
      android:layout_margin = "10dp"
      android:layout_height = "wrap_content"
      android:text = "Button 1"
      android:background = "@android:color/holo_green_dark" />
   <Button
      android:id = "@+id/MyButton2"
      android:layout_width = "fill_parent"
      android:layout_margin = "10dp"
      android:layout_height = "wrap_content"
      android:text = "Button 2"
      android:background = "@android:color/holo_green_dark" />
   <Button
      android:id = "@+id/MyButton3"
      android:layout_width = "fill_parent"
      android:layout_margin = "10dp"
      android:layout_height = "wrap_content"
      android:text="Button 3"
      android:background = "@android:color/holo_green_dark" />
</LinearLayout>

其结果输出如下 -

Its resulting output is as follows −

linear layout vertical

Relative Layout

在此视图中，子视图的位置相对于其父视图或其兄弟视图。在以下示例中，我们将创建 3 个 EditText 视图和一个按钮，然后相对排列它们。

In this view, the position of the child view is relative to its parent or to its sibling view. In the following example, we are going to create 3 EditText views and a button and then, align them relatively.

创建一个新项目并将其命名为 relative layout app 。打开 main.axml 并添加以下代码。

Create a new project and call it relative layout app. Open main.axml and add the following code.

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   android:paddingLeft = "16dp"
   android:background = "#d3d3d3"
   android:paddingRight = "16dp">
   <EditText
      android:id = "@+id/name"
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:hint = "First Name"
      android:textColorHint = "@android:color/background_dark"
      android:textColor = "@android:color/background_dark" />
   <EditText
      android:id = "@+id/lastName"
      android:layout_width = "0dp"
      android:layout_height = "wrap_content"
      android:hint = "Last Name"
      android:layout_below = "@id/name"
      android:textColorHint = "@android:color/background_dark"
      android:textColor = "@android:color/background_dark"
      android:layout_alignParentLeft = "true"
      android:layout_toLeftOf = "@+id/age" />
   <EditText
      android:id = "@id/age"
      android:layout_width = "80dp"
      android:layout_height = "wrap_content"
      android:layout_below = "@id/name"
      android:hint = "Age"
      android:textColorHint = "@android:color/background_dark"
      android:textColor = "@android:color/background_dark"
      android:layout_alignParentRight = "true" />
   <Button
      android:layout_width = "85dp"
      android:layout_height = "wrap_content"
      android:layout_below = "@id/age"
      android:layout_alignParentRight = "true"
      android:text = "Submit"
      android:background = "@android:color/holo_green_dark" />
</RelativeLayout>

此代码中我们使用的重要参数为 -

The important parameters that we have used in this code are −

  1. android:layout_below − It aligns the child view element below its parent.

  2. android:layout_alignParentLeft − It aligns the parent element to the left.

  3. android:layout_toLeftOf − This property aligns an element to the left of another element.

  4. android:layout_alignParentRight − It aligns the parent to the right.

当您现在构建并运行该应用程序时，它将生成以下输出屏幕 -

When you build and run the App now, it would produce the following output screen −

relative layout

Frame Layout

框架布局用于仅显示一个项目。在此布局中排列多个项目而不会让它们相互重叠是很困难的。

The frame layout is used to display only one item. It’s difficult to arrange multiple items in this layout without having them overlap each other.

启动一个新项目并将其命名为 frameLayoutApp 。创建新的框架布局，如下所示。

Start a new project and call it frameLayoutApp. Create a new Frame Layout as shown below.

<?xml version = "1.0" encoding = "utf-8"?>
<FrameLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:layout_width = "fill_parent"
   android:layout_height = "fill_parent">
  <ImageView
      android:id = "@+id/ImageView1"
      android:scaleType = "matrix"
      android:layout_height = "fill_parent"
      android:layout_width = "fill_parent"
      android:src = "@drawable/img1" />
   <TextView
      android:layout_width = "fill_parent"
      android:layout_height = "wrap_content"
      android:textSize = "50dp"
      android:textColor = "#000"
      android:text = "This is a Lake" />
   <TextView
      android:gravity = "right"
      android:layout_width = "fill_parent"
      android:layout_height = "wrap_content"
      android:textSize = "50dp"
      android:text = "A very Deep Lake"
      android:layout_gravity = "bottom"
      android:textColor = "#fff" />
</FrameLayout>

以上代码创建了一个 imageView ，它填满了整个屏幕。然后两个文本视图悬浮在 imageView 以上。

The above code creates an imageView which fills the entire screen. Two textviews then float above the imageView.

现在，构建并运行您的应用程序。它将显示以下输出 -

Now, build and run your application. It will display the following output −

frame layout

Table Layout

在此布局中，视图排列在 rows 和 columns 中。让我们看看其工作方式。

In this layout, the view is arranged into rows and columns. Let’s see how it works.

<?xml version = "1.0" encoding = "utf-8"?>
<TableLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:layout_width = "fill_parent"
   android:background = "#d3d3d3"
   android:layout_height = "fill_parent"
   android:stretchColumns = "1">

   <TableRow>
      <TextView
         android:text = "First Name:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:textColor = "@android:color/black" />
      <EditText
         android:width = "100px"
         android:layout_width = "fill_parent"
         android:layout_height = "30dp"
         android:textColor = "@android:color/black" />
   </TableRow>

   <TableRow>
      <TextView
         android:text = "Last Name:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:textColor = "@android:color/black" />
      <EditText
         android:width = "50px"
         android:layout_width = "fill_parent"
         android:layout_height = "30dp"
         android:textColor = "@android:color/black" />
   </TableRow>

   <TableRow>
      <TextView
         android:text = "Residence:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:textColor = "@android:color/black" />
      <EditText
         android:width = "100px"
         android:layout_width = "fill_parent"
         android:layout_height = "30dp"
         android:textColor = "@android:color/black" />
   </TableRow>

   <TableRow>
      <TextView
         android:text = "Occupation:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:textColor = "@android:color/black" />
      <EditText
         android:width = "100px"
         android:layout_width = "fill_parent"
         android:layout_height = "30dp"
         android:textColor = "@android:color/black" />
   </TableRow>

   <TableRow>
      <Button
         android:text = "Cancel"
         android:layout_width = "wrap_content"
         android:layout_margin = "10dp"
         android:layout_height = "wrap_content"
         android:background = "@android:color/holo_green_dark" />
      <Button
         android:text = "Submit"
         android:width = "100px"
         android:layout_margin = "10dp"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:background = "@android:color/holo_green_dark" />
   </TableRow>
</TableLayout>

以上代码创建了一个使用 tables 和 rows 布置的简单数据输入表单。

The above code creates a simple data entry form arranged using tables and rows.

table layout