web-dev-qa-db-ja.com

透明なAppBarLayoutおよびCollapsingToolbarLayout

次のレイアウトを実現したいと思います。

  1. 基本レイアウトとしてマップ
  2. CollapsingToolbarLayout内の透明なウィンドウ
  3. コンテンツ用のRecyclerView

これがどのように見えるかの例を含めました。

enter image description here

CollapsingToolbarLayoutおよびAppBarLayout実装の Cheesesquare からこの素晴らしい例に従っていました。 CollapsingToolbarLayout内のマップ（レイアウトxmlでコメント化）でコンテンツを機能させることができましたが、これは望ましい結果ではありません。

ただし、灰色のボックス（中央の内側の画像を参照）を初期位置で透明にするためのソリューション/ドキュメントは見つかりませんでした。地図が透けて見えるように透明にしたいです。ユーザーが上にスクロールすると、CollapsingToolbarLaoyutが作業を行い、透明なウィンドウを折りたたみ、ツールバーを表示します。今のところ、画像は白または私がそれを与えるどんな色にでも見えます。私はすでに色を透明に設定しようとしましたが、希望する効果がありませんでした。

だから私の質問：初期段階で「CollapsingToolbarLayout」を透明に設定するにはどうすればよいですか（レイヤー1の灰色の画像を参照） ？

これがレイアウト用の私のコードです。 CollapsingToolbarLayoutはうまく機能しますが、下のマップを見ることができません。実装が可能であれば素晴らしいことです。

 <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>
androidandroid-layouttransparentandroid-collapsingtoolbarlayout
16
Devdroid

初期段階で「CollapsingToolbarLayout」を透明に設定するにはどうすればよいですか（レイヤー1の灰色の画像を参照） ）？

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">

結果は次のとおりです。

enter image description here

お役に立てば幸いです。

35
ʍѳђઽ૯ท