标签布局，底部有广告，上面有按钮

Question

我创建了一个带有标签的布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:ads="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            <android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

    </android.support.design.widget.CoordinatorLayout>

    <com.google.android.gms.ads.AdView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            ads:adSize="SMART_BANNER"
            ads:adUnitId="@string/ad_id"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true">
    </com.google.android.gms.ads.AdView>

</RelativeLayout>

其中一个选项卡是

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/image_section"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:orientation="vertical">
        <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/image"/>

        <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/text"
                android:gravity="center"/>
    </LinearLayout>

    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:gravity="center"/>

</RelativeLayout>

问题是，在广告加载之前，我可以一直看到底部的按钮。我如何使选项卡的布局恰好占据可用的 space 而不是整个屏幕？同样，如果我添加一个按钮并将其置于顶部，而不是出现在选项卡下方，它会一直出现在顶部。

编辑：我想让它看起来像这张图片

按钮是显示的标签内容的一部分，广告是主布局的一部分。问题是，每当我将按钮设置为 android:layout_alignParentBottom="true" 时，我最终都会将它放在底部并隐藏在广告后面。

Answer 1

将主布局的根更改为垂直 LinearLayout 而不是 RelativeLayout。

现在 LinearLayout 中有两个 children，即 CoordinatorLayout 和 AdView。

由于您希望 AdView 位于 CoordinatorLayout 下方，而 CordinatorLayout 占据 space 的其余部分，

将 CoordinatorLayout 的高度设置为 android:layout_height="match_parent" 和 android:layout_weight="1"，问题应该已解决。

同时将 AppBarLayout 和 TabLayout 的高度更改为 match_parent。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.CoordinatorLayout>

    <com.google.android.gms.ads.AdView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/ad_id">

    </com.google.android.gms.ads.AdView>

</LinearLayout>

其他布局无需更改。但我建议您使用 LinearLayout 作为根布局而不是 RelativeLayout

下面是我建议在您的选项卡布局中进行的更改：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/image_section"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/image"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/text"
            android:gravity="center"/>
    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_centerHorizontal="true"
        android:gravity="center"/>

</LinearLayout>

编辑：附上图片以便更好地理解：

Answer 2

您是否尝试过在 AdView 中设置 minHeight？

将您的 Tab 布局更改为：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/image_section"
    android:orientation="vertical">

<ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/image"/>

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/text"
        android:gravity="center"/>

<View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:gravity="center"/>

</LinearLayout>

标签布局，底部有广告，上面有按钮

Layout with tabs with ad on bottom and a button above it

android

android-layout

android-tabs

android-relativelayout