web-dev-qa-db-ja.com

Androidでカスタム折りたたみツールバーを実装する方法は?

このチュートリアルを使用してフレキシブルスペースパターン(ツールバーを折りたたむパターン)を実装します。

Lollipop Contactsアクティビティと同様の効果を達成しようとしています。これは、アクティビティに入るときの最初は、ビューは画像の一部にすぎません。ヘッダ:

enter image description here

次に、ユーザーは画像の下にあるレイアウトを下にスクロールして、最大に達するまで、さらに多くの画像を表示できます。

enter image description here

私のアプリでは、うまく機能させることができません。

何が起こるかというと、アクティビティを入力すると、画像ヘッダーは最大サイズ、AppBarLayoutのサイズ、上記のレイアウトと同じように表示され、Lollipop Contactsアクティビティとは異なります、画像の一部のみを表示します。

これは、AppBarLayoutの高さを設定するコードです(画面の幅を最大の高さにします)。

int widthPx = getResources().getDisplayMetrics().widthPixels;
AppBarLayout appbar = (AppBarLayout)findViewById(R.id.appbar);
appbar.setLayoutParams(new CoordinatorLayout.LayoutParams(CoordinatorLayout.LayoutParams.MATCH_PARENT, widthPx));

そして、これはRecyclerViewを設定するコードです。 scrollToPositionを使用して試してみたところ、RecyclerViewのビューが上がると考えられましたが、まったく効果がありませんでした。

mRecyclerView = (RecyclerView) findViewById(R.id.activity_profile_bottom_recyclerview);

    mRecyclerView.setHasFixedSize(true);

    // use a linear layout manager
    mLayoutManager = new LinearLayoutManager(this);

    mRecyclerView.setLayoutManager(mLayoutManager);

    // specify an adapter (see also next example)
    if(mAdapter == null){
        mAdapter = new ProfileAdapter(this, user, inEditMode);
        mRecyclerView.setAdapter(mAdapter);
    }

    mRecyclerView.scrollToPosition(mAdapter.getItemCount() - 1); // itemCount is 4

これはレイアウトxmlです。

<Android.support.v4.widget.DrawerLayout 
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/activity_profile"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.design.widget.CoordinatorLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">
    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" // set programatically
        Android:fitsSystemWindows="true"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                Android:id="@+id/header"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:background="@drawable/header"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <Android.support.v7.widget.Toolbar
                Android:id="@+id/anim_toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/activity_profile_bottom_recyclerview"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

    </Android.support.design.widget.CoordinatorLayout>

    <include layout="@layout/navigation_view"/>
</Android.support.v4.widget.DrawerLayout>

注:手動で下にスクロールすると、RecyclerViewが下に移動してさらに多くの画像が表示されますが、コード全体で機能しません。

ScrollToPositionが解決策ではないと思いますが、誰かアイデアはありますか?

EnterAlwaysCollapsedフラグを使用することについて考えたところ、おそらくCoordinatorLayoutとAppbarセクションのminHeightで ここに記載 として:

enterAlwaysCollapsed:ビューがminHeightを宣言しているときにこのフラグを使用すると、ビューは最小の高さ(つまり、「折りたたまれた」)でのみ入り、スクロールするビューが最上部に達したときに完全な高さに再拡張します。

そこで、recyclerViewでscroll | enterAlwaysCollapsedフラグをツールバーとminHeightに設定しましたが、機能しませんでした。次に、minHeightをAppBarLayoutなどの他のレイアウトに移動しようとしましたが、何も機能しませんでした。全体を表示せずに、画像を縮小することもあります。

82
Jjang

AppBarComponentは、AppBarComponentを拡張できる.setExpanded(boolean expanded)というメソッドを提供します。

ただし、このメソッドは、このレイアウトがCoordinatorLayoutの直接の子であることに依存していることに注意してください。

詳細は this を参照してください。

カスタムオフセットにアニメーション化する場合は、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();
}
1
Lukas