CollapsingToolbarLayout con una visualizzazione personalizzata

Question

Sto cercando di implementare il CollapsingToolbarLayout con una visualizzazione personalizzata, ma sono in grado di farlo:

Quello che voglio fare (scusate non riesco a postare le immagini in modo che sia il Imgur):

espanso, l'intestazione è una schermata del profilo con l'immagine e titolo

Non espanso (su pergamena), l'immagine e il titolo saranno sulla barra degli strumenti

Ma tutto quello che vedevo non funzionava come mi aspettavo

io sono nuovo a questo e lecca-lecca le animazioni così se qualcuno mi potrebbe aiutare sarò molto grato!

(non inviare il codice di esempio, perché non ho qualcosa di rilevante per post)

Answer 1

mia soluzione

ho avuto lo stesso scenario per implementare così ho iniziato con l'esempio cane e ha apportato alcune modifiche per farlo funzionare esattamente come si descrive. Il mio codice può essere trovato come una forchetta su quel progetto, vedere https://github.com/hanscappelle/CoordinatorBehaviorExample

modifiche più importanti sono nel 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> 

E nella classe AvatarImageBehaviour che ho ottimizzato per solo spostando l'avatar dalla posizione originale alla posizione configurata negli attributi. Quindi, se vuoi che l'immagine si sposti da un'altra posizione, spostala all'interno del layout. Quando lo fai, assicurati che AppBarLayout sia ancora un fratello o che non venga trovato nel codice.

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; 
    } 
} 
} 

Fonti

esempio più comune è quella con il cane elencato https://github.com/saulmm/CoordinatorBehaviorExample. È un buon esempio, ma in effetti ha la barra degli strumenti nel mezzo della vista espansa con un'immagine di sfondo che si sposta anche. Tutto ciò che è stato rimosso nel mio esempio.

Un'altra spiegazione è trovata a http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html ma poiché l'immagine di sfondo cloud/mare a cui si fa riferimento si trova anche nell'esempio di cane uno è chiaramente costruito sopra l'altro.

Ho trovato anche questo SO domanda con una taglia assegnati ma non riuscivo a scoprire quale sia la soluzione finale è stata Add icon with title in CollapsingToolbarLayout

E infine questo dovrebbe essere una libreria di lavoro che fa il lavoro. L'ho verificato ma l'immagine iniziale non era centrata e preferivo lavorare sull'esempio di cane che avevo visto prima. Vedi https://github.com/datalink747/CollapsingAvatarToolbar

più testo da leggere

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

Answer 2

È possibile utilizzare questo library, è molto flessibile e si dispone di istruzioni su di essa la pagina.

Answer 3

È possibile utilizzare questo esempio di codice https://github.com/saulmm/CoordinatorBehaviorExample di Saul MM per ottenere questo effetto. Il codice è troppo grande per essere incollato qui, quindi non incollare alcun codice. Spero che questo ti aiuti.