如何以编程方式在 ConstraintLayout 底部和其他内容下方添加广告视图？

Question

这个问题可能与以下问题类似，但我需要帮助来解决我的用例。它提供了在 XML 文件中添加约束的说明。

我正在尝试从

RelativeLayout

迁移到

ConstraintLayout

，但我需要帮助以编程方式将广告视图添加到底部及其上方的其余内容。 我选择的代码方法允许我们从后端服务器接收动态填充。

以前，我使用

FramedLayout

来保存广告视图（横幅）。结果，上面的 WebView 在视图更新期间自动调整大小（我不知道最好的解决方案）并在广告删除时缩小。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <WebView
        android:id="@+id/webview"
        android:background="#000000"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        android:layout_above="@id/ad_view_container_bottom"
    />

    <FrameLayout
        android:id="@+id/ad_view_container_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true">
    </FrameLayout>

</RelativeLayout>

我想以编程方式将广告视图添加到屏幕底部，并使 WebView 调整大小以适合屏幕。 我尝试了以下

ConstraintLayout

，但它将广告视图容器放置在 WebView 下方，而没有调整其大小（广告不可见）。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <FrameLayout
        android:id="@+id/ad_view_container_bottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/webview"
        app:layout_constraintBottom_toBottomOf="parent">
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

我的问题是：

1. 将广告视图放置在 WebView 下方的正确方法是什么？
2. 我需要

   FrameLayout

   吗，或者我可以更直接地实现它吗（宽度是屏幕宽度，高度尺寸是固定的）？
3. 我在屏幕渲染方面是否获得了任何性能改进（更少的布局和测量阶段）？

Answer 1

1。将广告视图放置在 WebView 下方的正确方法：

在 ConstraintLayout 中，要相对于彼此定位视图，您需要定义将一个视图的位置与另一个视图的位置联系起来的约束。要将广告视图放置在 WebView 下方并确保其行为符合预期（WebView 相应调整大小），您需要设置以下约束：

WebView 应该对父级的顶部、左侧和右侧边缘以及广告容器的底部到顶部有约束。

广告容器（FrameLayout）应该对WebView的底部和父容器的底部有约束。

<androidx.constraintlayout.widget.ConstraintLayout
    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:id="@+id/constraint_layout"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:animateLayoutChanges="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/ad_view_container_bottom"/>

    <FrameLayout
        android:id="@+id/ad_view_container_bottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

以编程方式设置约束：

val layout: ConstraintLayout = findViewById(R.id.constraint_layout)
val webView: WebView = findViewById(R.id.webview)
val adViewContainer: FrameLayout = findViewById(R.id.ad_view_container_bottom)

val constraintSet = ConstraintSet()
constraintSet.clone(layout)
constraintSet.connect(webView.id, ConstraintSet.TOP, layout.id, ConstraintSet.TOP, 0)
constraintSet.connect(webView.id, ConstraintSet.LEFT, layout.id, ConstraintSet.LEFT, 0)
constraintSet.connect(webView.id, ConstraintSet.RIGHT, layout.id, ConstraintSet.RIGHT, 0)
constraintSet.connect(webView.id, ConstraintSet.BOTTOM, adViewContainer.id, ConstraintSet.TOP, 0)

constraintSet.connect(adViewContainer.id, ConstraintSet.BOTTOM, layout.id, ConstraintSet.BOTTOM, 0)
constraintSet.connect(adViewContainer.id, ConstraintSet.LEFT, layout.id, ConstraintSet.LEFT, 0)
constraintSet.connect(adViewContainer.id, ConstraintSet.RIGHT, layout.id, ConstraintSet.RIGHT, 0)

constraintSet.applyTo(layout)

设置填充：

adViewContainer.setPadding(0, 0, 0, 16); 
webView.setPadding(16, 16, 16, 16);

2。你需要FrameLayout吗？

如果广告视图的宽度固定为与屏幕宽度相匹配，并且其高度也固定（例如，具有固定高度的横幅广告），则可以避免使用 FrameLayout，而只需将 View 或 ConstraintLayout 子级与指定高度。如果您想使用 FrameLayout（这是广告的常见容器），那也可以，但对于仅将广告视图放置在底部的简单情况来说，这不是必需的。

3.性能提升：

与RelativeLayout等其他布局相比，使用ConstraintLayout通常可以提高性能，特别是当有很多嵌套视图时。这是因为 ConstraintLayout 最大限度地减少了布局和测量阶段所需的遍数。通过更少的层和更直接的约束，它可以执行得更快。但对于简单的视图来说，差异可以忽略不计。