28

上部に ToolBar、その下に TabLayout、TabLayout からタブを切り替える ViewPager を備えた従来のレイアウトがあります。ViewPager のコンテンツがスクロール可能である場合、ToolBar は見えないようにスクロールし、TabLayout はそれに従い、最上部に達したときに固定する必要があります。

ViewPager のコンテンツのサイズに関係なく、ToolBar が常にスクロール可能であることを除いて、これは現在のコードではすべて問題ありません。以下の私のコードを参照してください。これを修正する方法についての素晴らしいアイデアはありますか?

<?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:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.ToolBar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:scrollbars="horizontal"
            app:tabIndicatorColor="@color/black_text" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/tabs_activity_view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

編集：

viewPager の高さがルート ビュー全体の高さと同じであることがわかります。appbar_scrolling_view_behavior が上下のオフセットを追加しているように見えるため、これは意図的である可能性があります。ただし、ツールバーとタブバーを常にスクロールすることになるため、奇妙に思えます。

4

8 に答える 8

7

このサンプルを試してみることをお勧めします。

これは、サンプルのレイアウトのようなレイアウトです。

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout>
于 2015-10-31T05:59:18.207 に答える
0

TabLayout に次の属性を追加してみてください。

 app:layout_collapseMode="pin"
 app:tabMode="fixed"

そしてこれはAppBarLayoutで：

 android:fitsSystemWindows="true"

* アップデート *

ツールバーはまだスクロール可能であるため、試してみましたが、これでは不十分です。解決策は、ViewPager (およびそのコンテンツ) に関するいくつかのロジックを作成することです。

xml レイアウト ファイルからツールバーの scroll_flag 属性を削除します。ViewPager コンテンツの高さが > screenHeight - (toolbar + tabBar) であるかどうかを確認するには、Java コードを実装する必要があります。true の場合、プログラムで scroll_flags を次のように設定します。

 LayoutParams params;
 params = // get layout params from your toolbar

 params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
| AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

 // set params
 toolbar.setLayoutParams(params);
于 2015-09-18T09:13:40.703 に答える
-1

私はちょうど同じ問題を抱えていました。解決策は非常に簡単です。ビューページャーの高さを設定するだけです

android:layout_height="wrap_content"
于 2016-05-31T02:56:11.430 に答える
-2

簡単な解決策は、アプリバーのレイアウトとページ ビューアーを相対的なレイアウトでラップすることです。- アプリバー レイアウトに ID を指定します - ページ ビューで android:layout_below="Your_appbar_layout" を設定します。例: 

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/your_appBar_ID"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.ToolBar"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:scrollbars="horizontal"
        app:tabIndicatorColor="@color/black_text" />

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

<android.support.v4.view.ViewPager
    android:id="@+id/tabs_activity_view_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/your_appBar_ID"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

于 2016-08-18T16:18:54.750 に答える