一:约束布局
参考:
【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )_韩曙亮-2048 AI社区
以下是一个基于 ConstraintLayout 的简单 Android 示例,包含三个控件(TextView 和两个 Button),布局属性在 XML 中设置:
1. 修改 activity_main.xml 文件
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"android:padding="16dp"><!-- 顶部居中标题 --><TextViewandroid:id="@+id/titleText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="操作面板"android:textSize="24sp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><!-- 左侧按钮 --><Buttonandroid:id="@+id/btnLeft"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="32dp"android:text="确定"app:layout_constraintEnd_toStartOf="@+id/btnRight"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@id/titleText"app:layout_constraintWidth_percent="0.4"/><!-- 右侧按钮 --><Buttonandroid:id="@+id/btnRight"android:layout_width="0dp"android:layout_height="wrap_content"android:text="取消"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@id/btnLeft"app:layout_constraintTop_toTopOf="@id/btnLeft"app:layout_constraintWidth_percent="0.4"/></androidx.constraintlayout.widget.ConstraintLayout>
2. 创建 MainActivity.java
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button btnLeft = findViewById(R.id.btnLeft);Button btnRight = findViewById(R.id.btnRight);btnLeft.setOnClickListener(v -> showToast("确定按钮被点击"));btnRight.setOnClickListener(v -> showToast("取消按钮被点击"));}private void showToast(String message) {Toast.makeText(this, message, Toast.LENGTH_SHORT).show();}
}
布局说明:
-
标题 (TextView)
-
水平居中于父布局顶部
-
文字大小为 24sp
-
-
左侧按钮 (btnLeft)
-
位于标题下方 32dp
-
宽度占父布局 40%(使用百分比宽度)
-
右侧连接到右侧按钮
-
-
右侧按钮 (btnRight)
-
与左侧按钮顶部对齐
-
宽度占父布局 40%
-
左侧连接到左侧按钮
-
功能特点:
-
使用
ConstraintLayout的核心约束属性:-
layout_constraint[方向]_to[方向]Of(位置约束) -
layout_constraintWidth_percent(百分比宽度) -
layout_constraintHorizontal_bias(水平偏移比例)
-
-
按钮点击显示 Toast 提示
-
响应式布局:按钮宽度按比例自适应屏幕
运行效果:
-
顶部显示居中标题"操作面板"
-
下方并排显示两个按钮("确定"和"取消")
-
点击按钮显示对应的 Toast 提示
-
在不同屏幕尺寸上保持比例布局
这个示例展示了 ConstraintLayout 的三种核心约束技巧:位置约束、尺寸百分比和链式连接,适合作为中等复杂度的布局参考。
开启新对话