CollapsingToolbarLayout

Question

collapsing_toolbarが展開されている場合、私は私がイメージを持っている私はCollapsingToolbarLayout

<?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:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     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="350dp" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleTextAppearance="@android:color/transparent" 
      android:fitsSystemWindows="true"> 

      <ImageView 
       android:id="@+id/header_image" 
       android:layout_width="match_parent" 
       android:layout_height="350dp" 
       android:scaleType="centerCrop" 
       android:fitsSystemWindows="true" 
       android:contentDescription="@string/app_name" 
       android:src="@drawable/festival" 
       app:layout_collapseMode="parallax"/> 

      <include layout="@+id/custom_layout" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" /> 

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

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

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

を使用したいの断片を望んでいるが表示され、崩壊したときに私はしたいです@ + id/custom_layout。 custom_layoutは、textviewとimageviewを持つ相対レイアウトです。代わりに、カスタムレイアウトの

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    app:layout_collapseMode="pin" /> 

：

は、私は以下の持っていたかのように正確に同じ動作を持っていると思います。

これはなぜ機能しないのですか？ CollapsingToobarLayoutが展開されても、ImageViewとカスタムレイアウトの両方が表示されます。

!!注釈ツールバーが定義されたアクティビティがあります。私はコードのその部分に触れたくありません。フラグメントをスクロールすると、アクティビティで定義されている既存のツールバーの下に@ + id/custom_layoutを配置します。私はフラグメント内部onViewCreated（）メソッドに以下を追加します

：

RelativeLayout headerLayout = view.findViewById(R.id.custom_layout); 
AppBarLayout mAppBarLayout = view.findViewById(R.id.app_bar_layout); 

mAppBarLayout.addOnOffsetChangedListener(new 
AppBarLayout.OnOffsetChangedListener() { 

       @Override 
       public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
        if (verticalOffset == 0) { 
        //fully expanded 
        headerLayout.setVisibility(View.GONE) 
        } else { 
         //fully collapsed 
         headerLayout.setVisibility(View.Visible); 

        //ISSUE HERE!!!: Only when ImageView has height = 0, the headerLayout pops up. 
        //!!The transition is not smoothly. 
        // I would like the headerLayout to be visible when the ImageView height reaches the headerLayout height. 
        } 
       } 
      }); 

Answer 1

collapsingToolbarがあるときは、imageViewを非表示にすることができますが、それはを展開するととが再びを示して崩壊しました。あなたの活動のクラスでは、onOffsetChangedListenerを使用します。

AppBarLayout appBarLayout = (AppBarLayout) view.findViewById(R.id.app_bar_layout); 
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
     @Override 
     public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
      if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) { 
       // If collapsed, then do this 
       imageViewHeaderImage.setVisibility(View.GONE); 
      } else if (verticalOffset == 0) { 
       // If expanded, then do this 
       imageViewHeaderImage.setVisibility(View.VISIBLE); 
      } 

     } 
    });); 

Answer 2

あなたはそれがあなたの活動は、あなたがたのと同じ効果を得ることができない理由にOnCreate()方法で

ImageView headerImage = view.findViewById(R.id.header_image); 
AppBarLayout mAppBarLayout = view.findViewById(R.id.app_bar_layout); 
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
      boolean isShow = false; 
      int scrollRange = -1; 

      @Override 
      public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
       if (scrollRange == -1) { 
        scrollRange = appBarLayout.getTotalScrollRange(); 
       } 
       if (scrollRange + verticalOffset == 0) { 
        isShow = true; 
        headerImage.setVisibility(View.VISIBLE); 
       } else if (isShow) { 
        isShow = false; 
        headerImage.setVisibility(View.GONE); 
       } 
      } 
     }); 

EDITをこのリスナーを追加programatically.In行うことができます実際のツールバー

ドキュメントの状態CollapsingToolbarLayoutは、ツールバーのラッパーで、折りたたみアプリケーションバーを実装しています。それはAppBarLayoutの直接の子として使用するように設計されています。そのため、Googleのツールバーで使用するように設計されています。あなたのカスタムレイアウトを使用する回避策を簡単に作成することができます