web-dev-qa-db-fra.com

Définir la hauteur de départ de CollapsingToolbarLayout

Je veux pouvoir faire défiler l'ImageView à l'intérieur du CollapsingToolbarLayout. Alors, comment cela serait-il possible, et comment définir une hauteur de départ de cette vue Image?

Ma hauteur d'ImageView est de 280p, au début de l'activité, je veux montrer 200p, puis je peux faire défiler vers le bas pour voir le reste de l'image. J'ai vu quelque chose de similaire dans l'application WhatsApp.

Voici un lien pour voir ce que je veux:

enter image description here

Mon code:

<?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:layout_width="match_parent"
    Android:layout_height="match_parent" 
    Android:fitsSystemWindows="true"
    tools:context="com.example.yasser.version6.Profile">

<Android.support.design.widget.AppBarLayout 
    Android:id="@+id/app_bar"
    Android:fitsSystemWindows="true"
    Android:layout_height="@dimen/app_bar_height"
    Android:layout_width="match_parent"
    Android:theme="@style/MyMaterialTheme.AppBarOverlay">

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

        <ImageView
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:src="@drawable/tof" />

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

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

<include
    Android:id="@+id/content"
    layout="@layout/content_profile" />


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

Code de profil de contenu:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v4.widget.NestedScrollView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    tools:showIn="@layout/activity_profile"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="com.example.yasser.version6.Profile">

</Android.support.v4.widget.NestedScrollView>
androidandroid-design-libraryandroid-collapsingtoolbarlayout
24
Stranger B.

cheesesquare implémentez votre demande

c'est une mise en page dans cheesesquare

<?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:id="@+id/main_content"
    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.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical"
            Android:paddingTop="24dp">

            <Android.support.v7.widget.CardView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content">

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="Info"
                        Android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </Android.support.v7.widget.CardView>

            <Android.support.v7.widget.CardView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="@dimen/card_margin"
                Android:layout_marginLeft="@dimen/card_margin"
                Android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content">

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="Friends"
                        Android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </Android.support.v7.widget.CardView>

            <Android.support.v7.widget.CardView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="@dimen/card_margin"
                Android:layout_marginLeft="@dimen/card_margin"
                Android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content">

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="Related"
                        Android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </Android.support.v7.widget.CardView>

        </LinearLayout>

    </Android.support.v4.widget.NestedScrollView>

    <Android.support.design.widget.FloatingActionButton
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        Android:src="@drawable/ic_discuss"
        Android:layout_margin="@dimen/fab_margin"
        Android:clickable="true"/>

</Android.support.design.widget.CoordinatorLayout>
12
Mohammad Hossein Gerami

En fait, AppBarLayout a une méthode spéciale pour appliquer un tel décalage:

final int setAppBarTopBottomOffset(CoordinatorLayout coordinatorLayout, AppBarLayout appBarLayout, int newOffset, int minOffset, int maxOffset)

Malheureusement, il a un niveau d'accès package-private, mais nous pouvons l'invoquer via une telle chaîne intermédiaire:

private void setAppBarOffset(int offsetPx){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
    behavior.onNestedPreScroll(mCoordinatorLayour, mAppBarLayout, null, 0, offsetPx, new int[]{0, 0});
}

Une chose à mentionner - cette méthode doit être appelée après que mAppBarLayout est déjà préparé et mesuré. Donc, la bonne façon est de l'appeler via la méthode post de view.

mCoordinatorLayour = (CoordinatorLayout) findViewById(R.id.root_coordinator);
mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);

mAppBarLayout.post(new Runnable() {
    @Override
    public void run() {
        int heightPx = findViewById(R.id.iv_header).getHeight();
        setAppBarOffset(heightPx/2);
    }
});
22
DmitryArc