web-dev-qa-db-ja.com

スクロールすると、CollapsingToolbarLayoutが機能しない（折りたたむ）

CollapsingToolbarLayoutとその下にリストビューを作成しようとしています。リストビューをスクロールするとツールバーが折りたたまれますが、スクロールするとツールバーが折りたたまれません。

このチュートリアルを使用： http://Android-developers.blogspot.in/2015_05_01_archive.html

注：FrameLayoutにはリストビューが含まれています

    <LinearLayout 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="wrap_content"
        Android:orientation="vertical"
        Android:scrollbars="vertical">

        <Android.support.design.widget.AppBarLayout
            Android:id="@+id/appbar"
            Android:layout_width="match_parent"
            Android:layout_height="192dp"
            Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <Android.support.design.widget.CollapsingToolbarLayout
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <Android.support.v7.widget.Toolbar
                    Android:id="@+id/toolbara"
                    Android:layout_width="match_parent"
                    Android:layout_height="?attr/actionBarSize"
                    Android:background="?attr/colorPrimary"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            </Android.support.design.widget.CollapsingToolbarLayout>
        </Android.support.design.widget.AppBarLayout>

        <FrameLayout
            Android:id="@+id/frame"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content" />
    </LinearLayout>

フレームレイアウトコード：

<RelativeLayout 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:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="ranjithnair02.com.supporttest.BlankFragment">

    <ListView
        Android:id="@+id/rcyv"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        Android:layout_marginBottom="10dp"
        Android:layout_marginRight="10dp"
        Android:src="@Android:drawable/ic_search_category_default"
        app:borderWidth="0dp"
        app:elevation="5dp"
        app:rippleColor="@color/wallet_highlighted_text_holo_light" />
</RelativeLayout>

enter image description here

androidmaterial-designandroid-toolbarandroiddesignsupportandroid-collapsingtoolbarlayout
10
Psypher

ListViewの代わりに RecyclerView を使用する必要があります

注：GradleファイルのRecyclerViewを更新することを忘れないでください。

  compile 'com.Android.support:recyclerview-v7:22.2.0'
28
Kishan Vaghela

代わりにRecyclerViewを使用して例を実行しました。ソースコードはここにあります： https://github.com/jiahaoliuliu/MaterialDesignSample/tree/collapsingToolbars

考慮すべき点がいくつかあり、投稿には記載されていません。

  1. CoordinatorLayoutをメインレイアウトとして使用する

  2. ActionBarなしでテーマを使用し、代わりにツールバーをactionBarとして設定します。これは、次のようなアクティビティの特別なテーマを作成することで実行できます。

    <!-- Indigo without actionbar when toolbar is used -->
<style name="IndigoWithoutActionBar" parent="Indigo">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

    そして、AndroidManifest.xmlファイルで、次のようにします。

    <activity
    Android:name=".CollapsingToolbarActivity"
    Android:label="@string/app_name"
    Android:theme="@style/IndigoWithoutActionBar"
    >
</activity>

    これが完了したら、Javaコードに設定します。

    // Actionbar
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

これが私が使用する機能的なxmlコードです。

<?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"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/simpleRecyclerView"
        Android:layout_height="match_parent"
        Android:layout_width="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

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

これで十分でない場合は、ここでChris Banesのコードに従ってください： https://github.com/chrisbanes/cheesesquare

6
jiahao

私の場合：私はToolbarに高さを与えます。

wrap_contentでした。その場合は、以下を使用してToolbarの高さを修正してみてください。

Android:layout_height="?attr/actionBarSize"
2
Santanu Sur

問題はRelativeLayoutです。 FrameLayoutをListViewに置き換えてから、FloatingButtonに置き換えてください。もちろん、すべてCoordinatorLayoutで囲まれています。

1
aows
<FrameLayout
        Android:id="@+id/frame"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
1
user2410066

あなたはリストビューに2つのものを追加する必要があり、それは動作します

Android:nestedScrollingEnabled="true"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

私の作業XMLコードは

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:background="@color/black"
    tools:context="com.example.pr20020897.samplapp.DisplayAllDataActivity">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/app_bar_layout"
        Android:layout_width="match_parent"
        Android:layout_height="200dp">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar_layout"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            app:expandedTitleMarginStart="72dp"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                Android:id="@+id/toolbar_image"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:layout_collapseMode="parallax"
                Android:scaleType="centerCrop"
                Android:src="@drawable/db"
                Android:contentDescription="image" />


            <Android.support.v7.widget.Toolbar
                Android:id="@+id/app_bar"
                Android:layout_width="match_parent"
                Android:layout_height="?actionBarSize"
                Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:navigationIcon="@drawable/ic_arrow_back"
                app:contentInsetStart="72dp"
                app:layout_collapseMode="pin" />


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

    <ListView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        Android:id="@+id/listView"
        Android:nestedScrollingEnabled="true"
        Android:scrollbars="none"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:divider="#FF0000"
        Android:background="@color/black"
        Android:dividerHeight="1dp">
    </ListView>
</Android.support.design.widget.CoordinatorLayout>

うまくいけば誰かを助けます。

1
Prakash Sharma