安卓app开发系列之-布局基础

、Jamson

于 2024-09-29 22:36:52 发布

阅读量984

点赞数 11

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： android 安卓app app开发软件网站开发软件开发

本文链接：https://blog.csdn.net/qq_41287993/article/details/142645155

Android 专栏收录该内容

13 篇文章

订阅专栏

✨ 关于我 ✨

👨‍💻 Hi there! 我是 [Jamson]，一名热爱编程与技术的狂热者，致力于前后端的全栈独立软件系统开发。通过不断学习和实践，我希望将知识分享给更多的朋友们，和大家一起成长。 💡

📫 联系我

如果你对我的文章有所启发，或者想要交流技术、合作项目，欢迎随时与我联系！ 🌟
作者微信： 📱 anything_studio 📱

“Coding is not just a job; it’s a lifestyle!” 🚀
✨ 期待与你的交流与合作！一起探索更精彩的编程世界！ ✨
🌟 关注我不迷路 🌟

安卓app开发系列之-布局基础

在 Android 开发中，布局是决定应用用户界面的关键因素。通过合理的布局，能够实现友好的用户体验。本文将详细介绍 Android 布局的基础知识，包括常见的布局类型、使用方法以及如何创建有效的用户界面。

一、布局的概念

布局是定义 UI 组件在屏幕上如何排列和显示的视图。Android 中的布局主要通过 XML 文件来定义，也可以在代码中动态创建。布局文件描述了各个 UI 控件之间的关系，以及它们在屏幕上的位置和其他属性。

二、常见的布局类型

Android 提供了多种布局类型，常见的几种布局包括：

1. LinearLayout

LinearLayout 是最简单的布局方式，它会一行一行或者一列一列地排列 UI 组件。可以通过 orientation 属性指定排列方式（水平或垂直）。

示例：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me!" />
</LinearLayout>

属性说明：

android:layout_width 和 android:layout_height 属性指定组件的宽度和高度。
android:orientation 设置组件排列方向。

2. RelativeLayout

RelativeLayout 允许开发者通过相对位置来定位 UI 组件，使得布局更加灵活。它的子组件可以相对于父组件或其他子组件进行定位。

示例：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome!"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next"
        android:layout_below="@id/text_view"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

属性说明：

android:layout_below 和 android:layout_centerHorizontal 等属性用于设置相对位置。

3. ConstraintLayout

ConstraintLayout 是一种灵活且高效的布局方式，它通过设置组件之间的约束关系来定义位置。此布局能够使层次结构更扁平，从而提高性能。

示例：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello, Constraint Layout!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Here"
        app:layout_constraintTop_toBottomOf="@id/text_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

属性说明：

0dp 表示设置宽度动态，根据约束关系计算。

4. FrameLayout

FrameLayout 是一种简单的布局，适合堆叠多个视图。它是将子视图放置在屏幕的左上角，后来的视图会覆盖在前面的视图上。

示例：

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Overlay Text"
        android:layout_gravity="center" />
</FrameLayout>

属性说明：

android:layout_gravity 用于决定子组件在父组件中的位置。

三、嵌套布局

在实际开发中，复杂的 UI 通常需要使用嵌套布局。通过将一种布局放置在另一种布局的内部，可以实现复杂的界面设计。然而，过多的嵌套会导致性能下降，因此应谨慎使用。

示例：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Header" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Action"
            android:layout_alignParentEnd="true" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button 1" />

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button 2" />
    </LinearLayout>
</LinearLayout>

四、布局属性

在布局中，有许多属性可以设置来定义 UI 组件的外观及行为，包括：

layout_width、layout_height：指定布局的宽度和高度，可以设置为 match_parent 或 wrap_content。
gravity：定义组件内容在其父容器内的对齐方式。
padding 和 margin：定义组件与其父容器的内边距和外边距。
visibility：控制组件是否可见，可以设置为 visible、invisible 或 gone。