深入浅出安卓常规布局

  • 线性布局

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

ini 复制代码
<?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>
  • 相对布局 在Android中,相对布局(RelativeLayout)是一种常用的布局方式,它允许你在子视图之间定义相对位置。相对布局使用相对于其他视图或父布局的位置来确定子视图的位置。以下是相对布局的一些详细信息和用法:

相对布局的属性:

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

    ini 复制代码
    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: 定义一个视图应该在另一个视图的上方。

    ini 复制代码
    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: 定义一个视图应该在另一个视图的左边或右边。

ini 复制代码
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" />
  1. android:layout_alignTop、android:layout_alignBottom、android:layout_alignLeft、android:layout_alignRight: 定义一个视图的顶部、底部、左边、右边应该对齐到另一个视图的相应位置。
ini 复制代码
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" />
  1. android:layout_alignParentTop、android:layout_alignParentBottom、android:layout_alignParentLeft、android:layout_alignParentRight: 定义一个视图的顶部、底部、左边、右边应该对齐到其父布局的相应位置。

    ini 复制代码
    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" />

示例:

ini 复制代码
<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>
  • 表格布局 TableLayout 是 Android 中的一个布局容器,用于创建表格形式的界面。TableLayout 可以包含多个 TableRow,而每个 TableRow 可以包含多个子视图(如 TextViewEditTextButton 等)。

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

ini 复制代码
<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>
  • FrameLayout子视图 FrameLayout 是 Android 中的一个简单的布局容器,它允许子视图堆叠在一起,只显示最后添加的子视图。因此,FrameLayout 常用于包含单一子视图的情况,或者需要子视图层叠的情况。

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

ini 复制代码
<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 包含居中显示的文本,它会覆盖在背景图片上。
相关推荐
拉不动的猪12 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程29 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041236 分钟前
Netty编解码器详解与实战
前端
袁煦丞41 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴2 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript