web-dev-qa-db-ja.com

ツールバーとTabLayoutを備えたViewPagerの高さが間違っています

AppBarLayoutの下にViewPagerがあります（ツールバーとTabLayoutを使用）。それほど大きな要素がなくても、ロードされたフラグメントの高さが使用可能なスペースを超えている理由が理解できず、タブがスクロール可能になっています。

これはメインのレイアウトxmlです：

<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:fitsSystemWindows="true">

    <Android.support.design.widget.AppBarLayout
        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:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</Android.support.design.widget.CoordinatorLayout>

フラグメントでわかるように、layout_alignParentBottomのボタンがありますが、ビューページャーの高さが伸びすぎていると思います。

screenshot

デザインビューからのレイアウトは次のとおりです。

enter image description here

androidandroid-viewpagerandroid-toolbarandroid-tablayout
14
Enrichman

appBarLayoutとViewPagerの間にLinearLayoutを追加してみてください。わたしにはできる。 :)

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <Android.support.design.widget.AppBarLayout
        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:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

    </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"  />

</LinearLayout>
8
claire

paddingをViewPagerに追加すると、うまくいきました。

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpager"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:paddingBottom="?attr/actionBarSize"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

パディングのサイズはツールバーのheightとまったく同じであることに注意してください。
の代わりに ?attr/actionBarSize、?actionBarSizeも有効です。

2
Jonas Drotleff

スクロールせずに固定ツールバーが必要な場合は、レイアウトデザインからCoordinatorLayoutとAppBarLayoutを削除し、代わりにRelativeLayoutを使用できます。これはサポートライブラリのバグであり、現在のところ解決策はありません。 ViewPagerの次のレイアウトコードをToolbarおよびTabLayoutと一緒に使用するだけです。 ViewPagerは、問題で指摘されているため、この場合はオーバーフローしません。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context=".HomeActivity">

    <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"/>

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabIndicatorColor="@Android:color/white"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        Android:background="?attr/colorPrimary"
        Android:layout_below="@id/toolbar"/>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@id/tabs"/>

</RelativeLayout>

それが誰かを助けることを願っています！

1
NightFury

これで試してください。

ここでは、Android:fillViewport="false"でTab Barプロパティを宣言する必要があります。

<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:fitsSystemWindows="true">

    <Android.support.design.widget.AppBarLayout
        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:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</Android.support.design.widget.CoordinatorLayout>

ここでTab Barを変更してください。

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

編集1：

これは私のために働いているものですこれを参照してください。

<?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: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|snap" />

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

    </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.CoordinatorLayout>
1
Jay Rathod RJ

CoordinatorLayout内で相対レイアウトを使用しました

<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">

<RelativeLayout
    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:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

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

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

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@id/appbar"
         />

</RelativeLayout>
</Android.support.design.widget.CoordinatorLayout>
0
Milon

ビューページャーウィットの動作をオーバーライドし、ビューページャーをthis.layoutsに追加します

override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean =
            super.onDependentViewChanged(parent, child, dependency).also {
                layouts.forEach { it.setPadding(it.paddingLeft, it.paddingTop, it.paddingRight, it.top) }
            }
0
D. Sergeev

TabLayoutをAppBarLayoutの外側に保持する必要があります。

このようなもの。

<Android.support.design.widget.AppBarLayout
    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:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

<Android.support.design.widget.TabLayout
        Android:id="@+id/home_tab_layout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="#ffffff"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/primary_blue_dark"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/primary_blue"
        app:tabTextColor="@color/primary_blue_light"
        app:tabTextAppearance="@style/tab_layout_font_style"/>

<Android.support.v4.view.ViewPager
        Android:id="@+id/home_viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_gravity="fill_horizontal"/>

これは私のために働いた。

0
Arnold Laishram

私にとって、Viewpager layout_heightが制限内にとどまるように、Coordinator Layoutで機能した唯一のソリューションは、次のようにツールバーにlayout_behaviourを追加することでした。

 <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="?attr/colorPrimary"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:popupTheme="@style/AppTheme.AppBarOverlay">

おそらくあなたには遅すぎますが、おそらくそれは他の誰かを助けます。

アプリを起動したときは気になりませんでしたが、後で別のタブにスナックバーを追加したいときに、ページをスクロールした場合にのみスナックバーが表示されました。

0
r3dm4n

変更してこの問題を解決しました

Android:layout_height="wrap_content"
Android:layout_height="0dp"

と設定

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/tl_WelcomeTabs"

viewPagerのXML属性で。 dpこの場合、match_constraintのような意味になります。

たとえば、このレイアウト：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout
    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.support.design.widget.TabLayout
        Android:id="@+id/tl_WelcomeTabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="?attr/colorPrimary"
        Android:elevation="6dp"
        Android:minHeight="?attr/actionBarSize"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        >

        <Android.support.design.widget.TabItem
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Start"
            />

        <Android.support.design.widget.TabItem
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Mission"
            />

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

    <Android.support.v4.view.ViewPager
        Android:id="@+id/vp_welcomePager"
        Android:layout_width="wrap_content"
        Android:layout_height="0dp"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tl_WelcomeTabs"
        />


</Android.support.constraint.ConstraintLayout>

左の画像：Android:layout_height="wrap_content"右の画像：Android:layout_height="0dp"

tldr;

変化する

Android:layout_height="wrap_content"

に

Android:layout_height="0dp"

そして、ViewPagerのXML属性にlayout_constraintBottom_toBottomOfとlayout_constraintBottom_toBottomOfを設定します。

0
Onderbetaald