深入浅出安卓常规布局

  • 线性布局

线性布局(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 包含居中显示的文本,它会覆盖在背景图片上。
相关推荐
耶啵奶膘6 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro