深入浅出安卓常规布局

  • 线性布局

线性布局(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 包含居中显示的文本,它会覆盖在背景图片上。
相关推荐
摸鱼的春哥4 分钟前
春哥的Agent通关秘籍07:5分钟实现文件归类助手【实战】
前端·javascript·后端
念念不忘 必有回响7 分钟前
viepress:vue组件展示和源码功能
前端·javascript·vue.js
C澒12 分钟前
多场景多角色前端架构方案:基于页面协议化与模块标准化的通用能力沉淀
前端·架构·系统架构·前端框架
崔庆才丨静觅14 分钟前
稳定好用的 ADSL 拨号代理,就这家了!
前端
江湖有缘16 分钟前
Docker部署music-tag-web音乐标签编辑器
前端·docker·编辑器
恋猫de小郭1 小时前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
崔庆才丨静觅8 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60619 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了9 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅9 小时前
实用免费的 Short URL 短链接 API 对接说明
前端