深入浅出安卓常规布局

  • 线性布局

线性布局(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 包含居中显示的文本,它会覆盖在背景图片上。
相关推荐
csj508 分钟前
前端基础之《React(7)—webpack简介-ESLint集成》
前端·react
咚咚咚小柒13 分钟前
【前端】Webpack相关(长期更新)
前端·javascript·webpack·前端框架·node.js·vue·scss
2501_9160088914 分钟前
前端工具全景实战指南,从开发到调试的效率闭环
android·前端·小程序·https·uni-app·iphone·webview
诸葛韩信15 分钟前
Webpack与Vite的常用配置及主要差异分析
前端·webpack·node.js
IT_陈寒19 分钟前
Vite 5震撼发布!10个新特性让你的开发效率飙升200% 🚀
前端·人工智能·后端
一路向前的月光24 分钟前
uniapp(5)滚动列表scroll-view
前端·javascript·uni-app
Hilaku1 小时前
就因为package.json里少了个^号,我们公司赔了客户十万块
前端·javascript·npm
晴殇i1 小时前
尤雨溪创立的 VoidZero 完成 1250 万美元 A 轮融资,加速整合前端工具链生态
前端·vue.js
一大树1 小时前
MutationObserver 完整用法指南
前端
一晌小贪欢1 小时前
【Html模板】赛博朋克风格数据分析大屏(已上线-可预览)
前端·数据分析·html·数据看板·看板·电商大屏·大屏看板