CollapsingToolbarLayout

Question

Ben özel bir görünüm ile CollapsingToolbarLayout uygulamaya çalışıyorum, ama bunu yapamadığı şeyler:

açıldığını gösteriyor yüzden Resim gönderebilir edemez (üzgün yapmak istiyorum ne Imgur):

Expanded, başlık

(Tomardaki) genişletilmiş değil görüntü ve başlıkla bir profil ekranıdır, resim ve başlık araç çubuğunda olacaktır

Ben çok minnettar olacağım bu yeniyim ve birisi bana yardımcı olabilir eğer öyleyse animasyonlar lolipop

beklendiği gibi gördüm

Ama her şey çalışma değildi!

(I yazı ile ilgili bir şey yok çünkü ben örnek kod göndermeyin)

Answer 1

Benim Çözüm

ben köpek örnek ile başladı yüzden uygulamak aynı senaryo vardı ve açıkladığınız aynen böyle çalışması için bazı değişiklikler yaptık. Kodum bu proje üzerinde bir çatal olarak bulundu https://github.com/hanscappelle/CoordinatorBehaviorExample

En önemli değişiklik düzeninde görüyorum edilebilir:

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

Ve ben sadece için optimize AvatarImageBehaviour sınıfında avatarı orijinal konumdan özniteliklerde yapılandırılan konuma getirme. Yani, görüntünün başka bir konumdan hareket etmesini istiyorsanız, yalnızca düzen içinde hareket ettirin. Bunu yaptığınızda, AppBarLayout öğesinin hala bir kardeşi olduğundan veya kodda bulunmayacağından emin olun.

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

Kaynaklar

En yaygın örnek https://github.com/saulmm/CoordinatorBehaviorExample listelenen köpek ile biridir. Bu iyi bir örnektir, ancak genişletilmiş görünümün ortasında bulunan araç çubuğu, aynı zamanda hareket eden bir arka plan görüntüsü ile de vardır. Bütün bunlar benim örneğimde kaldırıldı.

Başka bir açıklama http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html no'lu adreste bulunur, ancak bu bulut/deniz tabanı görüntüsünün atıfta bulunduğu köpek örneğinde de bulunduğundan, biri diğerinin üstünde açıkça oluşturulmuştur.

Ben de verilen bir lütuf ile bu SO soru bulundu ama gerçekten son çözüm Add icon with title in CollapsingToolbarLayout

ne olduğunu bulamadık Ve nihayet bu işi yapan bir çalışma kütüphane olmalıdır. Ben kontrol ettim ama ilk görüntü ortalanmıyordu ve daha önce baktığım köpek örneğinde çalıştım.

Daha https://github.com/datalink747/CollapsingAvatarToolbar okumak için Bkz

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

Bu library kullanabilirsiniz, çok esnek ve bunu en sayfadaki talimatları var.

Answer 3

Bu efekti elde etmek için bu kod örneğini Saul MM tarafından https://github.com/saulmm/CoordinatorBehaviorExample kullanabilirsiniz. Kod burada yapıştırmak için çok büyük, bu yüzden herhangi bir kodu yapıştırmayın. Umarım bu size yardımcı olur.