<think>我们有两个
布局文件：shu3.xml和shuhaisp.xml。目标是将shuhaisp.xml修改成和shu3.xml一样的
布局，但必须使用
Android支持库（即不能使用
AndroidX）。同
时，保持shuhaisp.xml中已有的依赖不变。分析shu3.xml
布局特点：1.根
布局是Constraint
Layout。2.包含一个Toolbar（
RelativeLayout），内部有一个返回按钮。3.视频播放区域（Frame
Layout）位于Toolbar下方，并且上方约束在Toolbar底部，下方约束在缩略图区域顶部。同
时，其高度是父
布局高度的55%（通过app:
layout_constraint
Height_percent="0.55"实现）。4.缩略图区域（ScrollView）位于视频播放区域下方，高度为父
布局的45%，并且底部约束在父
布局底部。5.缩略图区域内部是一个Grid
Layout（来自
android.support.v7.widget.Grid
Layout），
设置为2列。而shuhaisp.xml当前
布局：1.根
布局是
RelativeLayout。2.同样有Toolbar（
RelativeLayout）、视频播放区域（Frame
Layout）和缩略图区域（ScrollView）。3.视频播放区域和缩略图区域使用
RelativeLayout的相对定位（
layout_below和
layout_above）来放置。要求修改shuhaisp.xml，使用Constraint
Layout并实现与shu3.xml相同的
布局结构。修改步骤：1.将根
布局改为
android.support.constraint.Constraint
Layout，并添加必要的命名空间。2.调整子视图的约束条件，使用Constraint
Layout的约束
属性。3.视频播放区域的高度
设置为父
布局的55%，缩略图区域高度
设置为45%。4.将Grid
Layout改为支持库版本（
android.support.v7.widget.Grid
Layout）。注意：由于原shuhaisp.xml中使用了
android.widget.Grid
Layout，现在需要替换为
android.support.v7.widget.Grid
Layout。同
时，保留原
布局中的其他
属性（如背景、id等）。修改后的
布局代码应该如下：</think>要将 `shuhaisp.xml`
布局修改为与 `shu3.xml` 相同的结构，同
时保持
Android 支持库依赖不变，我们需要做以下关键修改：
### 主要修改点：
1. **根
布局**：将 `
RelativeLayout` 改为 `
android.support.constraint.Constraint
Layout`
2. **约束
设置**：使用百分比约束控制视频区域和缩略图区域的高度比例
3. **Grid
Layout**：替换为支持库版本的 `
android.support.v7.widget.Grid
Layout`
4. **
布局参数**：添加约束
布局的定位
属性和百分比高度控制
### 修改后的完整代码：
```xml
<?xml version="1.0" encoding="utf
-8"?>
<
android.support.constraint.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"
android:background="@drawable/gradient_background">
<!
-- 修改点1：根
布局改为Constraint
Layout -->
<!
-- 顶部工具栏
-->
<
RelativeLayout
android:id="@+id/toolbar"
android:
layout_width="0dp"
android:
layout_
height="
wrap_
content"
app:
layout_constraintEnd_toEndOf="parent"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintTop_toTopOf="parent"> <!
-- 添加约束定位
-->
<Button
android:id="@+id/back_button4"
android:
layout_width="
wrap_
content"
android:
layout_
height="
wrap_
content"
android:
layout_alignParentStart="true"
android:
layout_marginStart="8dp"
android:
layout_marginTop="8dp"
android:
layout_marginEnd="8dp"
android:
layout_marginBottom="8dp"
android:background="@
android:color/transparent"
android:
contentDescription="返回上一页"
android:foreground="?
android:attr/selectableItemBackground"
android:text="返回"
android:textColor="@
android:color/white"
android:textSize="19dp" />
</
RelativeLayout>
<!
-- 视频播放区域
-->
<Frame
Layout
android:id="@+id/video_container"
android:
layout_width="0dp"
android:
layout_
height="0dp"
android:background="@
android:color/black"
app:
layout_constraint
Height_percent="0.55" <!
-- 关键：高度占比55%
-->
app:
layout_constraintBottom_toTopOf="@id/thumbnail_scrollview"
app:
layout_constraintEnd_toEndOf="parent"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintTop_toBottomOf="@id/toolbar">
<ProgressBar
android:id="@+id/video_loading"
android:
layout_width="
wrap_
content"
android:
layout_
height="
wrap_
content"
android:
layout_gravity="center" />
<VideoView
android:id="@+id/video_view"
android:
layout_width="match_parent"
android:
layout_
height="match_parent"
android:gravity="center"
android:text="视频播放区域"
android:textColor="@
android:color/white"
android:visibility="visible" />
</Frame
Layout>
<!
-- 缩略图区域
-->
<ScrollView
android:id="@+id/thumbnail_scrollview"
android:
layout_width="0dp"
android:
layout_
height="0dp"
android:fillViewport="true"
app:
layout_constraint
Height_percent="0.45" <!
-- 关键：高度占比45%
-->
app:
layout_constraintBottom_toBottomOf="parent"
app:
layout_constraintEnd_toEndOf="parent"
app:
layout_constraintStart_toStartOf="parent"
app:
layout_constraintTop_toBottomOf="@id/video_container">
<Linear
Layout
android:
layout_width="match_parent"
android:
layout_
height="
wrap_
content"
android:orientation="vertical">
<!
-- 修改点：使用支持库的Grid
Layout -->
<
android.support.v7.widget.Grid
Layout
android:id="@+id/grid
Layout"
android:
layout_width="match_parent"
android:
layout_
height="
wrap_
content"
app:columnCount="2"
app:rowCount="0"
app:alignmentMode="alignBounds"
app:useDefaultMargins="true"
android:padding="8dp">
<!
-- 缩略图示例
-->
<!
--
<ImageView
android:
layout_width="0dp"
android:
layout_
height="
wrap_
content"
app:
layout_columnWeight="1"
android:
layout_margin="4dp"
android:adjustViewBounds="true"
android:
contentDescription="缩略图"
android:src="@drawable/default_thumbnail" />
-->
</
android.support.v7.widget.Grid
Layout>
</Linear
Layout>
</ScrollView>
</
android.support.constraint.Constraint
Layout>
```
### 关键修改说明：
1. **根
布局转换**：
```xml
<!
-- 修改前
-->
<
RelativeLayout ...> ... </
RelativeLayout>
<!
-- 修改后
-->
<
android.support.constraint.Constraint
Layout ...> ... </Constraint
Layout>
```
2. **百分比高度控制**：
```xml
<!
-- 视频区域占55%
-->
app:
layout_constraint
Height_percent="0.55"
<!
-- 缩略图区域占45%
-->
app:
layout_constraint
Height_percent="0.45"
```
3. **约束关系
设置**：
```xml
<!
-- 视频区域约束
-->
app:
layout_constraintBottom_toTopOf="@id/thumbnail_scrollview"
app:
layout_constraintTop_toBottomOf="@id/toolbar"
<!
-- 缩略图区域约束
-->
app:
layout_constraintTop_toBottomOf="@id/video_container"
app:
layout_constraintBottom_toBottomOf="parent"
```
4. **Grid
Layout替换**：
```xml
<!
-- 修改前
-->
<
android.widget.Grid
Layout ...> ... </
android.widget.Grid
Layout>
<!
-- 修改后
-->
<
android.support.v7.widget.Grid
Layout ...> ... </
android.support.v7.widget.Grid
Layout>
```
###
布局效果说明：
1. **层级结构**：
```
Constraint
Layout (根
布局)
├──
RelativeLayout (工具栏)
├── Frame
Layout (视频容器，占55%高度)
└── ScrollView (缩略图区域，占45%高度)
└── Grid
Layout (支持库版本)
```
2. **比例控制**：
- 视频区域：
屏幕高度的55%
- 缩略图区域：
屏幕高度的45%
- 使用`
layout_constraint
Height_percent`精确控制比例
3. **兼容性**：
- 完全使用
Android支持库组件
- 兼容旧版
Android设备
### 相关问题：
1. 如何在Constraint
Layout中实现百分比高度
布局？
2.
Android支持库的Grid
Layout与标准Grid
Layout有何区别？
3. 为什么在视频播放区域使用Frame
Layout作为容器？
4. 如何优化缩略图Grid
Layout的加载性能？
扫一扫
1327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
