开发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
- AppBarLayout Blocking the ViewPager Background: The default
appbar_scrolling_view_behaviorpushes 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. - 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




