ViewPager mit Toolbar und TabLayout hat eine falsche Höhe

Ich habe einen ViewPager unter einem AppBarLayout (mit einer Toolbar und einem TabLayout). Ich kann nicht verstehen, warum die Höhe der geladenen Fragmente mehr ist als der verfügbare Platz, auch wenn keine so großen Elemente vorhanden sind, die die Registerkarte scrollbar machen.ViewPager mit Toolbar und TabLayout hat eine falsche Höhe

Dies ist das Haupt Layout 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>

Wie Sie in meinem Fragmente sehen können ich einen Knopf mit einem layout_alignParentBottom haben, aber ich denke, es ist Recken die Höhe des viewpager zu viel.

Hier wird das Layout aus der Entwurfsansicht:

Quelle

2016-04-10 Enrichman

Können Sie Ihre App screenen? –

@ NguyễnTrungHiếu Ja, sicher. Ein Bildschirm wurde hinzugefügt. – Enrichman

@Enrichman haben Sie die Lösung für Ihr Problem gefunden, fragen, weil ich genau das gleiche Problem konfrontiert bin. :( – Droidwala

Sie haben die TabLayout außerhalb des AppBarLayout zu halten.

So etwas wie das.

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

Das funktionierte für mich.

Quelle

2016-04-11 05:36:59

Versuchen Sie es mit diesem.

Hier müssen Sie android:fillViewport="false" Eigenschaft in Tab Bar erklären.

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

Sie in Tab Bar ändern.

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

EDIT 1:

Dies ist, was für mich arbeiten diese finden.

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

Quelle

2016-04-11 05:44:45

Funktioniert nicht. :( – Enrichman

@Enrichman Noch was ist das Problem könnten Sie bitte angeben? –

Immer noch das gleiche. Wie Sie auf dem Screenshot sehen können, sollte der Logout Button unten sein, aber die Höhe des Fragments ist mehr vom verfügbaren Platz, und so ist die ganze Ansicht scrollbar. (Ich habe einen Screenshot von der Design-Ansicht) – Enrichman

können Sie versuchen, ein Linearlayout zwischen AppBarLayout und ViewPager hinzuzufügen. Für mich geht das. :)

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

Quelle

2016-06-07 08:04:58 claire

Dies wird Nebeneffekt der Sticky-Action-Leiste haben, wird nicht auf Scroll ausblenden. – Winster

Wenn Sie eine feste Symbolleiste benötigen, ohne Scrollen, dann können Sie CoordinatorLayout und AppBarLayout aus dem Layout-Design entfernen und RelativeLayout stattdessen verwenden. Es ist Support Library Bug und hat bis zu diesem Datum keine Lösung. Sie können einfach folgenden Layoutcode für ViewPager zusammen mit Toolbar und TabLayout verwenden. ViewPager wird in diesem Fall nicht überlaufen, wie es in Frage gestellt wurde.

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

Hoffe es hilft jemandem!

Quelle

2016-10-16 20:48:47 NightFury

Für mich ist das nur sollution, die mit einem Koordinator-Layout gearbeitet, so dass Viewpager layout_height in Grenzen bleibt layout_behaviour auf die Toolbar, wie diese Zugabe wurde:

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

Wahrscheinlich zu spät für Sie, aber vielleicht es hilft jemand anderem.

Das störte mich nicht, als ich meine App startete, aber später, als ich eine Snackbar auf einer anderen Registerkarte hinzufügen wollte, war die Snackbar nur sichtbar, wenn ich die Seite scrollte.

Quelle

2016-12-21 13:22:57 r3dm4n

Ich habe Relative Layout innerhalb von 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>

Quelle

2017-05-01 07:39:50

Hinzufügen eines padding zu der ViewPager der Trick für mich verwendet:

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

Beachten Sie, dass die Polsterung genau die gleiche Größe wie die Symbolleisten hat height.
Anstelle von ?attr/actionBarSize gilt auch ?actionBarSize.

Quelle

2017-09-25 19:39:13

ViewPager mit Toolbar und TabLayout hat eine falsche Höhe

Antwort

Verwandte Themen