深入浅出Android常规布局

• 线性布局

线性布局（LinearLayout）是Android中一种常用的布局方式，它以线性排列子视图，可以设置为水平或垂直布局。线性布局非常简单，适用于按照一定顺序排列子视图的情况。以下是关于线性布局的一些详细信息和用法： android:orientation="vertical"垂直 android:orientation="horizontal"水平 假设现在是水平布局，你如果把某一个Textview width为match_parent，他会向右挤压内容，让右边得TextView不会展示，也不能滑动，也不会换行

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="测试数据" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="测试数据" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="测试数据" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="测试数据" />
</LinearLayout>

image.png

• 相对布局 在Android中，相对布局（RelativeLayout）是一种常用的布局方式，它允许你在子视图之间定义相对位置。相对布局使用相对于其他视图或父布局的位置来确定子视图的位置。以下是相对布局的一些详细信息和用法：

相对布局的属性：

1. android:layout_below： 定义一个视图应该在另一个视图的下方。

   xmlCopy code
   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Above" />
   
   <TextView
       android:id="@+id/textView2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@id/textView1"
       android:text="Below" />
   
   

2. android:layout_above： 定义一个视图应该在另一个视图的上方。

   xmlCopy code
   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_above="@id/textView2"
       android:text="Above" />
   
   <TextView
       android:id="@+id/textView2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Below" />
   
   

3. android:layout_toLeftOf和android:layout_toRightOf： 定义一个视图应该在另一个视图的左边或右边。

xmlCopy code
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/textView2"
    android:text="Left of" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Right of" />

4. android:layout_alignTop、android:layout_alignBottom、android:layout_alignLeft、android:layout_alignRight： 定义一个视图的顶部、底部、左边、右边应该对齐到另一个视图的相应位置。

xmlCopy code
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/textView2"
    android:layout_alignLeft="@id/textView2"
    android:text="Aligned Top and Left" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Base Text" />

5. android:layout_alignParentTop、android:layout_alignParentBottom、android:layout_alignParentLeft、android:layout_alignParentRight： 定义一个视图的顶部、底部、左边、右边应该对齐到其父布局的相应位置。

   xmlCopy code
   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentTop="true"
       android:text="Aligned to Parent Top" />
   
   <TextView
       android:id="@+id/textView2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Base Text" />
   
   

示例：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_below="@id/button1"
        android:layout_alignLeft="@id/button1"
        android:layout_marginTop="20dp"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:layout_below="@id/button2"
        android:layout_alignLeft="@id/button2"
        android:layout_marginTop="20dp"/>

</RelativeLayout>

image.png

• 表格布局 TableLayout 是 Android 中的一个布局容器，用于创建表格形式的界面。TableLayout 可以包含多个 TableRow，而每个 TableRow 可以包含多个子视图（如 TextView、EditText、Button 等）。

下面是一个简单的 TableLayout 的示例：

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="*"
    android:stretchColumns="*">

    <TableRow>
        <TextView
            android:text="Name"
            android:padding="10dp"/>
        <EditText
            android:layout_width="match_parent"
            android:hint="Enter your name"
            android:padding="10dp"/>
    </TableRow>

    <TableRow>
        <TextView
            android:text="Age"
            android:padding="10dp"/>
        <EditText
            android:layout_width="match_parent"
            android:inputType="number"
            android:hint="Enter your age"
            android:padding="10dp"/>
    </TableRow>

    <TableRow>
        <Button
            android:text="Submit"
            android:layout_span="2"
            android:padding="10dp"/>
    </TableRow>

</TableLayout>

image.png

• FrameLayout子视图 FrameLayout 是 Android 中的一个简单的布局容器，它允许子视图堆叠在一起，只显示最后添加的子视图。因此，FrameLayout 常用于包含单一子视图的情况，或者需要子视图层叠的情况。

以下是一个简单的 FrameLayout 的示例：

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Overlay Text"
        android:layout_gravity="center"
        android:textColor="#FFFFFF"
        android:textSize="24sp"/>
</FrameLayout>

在这个例子中：

• FrameLayout 是整个布局的容器。
• TextView 是背景，占据整个 FrameLayout。
• TextView 包含居中显示的文本，它会覆盖在背景图片上。

image.png