You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

开发CollapsingToolbarLayout时AppBarLayout遮挡ViewPager背景求助

Hey there! Let's figure out why your ViewPager's background is getting blocked by the AppBarLayout, and why you're seeing that semi-transparent effect when you set the AppBarLayout to transparent. Let's break this down step by step.

First, Diagnose the Issues

  1. AppBarLayout Blocking the ViewPager Background: The default appbar_scrolling_view_behavior pushes your ViewPager to start right below the AppBarLayout. Even if the AppBarLayout is transparent, if your ViewPager's background is set on itself, its top portion (under the AppBarLayout) might not show up depending on how the ParallaxViewPager handles backgrounds.
  2. Semi-Transparent Effect: This is likely because your AppBarLayout has a default elevation (shadow) that's semi-transparent, or the Toolbar/SmartTabLayout inside it is inheriting a non-transparent background from your theme.

Fixes to Try

1. Remove Semi-Transparent Shadows & Ensure Full Transparency

Update your AppBarLayout, Toolbar, and SmartTabLayout to eliminate any hidden backgrounds or shadows:

<android.support.design.widget.AppBarLayout 
    android:id="@+id/app_bar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@android:color/transparent"
    android:elevation="0dp" <!-- Remove default shadow -->
    app:elevation="0dp" <!-- Cover both API levels -->
    android:fitsSystemWindows="false">

    <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:paddingTop="30dp" 
        android:minHeight="?attr/actionBarSize" 
        app:layout_scrollFlags="scroll|enterAlways"
        android:background="@android:color/transparent"> <!-- Make Toolbar fully transparent -->
        <!-- Your existing Toolbar content remains the same -->
    </android.support.v7.widget.Toolbar>

    <com.ogaclejapan.smarttablayout.SmartTabLayout 
        android:id="@+id/viewpagertab" 
        android:layout_width="match_parent" 
        android:layout_height="48dp" 
        android:layout_marginTop="35dp"
        android:background="@android:color/transparent" <!-- Clear tab layout background -->
        <!-- Your existing tab layout attributes remain the same --> />
</android.support.design.widget.AppBarLayout>

2. Move the Background to the CoordinatorLayout (Best Fix for Background Visibility)

Instead of setting the background on the ViewPager, set it on the parent CoordinatorLayout. This way, the background sits behind all child views (including the AppBarLayout), so it will show through the transparent AppBarLayout without being blocked:

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/coordinate_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:background="@drawable/party"> <!-- Move background here -->

    <!-- Keep your AppBarLayout as updated above -->

    <li.yohan.parallax.ParallaxViewPager 
        android:id="@+id/viewpager" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="@android:color/transparent" <!-- Clear ViewPager background --> />

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

3. If You're Adding CollapsingToolbarLayout (Since You Mentioned Developing It)

If you want to integrate CollapsingToolbarLayout properly while keeping the background visible, adjust your layout structure like this:

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/coordinate_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:background="@drawable/party">

    <android.support.design.widget.AppBarLayout 
        android:id="@+id/app_bar" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:background="@android:color/transparent"
        android:elevation="0dp"
        app:elevation="0dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:background="@android:color/transparent">

            <android.support.v7.widget.Toolbar 
                android:id="@+id/toolbar" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content" 
                android:paddingTop="30dp" 
                android:minHeight="?attr/actionBarSize" 
                app:layout_collapseMode="pin"
                android:background="@android:color/transparent">
                <!-- Toolbar content -->
            </android.support.v7.widget.Toolbar>

            <com.ogaclejapan.smarttablayout.SmartTabLayout 
                android:id="@+id/viewpagertab" 
                android:layout_width="match_parent" 
                android:layout_height="48dp" 
                android:layout_marginTop="35dp"
                android:background="@android:color/transparent"
                <!-- Tab layout attributes --> />

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

    <li.yohan.parallax.ParallaxViewPager 
        android:id="@+id/viewpager" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="@android:color/transparent" />

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

Why This Works

  • Moving the background to the CoordinatorLayout ensures it's the lowest layer, so all transparent top views will let it show through.
  • Removing elevation and setting all inner views to transparent eliminates any semi-transparent shadows or inherited backgrounds that were causing the faded effect.
  • The CollapsingToolbarLayout setup maintains your desired scroll behavior while keeping the background visible.

内容的提问来源于stack exchange,提问作者Rektirino

火山引擎 最新活动