プログラムでCollapsingToolbarLayoutを折りたたむまたは展開する


158

簡単な質問ですが、答えが見つかりません。CollapsingToolbarLayoutプログラムで折りたたんだり展開したりするにはどうすればよいですか?

折りたたまれたツールバー

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

拡張ツールバー


1
私も同じことを考えていました。また、ユーザーが埋め込みレイアウト(例:画像)をクリックした後、ツールバーを全画面表示に拡張することも興味深いかもしれません。
Moritz

回答:


321

Support Library v23を使用すると、を呼び出すことができますappBarLayout.setExpanded(true/false)

参考資料AppBarLayout.setExpanded(boolean)


2
[OK]を、先端をありがとう、しかしサポートLIBS V23、私は今それをテストすることはできませんので、私は22.2.1に滞在する必要があるので....、非常にバギーです
トマス

23.0.1にいくつかの修正が加えられました
Mario Velasco

6
サポートライブラリ23.1.1でカスタムアニメーションを定義することは可能ですか?setExpanded(boolean、true)は非常に遅いアニメーションです...
Nifhel 2015年

折りたたみ可能なツールバーとその下にあるリサイクル表示のあるレイアウトがあるという問題がありました。recyclerviewからアイテムを削除すると、ツールバーが適切に動作しなかったため、アプリバーのレイアウトを展開すると、正しく機能しました。最終的にはアニメーションにappBarLayout.setExpanded(true、true)を使用しました。
レイハンター

49

このコードを使用してツールバーを折りたたみます。それを拡張する方法がまだ見つかりません。

public void collapseToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.onNestedFling(rootLayout, appbarLayout, null, 0, 10000, true);
    }
}

編集1:速度V 負の同じ関数ですが、ツールバーは100%展開されておらず、最後のパラメーターでfalse 機能するはずです。

public void expandToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.onNestedFling(rootLayout, appbarLayout, null, 0, -10000, false);
    }
}

編集2:このコードは私のためのトリックを行います

public void expandToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.setTopAndBottomOffset(0);
        behavior.onNestedPreScroll(rootLayout, appbarLayout, null, 0, 1, new int[2]);
    }
}
  • setTopAndBottomOffsetはツールバーを展開します
  • onNestedPreScrollは拡張ツールバー内のコンテンツを表示します

Behaviorを自分で実装しようとします。


2
の最後のパラメータをonNestedFlingに設定すると、編集1も機能しfalseます。
リッキー・リー

2
params.getBehavior()はnullを返します。xmlでは、layout_behaviourタグは、AppBarLayoutではなく兄弟NestedScrollViewに設定されます。手伝って頂けますか?
User31689 2015年

ありがとうございました。最後のパラメーターがfalseの場合、編集1は正しく機能します。:)
Sirelon

@GobletSky同じ問題に直面した。フラグメントにNestedScrollViewがあり、フラグメントを設定するonNestedFling に呼び出そうとしました。フラグメントを設定した後、メソッドを正常に呼び出すことができました。
usp 2015

@usp実際には、私の問題は完全に異なっていました(ややおかしい間違い)。:この参照stackoverflow.com/questions/31067082/...
User31689

27

カスタムアニメーターを使用して、どれだけ拡張または縮小するかを定義できます。だけを使用してsetTopAndBottomOffset(int)

次に例を示します。

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBar.getLayoutParams();
final AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
if (behavior != null) {
    ValueAnimator valueAnimator = ValueAnimator.ofInt();
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            behavior.setTopAndBottomOffset((Integer) animation.getAnimatedValue());
            appBar.requestLayout();
        }
    });
    valueAnimator.setIntValues(0, -900);
    valueAnimator.setDuration(400);
    valueAnimator.start();
}

2
これは、実際にカスタムオフセットにアニメーション化できる唯一の答えです。どうもありがとう!
ギルヘルメトレスカストロ

2
appBar.setExpanded(false、true); (オープン/クローズ、アニメーション)これらのすべての行を記述する必要はありません
Puni

2
@Puniに、「カスタム」オフセットに展開/折りたたむ場合(複数のステージを折りたたむなど)、これが必要になります。
曾其威

これは、カスタム動作を記述したくない場合にAppBarオフセットをアニメーション化するための最良のソリューションです。コードスニペットの1つの更新は、現在のアプリバーオフセットからアニメーションを開始するために、0ではなく、behaviour.topAndBottomOffset開始値を指定してvalueAnimator.setIntValues()を呼び出すことです。
リール

カスタム変数を使用し( -900 )て設定するにvalueAnimator.setIntValuesはベターソリューションは使用することです- ( appBar.getTotalScrollRange() )
Ali Rezaiyan

12

に小さな拡張機能を書きましたAppBarLayoutCollapsibleToolbarLayoutアニメーションの有無にかかわらず、両方の展開と折りたたみが可能です。それはかなり正しくやっているようです。

ぜひお試しください。

あなたの代わりにそれを使うだけAppBarLayoutで、あなたはの展開または縮小を担当するメソッドを呼び出すことができますCollapsingToolbarLayout

それは私のプロジェクトで期待どおりに機能していますが、に完全に適合するようにperform...メソッド(特にでperformExpandingWithAnimation())のフリング/スクロール値を微調整する必要がある場合がありますCollapsibleToolbarLayout


@ssdenoはGithub gistのReadme.mdを読んでください。サポートライブラリのv23から非推奨になりました。サポートのv23以降(AndroidXに進む)、にsetExpandedメソッドがありAppBarLayoutます。
Bartek

6

使用mAppBarLayout.setExpanded(true)ツールバーと利用を拡大しますmAppBarLayout.setExpanded(false)してツールバーを折りたたみます。

CollapsingToolbarLayoutの高さをプログラムで変更したい場合は、mAppBarLayout.setLayoutParams(params) ;

展開:

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
params.height = 3*200; // HEIGHT

mAppBarLayout.setLayoutParams(params);
mAppBarLayout.setExpanded(true);

崩壊:

CoordinatorLayout.LayoutParams params =(CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
params.height = 3*80; // HEIGHT

mAppBarLayout.setLayoutParams(params);
mAppBarLayout.setExpanded(false);

1
これは私に大いに役立ちました。
NoName

1
これはとても役に立ちます。ありがとうございました!
sunlover3

5

onNestedPreScrollで作業し、私のようなエラーを取得したい人のために。この行がないと、onCreateでNullPointerExceptionが発生します。

    CoordinatorLayout coordinator =(CoordinatorLayout)findViewById(R.id.tab_maincontent);
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
    //below line
    params.setBehavior(new AppBarLayout.Behavior() {});

これでは適切に動作しません。しかし、私はこの問題を回避します

onCreateで:

        scrollToolbarOnDelay();

そして...

    public void scrollToolbarOnDelay() {
            final Handler handler = new Handler();
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.tab_appbar);
                    CoordinatorLayout coordinator = (CoordinatorLayout) findViewById(R.id.tab_maincontent);
                    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
                    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
         if(behavior!=null)
                    behavior.onNestedPreScroll(coordinator, appBarLayout, null, 0, 100, new int[]{0, 0});
         else
            scrollToolbarOnDelay()
                }
            }, 100);


        }

1

これを試して...

拡大する

appBarLayout.setExpanded(true, true);

思い出すこと

appBarLayout.setExpanded(false, true);

0

これは、展開または折りたたみに役立つ場合があります。

appBarLayout.setActivated(true);
appBarLayout.setExpanded(true, true);

0

私はこれを使っています

 private fun collapseAppbar() {
        scrollView.postDelayed(Runnable {
            scrollView?.smoothScrollTo(50, 50)
        }, 400)
    }

0

AppBarLayoutをプログラムで展開/折りたたむには:

fun expandAppBarLayout(expand: Boolean, isAnimationEnabled: Boolean){
    appBarLayout.setExpanded(expand, isAnimationEnabled);
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.