使用RelativeLayout重叠ViewPager选项卡

时间:2015-07-17 23:40:30

标签: android android-layout android-actionbar android-viewpager android-relativelayout

我有一个Activity,其中包含一个带有两个标签的ViewPager。当用户按下按钮时,我想要一个不透明的RelativeLayout叠加层出现在用户可以选择不同选项的位置。

问题在于叠加层不会与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>

目前的样子:

What it looks like currently:

我希望它看起来像:

What I want it to look like

1 个答案:

答案 0 :(得分:2)

AFAIK标签属于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而不是ActivityFragmentActivity或其他内容。 要使您的工具栏像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>