2015-10-01 24 views
12

Ich versuche, die CollapsingToolbarLayout mit einer benutzerdefinierten Ansicht zu implementieren, aber ich bin nicht in der Lage, es zu tun:CollapsingToolbarLayout mit einer benutzerdefinierten Ansicht

Was ich tun möchte, (sorry ich keine Bilder veröffentlichen können, so dass es auf ist Imgur):

Expanded, der Kopf ist ein Profilbild mit Bild und Titel

enter image description here

nicht (auf Scroll erweitert), das Bild und der Titel wird in der Symbolleiste auf sein

Ich

enter image description here

Aber alles sah funktionierte nicht, wie ich

erwartete ich bin neu in diesem und Animationen Lutscher so, wenn mir jemand helfen könnte ich sehr dankbar!

(ich weiß nicht Beispielcode schreiben, weil ich nicht etwas relevant Post haben)

Antwort

8

Meine Lösung

hatte ich das gleiche Szenario so implementieren ich mit dem Hund Beispiel gestartet und nahm einige Änderungen für sie genau zu arbeiten wie Sie beschreiben.

<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 für nur optimiert: Mein Code kann als Gabel an diesem Projekt finden Sie https://github.com/hanscappelle/CoordinatorBehaviorExample

enter image description here enter image description here

Die wichtigsten Änderungen sind im Layout zu finden Bewegen des Avatars von der ursprünglichen Position zu der in den Attributen konfigurierten Position. Wenn Sie also das Bild von einem anderen Ort verschieben möchten, verschieben Sie es einfach innerhalb des Layouts. Stellen Sie in diesem Fall sicher, dass das AppBarLayout immer noch ein Geschwister ist oder im Code nicht gefunden wird.

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

gängigste Beispiel ist das mit dem Hund an https://github.com/saulmm/CoordinatorBehaviorExample aufgeführt. Es ist ein gutes Beispiel, aber tatsächlich hat die Werkzeugleiste in der Mitte der erweiterten Ansicht ein Hintergrundbild, das sich ebenfalls bewegt. All das wurde in meinem Beispiel entfernt.

Eine andere Erklärung findet sich unter http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html, aber da das dort genannte Cloud/Sea-Backdrop-Image auch im Hundebeispiel zu finden ist, ist das eine eindeutig über dem anderen aufgebaut.

Ich fand auch diese Frage SO mit einer ausgezeichneten Prämie aber wirklich kann nicht herausfinden, was die endgültige Lösung Add icon with title in CollapsingToolbarLayout

war Und schließlich soll dies eine Arbeitsbibliothek sein, die die Arbeit des Fall ist. Ich habe es überprüft, aber das anfängliche Bild war nicht zentriert und ich arbeitete eher an dem Hundebeispiel, das ich vorher angeschaut hatte. Siehe https://github.com/datalink747/CollapsingAvatarToolbar

Mehr

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

0

Sie dieses library verwenden können, ist es sehr flexibel und Sie haben Anweisungen auf seiner Seite.

+0

Ja lesen sah ich schon, aber ich habe nicht gefunden, wie man ein Bild in der Mitte des Kopfes hinzufügen und verschieben Sie sich in die Symbolleiste – ChargerDukes

+0

Nun, Sie könnten ein Menü-Symbol für Ihr kleines Bild erstellen, und während die Kopfzeile nicht ausgeblendet ist, können Sie es ausblenden (Die Kopfzeile enthält das große Bild als Standard). Wenn die Animation beendet ist (Kopfzeile wurde minimiert), können Sie sie erneut anzeigen. – Lazai

+0

@Lazai das würde nicht den gleichen Einfluss geben, wird es wie Flicker ändern – AnswerDroid

10

Sie können dieses Codebeispiel https://github.com/saulmm/CoordinatorBehaviorExample von Saul MM verwenden, um diesen Effekt zu erzielen. Der Code ist zu groß, um hier einzufügen, also keinen Code einzufügen. Hoffe das hilft dir.

+1

Ja, ich habe es bereits versucht, aber ich konnte die Symbolleiste nicht an der Spitze (im Beispiel die Symbolleiste ist in der Mitte, wenn nicht gecrolle) – ChargerDukes

+0

Was genau genau bist du jetzt konfrontiert? –

+0

Wenn ich die Symbolleiste an der Spitze halte, kann ich das Profilbild nicht zentrieren und es nach oben links verschieben – ChargerDukes

Verwandte Themen