Android Studio六大基本布局详解

Android Studio是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA。类似Eclipse ADT,Android Studio提供了集成的Android开发工具用于开发和调试。

Android Studio的开发环境和模式更加的丰富和便捷,能够支持多种语言,还可以为开发者提供测试工具和各种数据分析。在IDEA的基础上,Android Studio提供五大功能:

  1. 开发者可以在编写程序的同时看到自己的应用在不同尺寸屏幕中的样子。
  2. Android设备拥有大量不同尺寸的屏幕和分辨率,根据新的Studio,开发者可以很方便的调整在各个分辨率设备上的应用。
  3. 同时Studio还解决语言问题,多语言版本、支持翻译都让开发者更适应全球开发环境。
  4. Studio还提供收入记录功能。
  5. 开发者可以对应用进行测试,然后向测试用户推出,测试结果不会对外公布。

此外,Android Studio的安装步骤包括:首先需要先安装好JDK并配置好Path环境变量;然后进入官网点击download options,选择对应的版本后下载;下载完成后将SDK放在之前创建好的SD文件夹里;接着进行解压和配置;最后确认将要下载的组件及其文件大小,等待组件下载完成即可。

 线性布局(LinearLayout)

线性布局(LinearLayout)是Android中最常用的布局方式之一,它能够将子视图按照垂直或水平方向进行排列。线性布局会将所有子视图按照指定的方向(垂直或水平)依次排列,如果超出了当前屏幕的宽度或高度,会自动进行滚动。

在XML中使用LinearLayout非常简单,只需要在根元素中添加一个LinearLayout标签即可。LinearLayout标签的属性主要包括:

  • android:orientation:指定线性布局的方向,可选值为vertical(垂直)和horizontal(水平)。
  • android:gravity:指定线性布局内元素的排列方式,可选值为center、left、right、top和bottom等。

 以下是一个简单的XML示例,演示如何使用LinearLayout:

 

<LinearLayout  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    android:gravity="center">  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="TextView 1" />  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="TextView 2" />  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="TextView 3" />  
</LinearLayout>

在上述代码中,我们创建了一个垂直方向的LinearLayout,并在其中添加了三个TextView。由于我们设置了android:gravity="center",所以所有的TextView都居中对齐。

在代码中操作LinearLayout也非常简单,只需要创建一个LinearLayout对象,然后添加子视图即可。以下是一个简单的Java示例:

 

// 创建一个LinearLayout对象  
LinearLayout linearLayout = new LinearLayout(this);  
linearLayout.setOrientation(LinearLayout.VERTICAL); // 设置方向为垂直  
linearLayout.setGravity(Gravity.CENTER); // 设置居中对齐  
  
// 创建一个TextView对象并添加到LinearLayout中  
TextView textView1 = new TextView(this);  
textView1.setText("TextView 1");  
linearLayout.addView(textView1);  
  
TextView textView2 = new TextView(this);  
textView2.setText("TextView 2");  
linearLayout.addView(textView2);  
  
TextView textView3 = new TextView(this);  
textView3.setText("TextView 3");  
linearLayout.addView(textView3);  
  
// 将LinearLayout添加到布局中  
setContentView(linearLayout);

 相对布局(RelativeLayout)

 

相对布局(RelativeLayout)是Android中一种常用的布局方式,它可以让视图按照相对于其他视图的位置进行排列。相对布局中的子视图可以根据其他视图的位置进行定位,也可以根据屏幕边缘进行定位。

在XML中使用RelativeLayout的方法与LinearLayout类似,只需要在根元素中添加一个RelativeLayout标签即可。RelativeLayout标签的属性主要包括:

  • android:layout_width和android:layout_height:指定相对布局的宽度和高度。
  • android:gravity:指定相对布局内元素的排列方式,可选值为center、left、right、top和bottom等。

要使用RelativeLayout中的子视图相对于其他视图进行定位,可以使用以下属性:

  • android:layout_below:将子视图定位在另一个视图的下方。
  • android:layout_above:将子视图定位在另一个视图的上方。
  • android:layout_toLeftOf:将子视图定位在另一个视图的左侧。
  • android:layout_toRightOf:将子视图定位在另一个视图的右侧。

以下是一个简单的XML示例,演示如何使用RelativeLayout:

 

<RelativeLayout  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
  
    <TextView  
        android:id="@+id/textView1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="TextView 1" />  
  
    <TextView  
        android:id="@+id/textView2"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_below="@id/textView1"  
        android:text="TextView 2" />  
  
    <Button  
        android:id="@+id/button1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_toRightOf="@id/textView2"  
        android:text="Button 1" />  
</RelativeLayout>

 

在上述代码中,我们创建了一个相对布局,并在其中添加了三个子视图:两个TextView和一个Button。第二个TextView被定位在第一个TextView的下方,Button被定位在第二个TextView的右侧。

在实际应用中,相对布局可以方便地实现各种复杂的布局需求,例如侧边栏、底部栏、对话框等。它可以让布局更加灵活和易于维护,是Android开发中常用的布局方式之一。

 帧布局(FrameLayout)

 

帧布局(FrameLayout)是Android中一种简单的布局方式,它允许你将多个视图叠加在一起。帧布局会将所有子视图按照添加的顺序从上到下排列,并且每个子视图都会被放置在上一层视图的下方。

帧布局的特点是它不会对子视图进行任何对齐或间距控制,因此所有的子视图都会被推到最前面,并且会覆盖其他视图。这种布局方式适用于需要将多个视图叠加在一起的场景,例如对话框、菜单等。

 在XML中使用帧布局的方法与线性布局类似,只需要在根元素中添加一个FrameLayout标签即可。例如:

 

<FrameLayout  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
  
    <ImageView  
        android:src="@drawable/image1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content" />  
  
    <ImageView  
        android:src="@drawable/image2"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content" />  
</FrameLayout>

 

在上述代码中,我们创建了一个帧布局,并在其中添加了两个ImageView。由于帧布局会将所有子视图叠加在一起,因此这两个ImageView会按照添加的顺序从上到下排列。

需要注意的是,由于帧布局不会对子视图进行对齐或间距控制,因此如果需要控制子视图的位置或间距,可以使用其他布局方式,例如相对布局或线性布局。

 约束布局(ConstraintLayout)

 

约束布局(ConstraintLayout)是Android开发中一种非常灵活的布局方式,它允许开发者通过约束条件来控制视图的位置和大小。相比于传统的布局方式,约束布局更加直观和易于维护,可以轻松创建复杂的界面布局。

约束布局的核心是约束条件,它决定了视图在屏幕上的位置和大小。约束条件可以是视图之间的相对位置关系,也可以是视图与屏幕边缘的相对位置关系。通过设置约束条件,可以精确地控制视图的布局位置和大小。

要使用约束布局,首先需要在XML文件中添加一个ConstraintLayout标签作为根元素。然后,可以通过以下几种方式来设置约束条件:

  1. 使用app:layout_constraintTop_toTopOf属性将视图的上边缘与另一个视图或屏幕边缘对齐。
  2. 使用app:layout_constraintBottom_toBottomOf属性将视图的底边缘与另一个视图或屏幕边缘对齐。
  3. 使用app:layout_constraintLeft_toLeftOf属性将视图的左边缘与另一个视图或屏幕边缘对齐。
  4. 使用app:layout_constraintRight_toRightOf属性将视图的右边缘与另一个视图或屏幕边缘对齐。
  5. 使用app:layout_constraintHorizontal_bias属性设置水平方向的偏移量。
  6. 使用app:layout_constraintVertical_bias属性设置垂直方向的偏移量。

除了约束条件,还可以使用比例控件来控制视图的大小。例如,可以使用ConstraintLayout.LayoutParams的matchConstraintWidth和matchConstraintHeight属性来让视图的大小与父布局的宽度或高度成比例。

以下是一个简单的示例代码,演示如何使用约束布局:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
  
    <ImageView  
        android:id="@+id/imageView"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        app:layout_constraintTop_toTopOf="parent"  
        app:layout_constraintLeft_toLeftOf="parent"  
        app:layout_constraintRight_toRightOf="parent" />  
  
    <TextView  
        android:id="@+id/textView"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        app:layout_constraintTop_toBottomOf="@id/imageView"  
        app:layout_constraintLeft_toLeftOf="parent"  
        app:layout_constraintRight_toRightOf="parent" />  
</androidx.constraintlayout.widget.ConstraintLayout>

在上述代码中,我们创建了一个包含一个ImageView和一个TextView的约束布局。ImageView被约束在父布局的左上角,TextView被约束在ImageView的下方。通过设置约束条件,我们可以确保这些视图按照我们期望的方式排列。

表格布局(TableLayout)

 

表格布局(TableLayout)是Android中一种常见的布局方式,它允许你将多个视图按照行和列的方式进行排列。表格布局非常适合处理数据集,因为它可以轻松地展示多行和多列的数据。

要在XML中使用表格布局,需要添加一个TableLayout标签作为根元素。在TableLayout标签中,你可以添加多个TableRow标签来表示表格的行,每个TableRow标签中可以包含多个视图元素。

以下是一个简单的示例代码,演示如何使用表格布局: 

 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
  
    <!-- 第一行 -->  
    <TableRow  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content">  
        <TextView  
            android:text="姓名"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" />  
        <TextView  
            android:text="年龄"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" />  
    </TableRow>  
  
    <!-- 第二行 -->  
    <TableRow  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content">  
        <TextView  
            android:text="张三"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" />  
        <TextView  
            android:text="25"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" />  
    </TableRow>  
</TableLayout>

 在上述代码中,我们创建了一个包含两行数据的表格布局。第一行包含两个TextView,分别显示“姓名”和“年龄”。第二行也包含两个TextView,分别显示“张三”和“25”。每个TextView都是通过在TableRow中添加视图元素来实现的。

 

网格布局(GridLayout)

在Android应用开发中,`GridLayout`是一种强大的布局管理器,它允许将屏幕划分为网格,并在这些网格中灵活地安排视图。以下是关于`GridLayout`的结构和用法的详细解释。

1. 结构和特点

`GridLayout`是一个二维网格布局,每个网格单元都可以放置一个视图。它的主要特点包括:

- **网格结构:** 布局被分为行和列,形成一个网格。每个单元格可以包含一个或多个视图。
 
- **灵活性:** 开发者可以通过设置每个单元格的权重和跨越多行或多列来实现视图的动态安排。

- **适应性:** `GridLayout`可以适应屏幕的大小和方向变化,使其成为创建响应式UI的理想选择。

2. 如何使用GridLayout

 2.1 XML中使用GridLayout

在XML布局文件中使用`GridLayout`需要使用`GridLayout`标签,并在其中添加`Button`、`TextView`等视图。以下是一个简单的例子:```xml

<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2">

    <Button
        android:text="Button 1"
        android:layout_row="0"
        android:layout_column="0"/>

    <Button
        android:text="Button 2"
        android:layout_row="0"
        android:layout_column="1"/>

    <Button
        android:text="Button 3"
        android:layout_row="1"
        android:layout_column="0"/>

    <Button
        android:text="Button 4"
        android:layout_row="1"
        android:layout_column="1"/>
</GridLayout>


```

在上述示例中,我们创建了一个2x2的网格,每个单元格内放置一个按钮。通过`layout_row`和`layout_column`属性,我们指定了每个按钮所在的行和列。

2.2 代码中使用GridLayout

在Java代码中使用`GridLayout`同样简单。以下是一个使用`GridLayout`的基本示例:```java

GridLayout gridLayout = new GridLayout(context);
gridLayout.setLayoutParams(new ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT
));
gridLayout.setColumnCount(2);
gridLayout.setRowCount(2);

Button button1 = new Button(context);
button1.setText("Button 1");
GridLayout.Spec rowSpec1 = GridLayout.spec(0);
GridLayout.Spec colSpec1 = GridLayout.spec(0);
GridLayout.LayoutParams params1 = new GridLayout.LayoutParams(rowSpec1, colSpec1);
button1.setLayoutParams(params1);

// 同样方式创建并添加其他按钮...

gridLayout.addView(button1);
// 添加其他按钮到gridLayout

// 将gridLayout添加到父布局或Activity中


```

在代码中,我们首先创建了一个`GridLayout`实例,并设置了行和列的数量。然后,通过`GridLayout.Spec`和`GridLayout.LayoutParams`设置每个按钮的位置,最后将按钮添加到`GridLayout`中。

3. 灵活安排视图

`GridLayout`的灵活性体现在可以动态调整每个单元格的大小和位置。通过设置权重、跨越多行或多列,可以实现更复杂的布局。例如,通过设置`GridLayout.LayoutParams`的`rowSpan`和`columnSpan`属性,可以让一个视图跨越多个行或列。

```java

GridLayout.Spec rowSpec = GridLayout.spec(0, 2); // 从第0行开始,跨足2行
GridLayout.Spec colSpec = GridLayout.spec(0, 1); // 从第0列开始,占据1列
GridLayout.LayoutParams params = new GridLayout.LayoutParams(rowSpec, colSpec);
button.setLayoutParams(params);


```

这样,按钮就会跨越两行并占据一列的位置。

总的来说,`GridLayout`是一个强大而灵活的布局管理器,适用于需要在网格结构中安排视图的Android应用。通过合理使用权重、跨足和其他属性,可以实现多样化的布局效果。在实际项目中,开发者可以根据需要选择不同的布局方式,以达到最佳的用户体验。