web-dev-qa-db-ja.com

展開状態で影のないCollapsingToolbarLayout

AppcompatからのCollapsingToolbarLayoutは、折りたたまれた状態で影を表示しますが、展開したとき（または処理中に展開したとき）影は消えます

私のサンプルコード https://github.com/NaikSoftware/CollapsingToolbarWithImageAndTabs/tree/master/app

レイアウト

<?xml version="1.0" encoding="utf-8"?>

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context="ua.naiksoftware.hidetabs.MainActivity">

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/AppTheme.AppBarOverlay">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/toolbar_plus_tabs"
        app:contentScrim="@Android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap|enterAlways"
        app:titleEnabled="false"
        app:toolbarId="@+id/toolbar_wrapper">

        <ImageView
            Android:id="@+id/appbar_background"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:src="@drawable/header_back"
            app:layout_collapseMode="parallax"/>

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="top"
            Android:background="@Android:color/transparent"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar_wrapper"
            Android:layout_width="match_parent"
            Android:layout_gravity="bottom"
            Android:background="@Android:color/transparent"
            Android:layout_height="wrap_content"
            Android:minHeight="@dimen/tab_layout_height">

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="@Android:color/transparent"
                app:tabGravity="fill"
                app:tabIndicatorColor="@Android:color/white"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@Android:color/white" />
        </Android.support.v7.widget.Toolbar>

    </Android.support.design.widget.CollapsingToolbarLayout>

</Android.support.design.widget.AppBarLayout>

<Android.support.v4.view.ViewPager
    Android:id="@+id/container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<Android.support.design.widget.FloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/ic_add_black_24dp"
    Android:layout_margin="@dimen/fab_margin"
    Android:tint="@Android:color/white"
    Android:layout_gravity="bottom|end"
    app:elevation="@dimen/fab_elevation"
    app:layout_behavior="ua.naiksoftware.hidetabs.FabSlidingBehavior"/>

折りたたまれていますCollapsed state

拡張Expanded state

androidshadowcollapseandroid-collapsingtoolbarlayout
21
Nickolay Savchenko

私は同じ問題を抱えており、解決策を見つけました：

まず、最新のサポートライブラリに更新する必要があります（私は24.1.0を使用しています）

次に、stateListAnimatorをAppBarLayoutに適用します。

例：

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="320dp"
    Android:stateListAnimator="@drawable/appbar_always_elevated"
    Android:fitsSystemWindows="true">

このxmlをアニメーターとして使用します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <objectAnimator Android:propertyName="elevation"
            Android:valueTo="8dp"
            Android:valueType="floatType"
            Android:duration="1"/>
    </item>
</selector>
44
Miguel Beltran

AppBarLayoutの公式のstateListAnimatorを見つけることができます here

1。このappbar_elevation.xmlをanimator-v21という名前のリソースディレクトリに配置します

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:tools="http://schemas.Android.com/tools"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    tools:ignore="PrivateResource">
    <item>
        <objectAnimator
            Android:propertyName="elevation"
            Android:valueTo="@dimen/design_appbar_elevation"
            Android:valueType="floatType" />
    </item>
</selector>

2。AppBarLayoutセットAndroid:stateListAnimator="@animator/appbar_elevation"

19
Yuraj