代码之家 › 专栏 › 技术社区 › Quillion

底部带有广告的选项卡和上方的按钮的布局

android-relativelayout android-tabs android-layout android

Quillion · 技术社区 · 7 年前

<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" 最后我把它放在了底部,隐藏在广告后面。

2 回复 | 直到 7 年前

heethjain21 7 年前

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

现在你有两个孩子在家 线性布局 即 CoordinatorLayout 和 AdView

既然你想 忠告 协调布局 CordinatorLayout 为了占据剩余的空间,

设定高度 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 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>

编辑:附加图像以便更好地理解:

DawidJ 7 年前

你试过设置吗 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>