帶有工具欄和TabLayout的ViewPager高度錯誤

我在AppBarLayout下面有一個ViewPager（帶有工具欄和TabLayout）。我無法理解，爲什麼加載的碎片的高度超過了可用空間，即使沒有這麼大的元素，使得該滾動條可以滾動。帶有工具欄和TabLayout的ViewPager高度錯誤

這是主要的佈局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一個按鈕，但我想這是拉伸viewpager的高度太多。

這裏從設計視圖佈局：

來源

2016-04-10 Enrichman

你可以拍攝屏幕你的應用程序？ –

@NguyễnTrungHiếu是的，當然。增加了一個屏幕。 – Enrichman

@Enrichman你找到了解決問題的辦法嗎？詢問是因爲我面臨完全相同的問題。 :( – Droidwala

你必須保持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"/>

這對我有效。

來源

2016-04-11 05:36:59

試試這個。

這裏您需要聲明android:fillViewport="false" property in 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>

來源

2016-04-11 05:44:45

不工作。:( – Enrichman

@ Enrichman仍然有什麼問題可以請你指定？ –

從截圖中可以看到，註銷按鈕應該位於底部，但片段的高度更多的是可用空間，所以所有的視圖都是可滾動的（我已經添加了截屏設計視圖） – 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>

來源

2016-06-07 08:04:58 claire

這會產生粘滯動作的副作用，不會隱藏在滾動條上。 – Winster

如果您需要在不滾動的固定工具欄，然後你可以從佈局設計刪除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>

希望它可以幫助別人！

來源

2016-10-16 20:48:47 NightFury

對我來說只是一個協調員佈局工作，使Viewpager layout_height保持限度內被加入layout_behaviour到工具欄，這樣的sollution：

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

可能爲時已晚了你，但也許它可以幫助別人。

這並沒有打擾我，當我開始我的應用程序，但後來當我想添加一個快餐欄在另一個選項卡上，快餐欄只有當我滾動頁面時纔可見。

來源

2016-12-21 13:22:57 r3dm4n

我已經使用內部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>

來源

2017-05-01 07:39:50

添加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也是有效的。

來源

2017-09-25 19:39:13

帶有工具欄和TabLayout的ViewPager高度錯誤

回答

相關問題