使用 RelativeLayout 重叠 ViewPager 选项卡

Question

我有一个 Activity，其中包含一个带有两个选项卡的 ViewPager。当用户按下按钮时，我希望出现一个不透明的 RelativeLayout 叠加层，然后用户可以在其中 select 不同的选项。

问题是叠加层没有与 ViewPager 的选项卡重叠，而是短暂停止。

我的XML:

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/footer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:background="@color/light_gray" >

            <TextView
                 ..../>

        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/footer"/>

    </RelativeLayout>

    <Button
        .../>

    <RelativeLayout
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/orange"
        android:visibility="gone"
        android:alpha="0.9">
    </RelativeLayout>

</RelativeLayout>

目前的情况：

我想要的样子：

Answer 1

据我所知，选项卡属于 ActionBar，您不能仅覆盖选项卡。但是，如果您使用支持库 v7，则可以在布局文件中定义工具栏（ActionBar 的新名称）。您还可以在 xml 中定义 TabLayout（选项卡的容器）。为此，您必须使用 Google 的新设计支持库。

只需通过添加

来导入这些库

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'

到您的 gradle 文件。现在您可以使用

    <android.support.v7.widget.Toolbar />
    <android.support.design.widget.TabLayout />

在你的布局文件中。请务必将您的主题更新为

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">

这样就不会有默认的 ActionBar 并且继承自 AppCompatActivity 而不是 Activity、FragmentActivity 或其他东西。要使您的工具栏像 ActionBar 一样工作，请按其 ID 加载工具栏并使用 setSupportActionBar(toolbar)。要让 ViewPager 和 TabLayout 一起工作，只需照常设置您的 ViewPager，然后在 TabLayout 对象上调用 setupWithViewPager(viewPager)。

您的结果 xml 应该如下所示：

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

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </RelativeLayout>

</LinearLayout>

使用 RelativeLayout 重叠 ViewPager 选项卡

Overlap ViewPager tabs with a RelativeLayout

android

android-layout

android-viewpager

android-actionbar

android-relativelayout