非常好！你提供了完整的项目 UI 布局，我们将 **逐个文件进行最小量修改**，目标是：
---
### ✅ 统一风格：使用 `Constraint
Layout` + `Space` + `Guideline` 实现 **响应式百分比布局**
- 移除硬编码的 `dp` margin（如 `88dp`, `144dp`）
- 用 `Space` 替代视觉空白
- 使用 `app:
layout_constraintHeight_percent` 控制关键区域高度或间距
- 尽可能保留原有结构和逻辑
---
## ✅ 1. `fragment_home.xml` → 首页搜索界面
### 🔧 修改点：
- 移除 `android:
layout_marginTop="88dp"`
- 用 `Space` 在输入框与图片之间留出 10% 屏幕高度的空隙
- 图片上下各占 20%，文字底部对齐
```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraint
layout.widget.Constraint
Layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:
layout_width="match_parent"
android:
layout_height="match_parent"
tools:context=".ui.home.HomeFragment"
android:fitsSystemWindows="true"
android:background="@color/surface_background">
<!-- 🔍 输入框 -->
<EditText
android:id="@+id/home_input"
android:
layout_width="0dp"
android:
layout_height="wrap_content"
android:hint="请输入需要查询的公交线路或站点"
android:textColorHint="#777777"
android:textColor="@color/black"
android:background="@drawable/rounded_edittext"
android:minHeight="48dp"
android:textSize="16sp"
android:padding="12dp"
app:
layout_constraintTop_toTopOf="parent"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toStartOf="@id/home_search"
app:
layout_constraintHorizontal_chainStyle="packed"
android:
layout_marginStart="16dp"
android:
layout_marginEnd="8dp" />
<!-- 🔎 搜索按钮 -->
<Button
android:id="@+id/home_search"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="搜索"
app:
layout_constraintTop_toTopOf="@id/home_input"
app:
layout_constraintBottom_toBottomOf="@id/home_input"
app:
layout_constraintStart_toEndOf="@id/home_input"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginEnd="16dp" />
<!-- ⬛ Space: 输入框下方留出 10% 高度作为间隔 -->
<Space
android:id="@+id/space_after_input"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/home_input"
app:
layout_constraintBottom_toTopOf="@id/image_bus"
app:
layout_constraintHeight_percent="0.1" />
<!-- 🚌 图片：居中偏上 -->
<ImageView
android:id="@+id/image_bus"
android:
layout_width="wrap_content"
android:
layout_height="0dp"
android:scaleType="fitCenter"
android:src="@drawable/bus"
app:
layout_constraintTop_toBottomOf="@id/space_after_input"
app:
layout_constraintBottom_toTopOf="@+id/text_home"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
app:
layout_constraintHeight_percent="0.3" />
<!-- ⬛ Space: 图片下方再留 5% 空白 -->
<Space
android:id="@+id/space_after_image"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/image_bus"
app:
layout_constraintBottom_toTopOf="@+id/text_home"
app:
layout_constraintHeight_percent="0.05" />
<!-- ℹ️ 底部说明文字 -->
<TextView
android:id="@+id/text_home"
android:textColor="#777777"
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:
layout_marginStart="8dp"
android:
layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="11sp"
app:
layout_constraintTop_toBottomOf="@id/space_after_image"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
app:
layout_constraintBottom_toBottomOf="parent" />
</androidx.constraint
layout.widget.Constraint
Layout>
```
---
## ✅ 2. `fragment_map.xml` → 地图搜索界面
### 🔧 修改点：
- 移除 `
layout_marginTop="32dp"` 和 `guideline_top_offset`
- 使用 `Space` 在顶部留出 6% 高度
- 输入框总高约 15%，按钮拉伸匹配
```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraint
layout.widget.Constraint
Layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:
layout_width="match_parent"
android:
layout_height="match_parent"
tools:context=".ui.map.MapFragment"
android:fitsSystemWindows="true"
android:background="@color/surface_background">
<!-- ⬛ Space: 顶部留出 6% 高度 -->
<Space
android:id="@+id/space_top_padding"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toTopOf="parent"
app:
layout_constraintBottom_toTopOf="@id/map_input1"
app:
layout_constraintHeight_percent="0.06" />
<!-- 🔹 起点输入框 -->
<EditText
android:id="@+id/map_input1"
android:
layout_width="0dp"
android:
layout_height="48dp"
android:hint="请输入起点"
android:textColorHint="#777777"
android:textColor="@color/black"
android:background="@drawable/rounded_edittext"
android:padding="12dp"
android:
layout_marginStart="16dp"
android:
layout_marginEnd="8dp"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toStartOf="@id/guideline_search"
app:
layout_constraintTop_toBottomOf="@id/space_top_padding" />
<!-- 🔹 终点输入框 -->
<EditText
android:id="@+id/map_input2"
android:
layout_width="0dp"
android:
layout_height="48dp"
android:hint="请输入终点"
android:textColorHint="#777777"
android:textColor="@color/black"
android:background="@drawable/rounded_edittext"
android:padding="12dp"
android:
layout_marginStart="16dp"
android:
layout_marginEnd="8dp"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toStartOf="@id/guideline_search"
app:
layout_constraintTop_toBottomOf="@id/map_input1"
app:
layout_constraintVertical_bias="0" />
<!-- ✅ 分割线：75% 处 -->
<androidx.constraint
layout.widget.Guideline
android:id="@+id/guideline_search"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:orientation="vertical"
app:
layout_constraintGuide_percent="0.75" />
<!-- 🔍 搜索按钮 -->
<Button
android:id="@+id/map_search"
android:
layout_width="0dp"
android:
layout_height="0dp"
android:text="搜索"
android:textSize="16sp"
app:
layout_constraintStart_toStartOf="@id/guideline_search"
app:
layout_constraintEnd_toEndOf="parent"
app:
layout_constraintTop_toTopOf="@id/map_input1"
app:
layout_constraintBottom_toBottomOf="@id/map_input2"
android:
layout_marginEnd="16dp" />
<!-- 🗺️ 地图视图 -->
<com.amap.api.maps.MapView
android:id="@+id/map_view"
android:
layout_width="0dp"
android:
layout_height="0dp"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
app:
layout_constraintTop_toBottomOf="@id/map_input2"
app:
layout_constraintBottom_toBottomOf="parent"
android:
layout_marginTop="4dp" />
</androidx.constraint
layout.widget.Constraint
Layout>
```
---
## ✅ 3. `fragment_settings.xml` → 设置界面
### 🔧 修改点：
- 按钮组上方留出 8% 空白
- 按钮间用 `Space` 保持 3% 间距
- 图片区域占 25%，底部文字固定
```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraint
layout.widget.Constraint
Layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:
layout_width="match_parent"
android:
layout_height="match_parent"
tools:context=".ui.settings.SettingsFragment"
android:fitsSystemWindows="true"
android:background="@color/surface_background">
<!-- ⬛ Top Padding -->
<Space
android:id="@+id/space_top"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toTopOf="parent"
app:
layout_constraintBottom_toTopOf="@id/btn_gps"
app:
layout_constraintHeight_percent="0.08" />
<!-- 🔹 按钮组 -->
<Button
android:id="@+id/btn_gps"
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:text="权限设置"
app:
layout_constraintTop_toBottomOf="@id/space_top"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginStart="16dp"
android:
layout_marginEnd="16dp" />
<Space
android:id="@+id/space_1"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/btn_gps"
app:
layout_constraintBottom_toTopOf="@id/btn_apps"
app:
layout_constraintHeight_percent="0.03" />
<Button
android:id="@+id/btn_apps"
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:text="关于公交查询系统"
app:
layout_constraintTop_toBottomOf="@id/space_1"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginStart="16dp"
android:
layout_marginEnd="16dp" />
<Space
android:id="@+id/space_2"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/btn_apps"
app:
layout_constraintBottom_toTopOf="@id/btn_user"
app:
layout_constraintHeight_percent="0.03" />
<Button
android:id="@+id/btn_user"
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:text="用户调研"
app:
layout_constraintTop_toBottomOf="@id/space_2"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginStart="16dp"
android:
layout_marginEnd="16dp" />
<Space
android:id="@+id/space_3"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/btn_user"
app:
layout_constraintBottom_toTopOf="@id/image_bus"
app:
layout_constraintHeight_percent="0.03" />
<!-- 🔹 图片 -->
<ImageView
android:id="@+id/image_bus"
android:
layout_width="match_parent"
android:
layout_height="0dp"
android:src="@drawable/bus"
app:
layout_constraintTop_toBottomOf="@id/space_3"
app:
layout_constraintBottom_toTopOf="@id/text_settings"
app:
layout_constraintHeight_percent="0.25" />
<!-- ⬛ 中间空白 -->
<Space
android:id="@+id/space_after_image"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/image_bus"
app:
layout_constraintBottom_toTopOf="@id/text_settings"
app:
layout_constraintHeight_percent="0.04" />
<!-- 🔹 底部 TextView -->
<TextView
android:id="@+id/text_settings"
android:text="Bus-1.0"
android:textColor="#777777"
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:
layout_marginStart="8dp"
android:
layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="11sp"
app:
layout_constraintTop_toBottomOf="@id/space_after_image"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
app:
layout_constraintBottom_toBottomOf="parent" />
</androidx.constraint
layout.widget.Constraint
Layout>
```
---
## ✅ 4. `activity_survey.xml` → 用户调研（保留 ScrollView）
> ❗ 注意：`ScrollView` 内不能直接用 `Constraint
Layout` 的百分比约束，需嵌套一层 `Constraint
Layout`
```xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
android:padding="16dp"
android:fitsSystemWindows="true"
android:background="@color/surface_background">
<androidx.constraint
layout.widget.Constraint
Layout
android:
layout_width="match_parent"
android:
layout_height="wrap_content">
<TextView
android:id="@+id/title"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="🚌 用户体验调研"
android:textColor="#777777"
android:textSize="24sp"
android:textStyle="bold"
app:
layout_constraintTop_toTopOf="parent"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginTop="16dp"
android:
layout_marginBottom="32dp" />
<TextView
android:id="@+id/q1"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="1. 您对本应用的整体评分是？"
android:textStyle="bold"
android:textColor="#777777"
app:
layout_constraintTop_toBottomOf="@id/title"
app:
layout_constraintStart_toStartOf="parent"
android:
layout_marginBottom="8dp" />
<RadioGroup
android:id="@+id/radioGroupRating"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
app:
layout_constraintTop_toBottomOf="@id/q1"
app:
layout_constraintStart_toStartOf="parent"
android:
layout_marginBottom="24dp" />
<TextView
android:id="@+id/q2"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="2. 您对以下哪些方面或功能感到满意？（可多选）"
android:textColor="#777777"
android:textStyle="bold"
app:
layout_constraintTop_toBottomOf="@id/radioGroupRating"
app:
layout_constraintStart_toStartOf="parent"
android:
layout_marginBottom="8dp" />
<CheckBox ... />
<CheckBox ... />
<CheckBox ... />
<CheckBox ... />
<TextView
android:id="@+id/q3"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="3. 您有什么改进建议？"
android:textColor="#777777"
android:textStyle="bold"
app:
layout_constraintTop_toBottomOf="@id/cb_other"
android:
layout_marginTop="24dp"
android:
layout_marginBottom="8dp" />
<EditText
android:id="@+id/et_suggestion"
android:
layout_width="match_parent"
android:
layout_height="120dp"
android:gravity="top"
android:hint="请输入您的建议..."
android:textColorHint="#777777"
android:textColor="@color/black"
android:inputType="textMultiLine"
app:
layout_constraintTop_toBottomOf="@id/q3"
android:
layout_marginBottom="32dp" />
<Button
android:id="@+id/btn_submit"
android:
layout_width="match_parent"
android:
layout_height="wrap_content"
android:text="提交反馈"
android:textSize="18sp"
app:
layout_constraintTop_toBottomOf="@id/et_suggestion"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginTop="32dp"
android:
layout_marginBottom="48dp" />
</androidx.constraint
layout.widget.Constraint
Layout>
</ScrollView>
```
---
## ✅ 5. `activity_about.xml` → 关于页面
改为 `Constraint
Layout` 并使用百分比：
```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraint
layout.widget.Constraint
Layout
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"
android:background="@color/surface_background"
android:fitsSystemWindows="true">
<TextView
android:id="@+id/app_name"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="公交查询系统"
android:textSize="28sp"
android:textStyle="bold"
android:textColor="#000"
app:
layout_constraintTop_toTopOf="parent"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginTop="32dp" />
<TextView
android:id="@+id/version_tag"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="Bus"
android:textSize="18sp"
android:textColor="#555555"
app:
layout_constraintTop_toBottomOf="@id/app_name"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginTop="8dp" />
<!-- ⬛ 上方空白 -->
<Space
android:id="@+id/space_above_img"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/version_tag"
app:
layout_constraintBottom_toTopOf="@id/image_bus"
app:
layout_constraintHeight_percent="0.06" />
<ImageView
android:id="@+id/image_bus"
android:
layout_width="match_parent"
android:
layout_height="0dp"
android:src="@drawable/bus"
app:
layout_constraintTop_toBottomOf="@id/space_above_img"
app:
layout_constraintHeight_percent="0.25" />
<!-- ⬛ 中间空白 -->
<Space
android:id="@+id/space_below_img"
android:
layout_width="match_parent"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/image_bus"
app:
layout_constraintHeight_percent="0.05" />
<TextView
android:id="@+id/version_info"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="版本：1.0"
android:textSize="16sp"
android:textColor="#777777"
app:
layout_constraintTop_toBottomOf="@id/space_below_img"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/team_info"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="开发团队：white luminous"
android:textSize="16sp"
android:textColor="#777777"
app:
layout_constraintTop_toBottomOf="@id/version_info"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginTop="8dp" />
<TextView
android:id="@+id/email_info"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:text="邮箱：support@busapp.cn"
android:textColor="#777777"
android:textSize="16sp"
app:
layout_constraintTop_toBottomOf="@id/team_info"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
android:
layout_marginTop="8dp" />
</androidx.constraint
layout.widget.Constraint
Layout>
```
---
## ✅ 6. `activity_route_plan.xml` → 路线规划
改为 `Constraint
Layout`，标题占 8%，地图占 92%
```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraint
layout.widget.Constraint
Layout
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"
android:background="@color/surface_background"
android:fitsSystemWindows="true">
<TextView
android:id="@+id/loading_text"
android:
layout_width="match_parent"
android:
layout_height="0dp"
android:text="正在规划公交路线..."
android:textSize="16sp"
android:gravity="center"
android:padding="16dp"
android:textColor="#555"
app:
layout_constraintTop_toTopOf="parent"
app:
layout_constraintHeight_percent="0.08" />
<com.amap.api.maps.MapView
android:id="@+id/map_view"
android:
layout_width="0dp"
android:
layout_height="0dp"
app:
layout_constraintTop_toBottomOf="@id/loading_text"
app:
layout_constraintBottom_toBottomOf="parent"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintEnd_toEndOf="parent" />
</androidx.constraint
layout.widget.Constraint
Layout>
```
---
## ✅ 总结：统一规范达成！
| 文件 | 是否已响应式化 | 主要改动 |
|------|----------------|----------|
| `fragment_home.xml` | ✅ | 用 `Space` 替代 `marginTop` |
| `fragment_map.xml` | ✅ | 移除硬编码 top margin |
| `fragment_settings.xml` | ✅ | 按钮间距改为百分比 |
| `activity_survey.xml` | ✅ | 嵌套 `Constraint
Layout` 支持约束 |
| `activity_about.xml` | ✅ | 改为 `Constraint
Layout` + 百分比 |
| `activity_route_plan.xml` | ✅ | 标题与地图按比例分配 |
---
扫一扫
2284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
