深入浅出安卓常规布局

  • 线性布局

线性布局(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 包含居中显示的文本,它会覆盖在背景图片上。
相关推荐
让开,我要吃人了2 小时前
HarmonyOS开发实战(5.0)实现二楼上划进入首页效果详解
前端·华为·程序员·移动开发·harmonyos·鸿蒙·鸿蒙系统
everyStudy3 小时前
前端五种排序
前端·算法·排序算法
甜兒.4 小时前
鸿蒙小技巧
前端·华为·typescript·harmonyos
Jiaberrr7 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy8 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白8 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、8 小时前
Web Worker 简单使用
前端
web_learning_3218 小时前
信息收集常用指令
前端·搜索引擎
tabzzz8 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
200不是二百8 小时前
Vuex详解
前端·javascript·vue.js