CollapsingToolbarLayout mit einer benutzerdefinierten Ansicht

Meine Lösung

Hatte ich das gleiche Szenario zu implementieren, so dass ich anfing, mit dem Hund z.B. und einige änderungen vorgenommen, damit es funktioniert genau wie Sie beschreiben. Mein code kann gefunden werden als eine Gabel auf, das Projekt finden Sie unter https://github.com/hanscappelle/CoordinatorBehaviorExample

Wichtigsten änderungen sind im layout:

<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.support.design.widget.AppBarLayout
    android:id="@+id/main.appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main.collapsing"
        android:layout_width="match_parent"
        android:layout_height="@dimen/expanded_toolbar_height"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        >

        <FrameLayout
            android:id="@+id/main.framelayout.title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            >

            <LinearLayout
                android:id="@+id/main.linearlayout.title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                android:orientation="vertical"
                android:paddingBottom="@dimen/spacing_small"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:gravity="bottom|center_horizontal"
                    android:text="@string/tequila_name"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/textsize_xlarge"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="@dimen/spacing_xxsmall"
                    android:text="@string/tequila_tagline"
                    android:textColor="@android:color/white"
                    />

            </LinearLayout>
        </FrameLayout>
    </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"
    android:scrollbars="none"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lineSpacingExtra="@dimen/spacing_xsmall"
        android:padding="@dimen/spacing_normal"
        android:text="@string/lorem"
        android:textSize="@dimen/textsize_medium"
        />

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

<android.support.v7.widget.Toolbar
    android:id="@+id/main.toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/primary"
    app:layout_anchor="@id/main.collapsing"
    app:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:title=""
    >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >

        <Space
            android:layout_width="@dimen/image_final_width"
            android:layout_height="@dimen/image_final_width"
            />

        <TextView
            android:id="@+id/main.textview.title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="@string/tequila_title"
            android:textColor="@android:color/white"
            android:textSize="@dimen/textsize_large"
            />

    </LinearLayout>
</android.support.v7.widget.Toolbar>

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="@dimen/image_width"
    android:layout_height="@dimen/image_width"
    android:layout_gravity="top|center_horizontal"
    android:layout_marginTop="@dimen/spacing_normal"
    android:src="@drawable/ninja"
    app:border_color="@android:color/white"
    app:border_width="@dimen/border_width"
    app:finalHeight="@dimen/image_final_width"
    app:finalXPosition="@dimen/spacing_small"
    app:finalYPosition="@dimen/spacing_small"
    app:finalToolbarHeight="?attr/actionBarSize"
    app:layout_behavior="saulmm.myapplication.AvatarImageBehavior"
    />

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

Und in der AvatarImageBehaviour Klasse, die ich optimiert für nur bewegt sich der avatar von der Ausgangsposition zu der position, konfiguriert in den Parametern. Also, wenn Sie wollen das Bild zu bewegen von einem anderen Standort aus nur verschieben Sie Sie in das layout. Wenn Sie tun, so stellen Sie sicher, dass die AppBarLayout noch ein Geschwisterchen, oder es wird nicht im code gefunden werden.

package saulmm.myapplication;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.util.AttributeSet;
import android.view.View;
import de.hdodenhof.circleimageview.CircleImageView;

public class AvatarImageBehavior extends CoordinatorLayout.Behavior<CircleImageView> {

//calculated from given layout
private int startXPositionImage;
private int startYPositionImage;
private int startHeight;
private int startToolbarHeight;

private boolean initialised = false;

private float amountOfToolbarToMove;
private float amountOfImageToReduce;
private float amountToMoveXPosition;
private float amountToMoveYPosition;

//user configured params
private float finalToolbarHeight, finalXPosition, finalYPosition, finalHeight;

public AvatarImageBehavior(
        final Context context,
        final AttributeSet attrs) {

    if (attrs != null) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AvatarImageBehavior);
        finalXPosition = a.getDimension(R.styleable.AvatarImageBehavior_finalXPosition, 0);
        finalYPosition = a.getDimension(R.styleable.AvatarImageBehavior_finalYPosition, 0);
        finalHeight = a.getDimension(R.styleable.AvatarImageBehavior_finalHeight, 0);
        finalToolbarHeight = a.getDimension(R.styleable.AvatarImageBehavior_finalToolbarHeight, 0);
        a.recycle();
    }
}

@Override
public boolean layoutDependsOn(
        final CoordinatorLayout parent,
        final CircleImageView child,
        final View dependency) {

    return dependency instanceof AppBarLayout; //change if you want another sibling to depend on
}

@Override
public boolean onDependentViewChanged(
        final CoordinatorLayout parent,
        final CircleImageView child,
        final View dependency) {

    //make child (avatar) change in relation to dependency (toolbar) in both size and position, init with properties from layout
    initProperties(child, dependency);

    //calculate progress of movement of dependency
    float currentToolbarHeight = startToolbarHeight + dependency.getY(); //current expanded height of toolbar
    //don't go below configured min height for calculations (it does go passed the toolbar)
    currentToolbarHeight = currentToolbarHeight < finalToolbarHeight ? finalToolbarHeight : currentToolbarHeight;
    final float amountAlreadyMoved = startToolbarHeight - currentToolbarHeight;
    final float progress = 100 * amountAlreadyMoved / amountOfToolbarToMove; //how much % of expand we reached

    //update image size
    final float heightToSubtract = progress * amountOfImageToReduce / 100;
    CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
    lp.width = (int) (startHeight - heightToSubtract);
    lp.height = (int) (startHeight - heightToSubtract);
    child.setLayoutParams(lp);

    //update image position
    final float distanceXToSubtract = progress * amountToMoveXPosition / 100;
    final float distanceYToSubtract = progress * amountToMoveYPosition / 100;
    float newXPosition = startXPositionImage - distanceXToSubtract;
    //newXPosition = newXPosition < endXPosition ? endXPosition : newXPosition; //don't go passed end position
    child.setX(newXPosition);
    child.setY(startYPositionImage - distanceYToSubtract);

    return true;
}

private void initProperties(
        final CircleImageView child,
        final View dependency) {

    if (!initialised) {
        //form initial layout
        startHeight = child.getHeight();
        startXPositionImage = (int) child.getX();
        startYPositionImage = (int) child.getY();
        startToolbarHeight = dependency.getHeight();
        //some calculated fields
        amountOfToolbarToMove = startToolbarHeight - finalToolbarHeight;
        amountOfImageToReduce = startHeight - finalHeight;
        amountToMoveXPosition = startXPositionImage - finalXPosition;
        amountToMoveYPosition = startYPositionImage - finalYPosition;
        initialised = true;
    }
}
}

Quellen

Bekannteste Beispiel ist der mit dem Hund aufgeführt https://github.com/saulmm/CoordinatorBehaviorExample . Es ist ein gutes Beispiel dafür, aber in der Tat hat der Symbolleiste in der Mitte des erweiterten Ansicht mit einem hintergrund Bild bewegt sich auch. Alle, die entfernt wurde, in meinem Beispiel.

Andere Erklärung findet sich in http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html aber da cloud/Meer hintergrund Bild referenziert wird, die man auch in der Hund-Beispiel eins ist klar, bauen auf der anderen.

Ich fand auch diese Frage ALSO mit einem Kopfgeld vergeben, aber konnte nicht wirklich herausfinden, was die endgültige Lösung war Add icon mit Titel in CollapsingToolbarLayout

Schließlich sollte eine Arbeitsgruppe Bibliothek, die das Werk tut. Ich habe es ausprobiert, aber das erste Bild nicht zentriert und ich lieber arbeitete auf den Hund Beispiel, das ich hatte, bevor sah. Sehen https://github.com/datalink747/CollapsingAvatarToolbar

Mehr Lesen

http://saulmm.github.io/mastering-coordinator
http://www.androidauthority.com/using-coordinatorlayout-android-apps-703720/
https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html
https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout

InformationsquelleAutor der Antwort hcpl

Können Sie diese Bibliothek , es ist sehr flexibel und Sie haben Anweisungen auf der Seite.

InformationsquelleAutor der Antwort maspinu