私は自分の携帯電話でTwitterアプリを見ていました。
ユーザーが上にスクロールすると、tabLayoutは実際にはツールバーの下部にうまくピン留めされ、まったく移動しないことがわかります。
アプリの上部(プロフィール写真、芝生の上の自転車のプロフィールの壁紙、テキスト)をすべて、CollapsingToolBarLayoutとAppBarLayoutに配置するだけで実現したのではないかと思いましたが、実際には、芝生の上の自転車は、実際に折りたたまれる唯一の部分であるため、CollapsingToolBarLayoutとAppBarLayoutの一部です。テキスト部分は上にスクロールするだけで、tabLayoutはツールバーの下の上部に固定されます。
Twitterアプリでクレジットを読んだところ、SlidingTabLayoutを使用して効果を達成したようです。 SlidingTabLayoutはtabLayoutに似ていますが、後者はサポートライブラリでサポートされています。
これは、最近主流のアプリでも使用されているかなり一般的なパターンのように見えます-
Google+アプリはアプリのプロフィールビューでそれを使用します:
Facebook Momentsはアプリでそれを使用しています:
彼ら全員がどうやってこれを行うことができたのか、何か考えはありますか?
私はこれらすべてのアプリに似た何かをしたいと思っています。
私の要件は次のとおりです。
SOに投稿された他の2つの質問を見ました。
スクロール中にTabLayoutのタブ選択インジケーターを画面の上部に固定できますか? 。ここでの答えはtabLayoutの動作を変更しているように見えますが、動作を変更しても実際にTwitterアプリの動作が生成されるとは思えません。前述したように、tabLayoutはCollapsingToolBarLayoutとAppBarLayoutの外側にあるように見え、動作はCollapsingToolBarLayoutとAppBarLayout内にある場合にのみ有効です。
ScrollViewの上部にTabLaoutを固定する方法は? 。この質問は私が尋ねたものと同様の質問をしますが、十分な詳細を提供しておらず、答えもありません。
これらの最初の3つの質問については、 ここ (リンクが切れているようです)なので このウェイバックマシンのリンク を見てください。 https://github.com/slidenerd/Android-Design-Support-Library-Demoにあるgithubデモリポジトリを指します
4つ目は、タブごとにフラグメントを作成し、単純なアプローチで選択されたときにロードする必要があります。または、フラグメントを1つ作成して通信し、タブが選択されたときに特定のコンテンツを表示することもできます。
[〜#〜] edit [〜#〜]は更新されたリンクを見つけることができなかったので、ここに答えがあります
例-
<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>
デフォルトでは、それをサポートするライブラリがない場合があります。しかし、実際には少しのプログラミングでそれを達成することができます。 ViewTreeObserverを介してscrollviewイベントをリッスンし、他のイベントを操作します。それでもわからない場合は、ライブラリを作成しましょう。あなたはアプリを作ってgithubに投稿します、私はそれを機能させるために協力します。
上記を達成するための最も近い解決策は MaterialViewPager です。これは良い出発点です。フォークして自分の好みに合わせて変更でき、さまざまな方法でカスタマイズできます。