带有底部广告标签和上方按钮的布局答案

【问题标题】：Layout with tabs with ad on bottom and a button above it带有底部广告标签和上方按钮的布局
【发布时间】：2018-12-28 00:18:18
【问题描述】：

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

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

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

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

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

【问题讨论】：

能否请您显示参考图像或布局，您想要多精确。因此，我们可以相应地更改您的 XML
@ParthPatel 我添加了一张图片来说明我的意思

标签： android android-layout android-tabs android-relativelayout

【解决方案1】：

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

现在您在LinearLayout 有两个孩子，即CoordinatorLayout 和AdView。

由于您希望AdView 位于CoordinatorLayout 和CordinatorLayout 下方以占据其余空间，

将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>

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

【讨论】：

成功了！谢谢！！！唯一的问题是，请将 TabLayout 高度设置为 wrap_content 而不是 match_parent，否则它不起作用
哦，好吧，从未尝试过 TabLayout。感谢您指出。

【解决方案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>

【讨论】：