广告加载后adview下面的ImageView停止布局跳转

ImageView below adview stop layout jump after ad loads

我有一个图像视图,我将放置不同的图像。

此图片可以有多种尺寸,例如 200x200 200x400 400x200...

上面imageview我有一个adview,下面这个imageview我需要4个按钮。

问题是,我希望图片位于 adview 下方,但在加载广告时停止跳转位置。它在广告加载时下降,我会停止此移动,修复图像,但在 adview 上方。

我的xml:

<?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">

    <LinearLayout
        android:id="@+id/ad_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="49dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@+id/imageView1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
            android:id="@+id/adView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            ads:adSize="SMART_BANNER"
            ads:adUnitId="ca-app-pub-xxx/xxx">
        </com.google.android.gms.ads.AdView>

    </LinearLayout>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:layout_marginTop="89dp"
        android:contentDescription="img"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ad_view" />

    <TextView
        android:id="@+id/a1"
        android:layout_width="127dp"
        android:layout_height="50dp"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.207"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.447" />

    <TextView
        android:id="@+id/a2"
        android:layout_width="127dp"
        android:layout_height="50dp"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.806"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.447" />

    <TextView
        android:id="@+id/a3"
        android:layout_width="127dp"
        android:layout_height="50dp"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.207"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.582" />

    <TextView
        android:id="@+id/a4"
        android:layout_width="127dp"
        android:layout_height="50dp"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.806"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.582" />


</androidx.constraintlayout.widget.ConstraintLayout>

为 adview 或其周围布局提供一个最小高度,在您的情况下可能等于智能横幅内容的 90px。

它跳跃是因为没有内容加载你的 wrap_content 高度 = 0,然后它获得新的高度 x,所以你的图像视图向下移动 x.

TL;DR

最快的解决方案是将您的广告视图 android:layout_height="wrap_content" 更改为 android:layout_height="fixed size",这样您的广告视图将具有单一高度并且不会因其 wrap_content 属性而改变(如果您的广告视图未加载,您可以将 wrap_content 视为高度 0,只有在加载后它才会有高度,因此布局跳转。

为什么不好?

您的布局不会响应。

如何解决?

阅读下面的答案。


长但更好的答案:

您可以使用 guidelines app:layout_constraintGuide_percent=".2" 来告诉您的指南位于屏幕顶部 (80%) 并将您的广告视图限制在您的指南中 - 这样您的布局将获胜't jump(它将加载 space)。

另一件事,不同的 phone 有 不同的屏幕尺寸 ,在您的布局中,您在视图上使用固定尺寸(例如,固定尺寸为 50dp)并且结果是,在一个屏幕(您的 android 工作室预览屏幕)上看起来不错的内容在另一个屏幕(您的实际 phone)上可能看起来不太好。

这是一个使用 ConstaintLayout:

实现您想要的外观的示例
<?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">

<Button
    android:id="@+id/adView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintHeight_percent="0.08"
    android:text="add view"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />


<ImageView
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:src="@drawable/ic_launcher_background"
    android:scaleType="fitXY"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    app:layout_constraintWidth_percent="0.6" />

<TextView
    android:id="@+id/a1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="a1"
    app:layout_constraintHeight_percent="0.08"
    app:layout_constraintWidth_percent="0.25"
    app:layout_constraintBottom_toTopOf="@+id/a3"
    app:layout_constraintEnd_toStartOf="@+id/a2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/imageView1"
    app:layout_constraintTop_toBottomOf="@+id/imageView1" />

<TextView
    android:id="@+id/a2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="a2"
    app:layout_constraintHeight_percent="0.08"
    app:layout_constraintWidth_percent="0.25"
    app:layout_constraintBottom_toBottomOf="@+id/a1"
    app:layout_constraintEnd_toEndOf="@+id/imageView1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/a1"
    app:layout_constraintTop_toTopOf="@+id/a1"
    app:layout_constraintVertical_bias="0.0" />

<TextView
    android:id="@+id/a3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="a3"
    app:layout_constraintHeight_percent="0.08"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/a1"
    app:layout_constraintStart_toStartOf="@+id/a1"
    app:layout_constraintTop_toBottomOf="@+id/a1" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".2" />

<TextView
    android:id="@+id/a4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="a4"
    app:layout_constraintBottom_toBottomOf="@+id/a3"
    app:layout_constraintEnd_toEndOf="@+id/a2"
    app:layout_constraintHeight_percent="0.08"
    app:layout_constraintStart_toStartOf="@+id/a2"
    app:layout_constraintTop_toTopOf="@+id/a3" />


</androidx.constraintlayout.widget.ConstraintLayout>

这是它的外观(我添加了布局编辑器的屏幕截图,以便更好地理解 ConstaintLayout)


一些额外信息:

ConstraintLayout 并不意味着具有嵌套视图组(在您的情况下,您在 constraintlayout 中有 LinearLayout)。

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

您可以将 ConstraintLayoutguidelinesChains 一起使用以支持不同的屏幕尺寸,您不必使用视图上的固定尺寸,您将能够使用单一布局来支持不同的屏幕尺寸。