我想实现以下布局:

  • map 作为基本布局
  • CollapsingToolbarLayout上方的透明窗口
  • RecyclerView内容

  • 我提供了一个示例,说明了它的外观。

    android - 透明的AppBarLayout和CollapsingToolbarLayout-LMLPHP

    我正在按照Cheesesquare中的示例介绍CollapsingToolbarLayout和AppBarLayout的实现。我设法使内容在CollapsingToolbarLayout(在xml布局中注释)中与 map 一起使用,但这不是理想的结果。

    但是,我没有找到任何解决方案/文档来使灰色框(请参阅中间的内部图像)在初始位置透明。我希望它是透明的,以便透视 map 。当用户向上滚动时,CollapsingToolbarLaoyut应该完成工作并折叠透明窗口并显示工具栏。目前,图像看起来只是白色或我给它提供的任何颜色。我已经尝试将颜色设置为透明,但是效果不理想。

    因此,我的问题:如何在初始阶段将“CollapsingToolbarLayout”设置为透明(请参见图像第1层灰色框)?

    这是我的布局代码。 CollapsingToolbarLayout效果很好,但是我看不到下面的 map 。如果有可能实现,那就太好了。
     <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">
    
    
        <!-- Layer 0 -->
        <FrameLayout
            android:id="@+id/overlayFragmentMap"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:elevation="0dip"
            />
    
    
        <!-- Layer 1 -->
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="192dp"
            android:fitsSystemWindows="true"
            android:theme="@style/CustomActionBar">
            <!--android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar-->
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorAccent"
                app:expandedTitleMarginBottom="32dp"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleTextAppearance="@color/black"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
    
                <!-- Map view inside here works perfectly but is not
                the deisired result -->
                <!--
                <FrameLayout
                    android:id="@+id/overlayFragmentMap"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:elevation="0dip"
                    app:layout_collapseMode="parallax"
                    />
                -->
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@drawable/transparent"
                    android:elevation="4dip"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
    
    
    
    
        <!-- Fragment with recyclerview inside -->
        <FrameLayout
            android:id="@+id/overlayFragmentContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:elevation="3dip"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dip"
            android:clickable="true"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="bottom|right|end" />
    
    </android.support.design.widget.CoordinatorLayout>
    

    最佳答案


    尝试在AppBarLayout中使用它: android:background="@android:color/transparent"

    <android.support.design.widget.AppBarLayout
                android:id="@+id/appbar"
                android:layout_width="match_parent"
                android:layout_height="192dp"
                android:background="@android:color/transparent"
                android:fitsSystemWindows="true">
    
    结果如下:
    android - 透明的AppBarLayout和CollapsingToolbarLayout-LMLPHP
    希望能有所帮助。

    07-24 09:49
    查看更多