web-dev-qa-db-ja.com

Android：TabLayoutをScrollviewの上部に固定します

私は自分の携帯電話でTwitterアプリを見ていました。

Twitter app

ユーザーが上にスクロールすると、tabLayoutは実際にはツールバーの下部にうまくピン留めされ、まったく移動しないことがわかります。

アプリの上部（プロフィール写真、芝生の上の自転車のプロフィールの壁紙、テキスト）をすべて、CollapsingToolBarLayoutとAppBarLayoutに配置するだけで実現したのではないかと思いましたが、実際には、芝生の上の自転車は、実際に折りたたまれる唯一の部分であるため、CollapsingToolBarLayoutとAppBarLayoutの一部です。テキスト部分は上にスクロールするだけで、tabLayoutはツールバーの下の上部に固定されます。

Twitterアプリでクレジットを読んだところ、SlidingTabLayoutを使用して効果を達成したようです。 SlidingTabLayoutはtabLayoutに似ていますが、後者はサポートライブラリでサポートされています。

これは、最近主流のアプリでも使用されているかなり一般的なパターンのように見えます-

Google+アプリはアプリのプロフィールビューでそれを使用します：

google+

Facebook Momentsはアプリでそれを使用しています：

facebook moments

彼ら全員がどうやってこれを行うことができたのか、何か考えはありますか？

私はこれらすべてのアプリに似た何かをしたいと思っています。

私の要件は次のとおりです。

  1. 上にスクロールすると折りたたまれるcollapsingToolBarLayoutがあります
  2. 完全に折りたたまれたときにtoolBarの下にスクロールして「非表示」になるcollapsingToolBarLayoutの下にテキストビューを配置します。
  3. CollapsingToolBarLayoutの下でテキストビューをスクロールしたときに、tabLayoutに「固定」されるtabLayoutをテキストビューの下に配置します。
  4. TabLayoutの下にrecyclerviewを配置して、tabLayoutの各タブをクリックすると、recyclerviewが「ツイート」、「写真」、「お気に入り」などのリストを切り替えるようにします。

SOに投稿された他の2つの質問を見ました。

スクロール中にTabLayoutのタブ選択インジケーターを画面の上部に固定できますか？ 。ここでの答えはtabLayoutの動作を変更しているように見えますが、動作を変更しても実際にTwitterアプリの動作が生成されるとは思えません。前述したように、tabLayoutはCollapsingToolBarLayoutとAppBarLayoutの外側にあるように見え、動作はCollapsingToolBarLayoutとAppBarLayout内にある場合にのみ有効です。

ScrollViewの上部にTabLaoutを固定する方法は？ 。この質問は私が尋ねたものと同様の質問をしますが、十分な詳細を提供しておらず、答えもありません。

androidandroid-layouttwittergoogle-plusandroid-tablayout
19
Simon

これらの最初の3つの質問については、 ここ （リンクが切れているようです）なので このウェイバックマシンのリンク を見てください。 https://github.com/slidenerd/Android-Design-Support-Library-Demoにあるgithubデモリポジトリを指します

4つ目は、タブごとにフラグメントを作成し、単純なアプローチで選択されたときにロードする必要があります。または、フラグメントを1つ作成して通信し、タブが選択されたときに特定のコンテンツを表示することもできます。

[〜＃〜] edit [〜＃〜]は更新されたリンクを見つけることができなかったので、ここに答えがあります

  1. CoordinaterLayoutを使用します。
  2. ツールバーで折りたたむ（または非表示にする）ものはすべて、collapsingToolBarLayout内に入ります。
  3. 折りたたまれたtoolBarの後に残るものはすべて、CollapsingToolbarLayoutの後にAppBarLayoutの内部に入ります。

例-

<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:background="@Android:color/background_light"
    Android:fitsSystemWindows="true"
    >

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/main.appbar"
        Android:layout_width="match_parent"
        Android:layout_height="300dp"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true"
        >

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/main.collapsing"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            >

            <ImageView
                Android:id="@+id/main.backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                Android:src="@drawable/material_flat"
                app:layout_collapseMode="parallax"
                />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/main.toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                />
         <!-- ADD ANY THING THAT GETS SCROLLED ALL THE WAY UP WITH TOOLBAR -->
        </Android.support.design.widget.CollapsingToolbarLayout>

     <!--- ADD TAB_LAYOUT HERE---> 

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

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:textSize="20sp"
            Android:lineSpacingExtra="8dp"
            Android:text="@string/lorem"
            Android:padding="@dimen/activity_horizontal_margin"
            />
    </Android.support.v4.widget.NestedScrollView>

    <Android.support.design.widget.FloatingActionButton
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"
        Android:layout_margin="@dimen/activity_horizontal_margin"
        Android:src="@drawable/ic_comment_24dp"
        app:layout_anchor="@id/main.appbar"
        app:layout_anchorGravity="bottom|right|end"
        />
</Android.support.design.widget.CoordinatorLayout>
8
Sulabh Deep Puri

デフォルトでは、それをサポートするライブラリがない場合があります。しかし、実際には少しのプログラミングでそれを達成することができます。 ViewTreeObserverを介してscrollviewイベントをリッスンし、他のイベントを操作します。それでもわからない場合は、ライブラリを作成しましょう。あなたはアプリを作ってgithubに投稿します、私はそれを機能させるために協力します。

1
Muktadir

上記を達成するための最も近い解決策は MaterialViewPager です。これは良い出発点です。フォークして自分の好みに合わせて変更でき、さまざまな方法でカスタマイズできます。

0
KERiii