ViewPager с панелью инструментов и TabLayout имеет неправильную высоту

У меня есть ViewPager под AppBarLayout (с панелью инструментов и 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, но я предполагаю, что она слишком сильно растягивает высоту окна просмотра.

Вот макет с точки зрения дизайна:

Enrichman 10.04.2016 источник

comment

Можете ли вы снимать экран своего приложения? - Nguyễn Trung Hiếu 11.04.2016

comment

@ NguyễnTrungHiếu Да, конечно. Добавил скрин. - Enrichman 11.04.2016

comment

@Enrichman Вы нашли решение своей проблемы? Спрашиваю, потому что я столкнулся с той же проблемой. :( - PunitD 20.07.2016

comment

@Droidwala неа, в итоге немного изменил дизайн .. :( - Enrichman 21.07.2016

comment

Похоже, это единственный вариант… Какие изменения в дизайне вы внесли тогда в вашем случае? - PunitD 21.07.2016

comment

@Droidwala, да, именно так. Я не закончил приложение, потому что я работаю также над другим проектом, но я планирую переделать его без вкладок! - Enrichman 22.07.2016

comment

вы решаете эту проблему? - zihadrizkyef 15.01.2019

Ответы (9)

arrow_upward
8
arrow_downward

вы можете попробовать добавить LinearLayout между AppBarLayout и ViewPager. Меня устраивает. :)

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

claire 07.06.2016

comment

Это будет иметь побочный эффект липкой панели действий, которая не будет скрыта при прокрутке. - Winster; 02.08.2016

arrow_upward
3
arrow_downward

Добавление 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.

Jonas Drotleff 25.09.2017

arrow_upward
1
arrow_downward

Попробуйте это.

Здесь вам нужно объявить свойство 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>

Jay Rathod RJ 11.04.2016

comment

Все тот же. Как вы можете видеть на скриншоте, кнопка выхода из системы должна быть внизу, но высота фрагмента больше доступного пространства, поэтому весь вид можно прокручивать. (Я добавил снимок экрана из режима просмотра дизайна) - Enrichman; 11.04.2016

arrow_upward
1
arrow_downward

Если вам нужна фиксированная панель инструментов без прокрутки, вы можете удалить 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>

Надеюсь, это кому-то поможет!

NightFury 16.10.2016

arrow_upward
1
arrow_downward

Я использовал относительный макет внутри 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>

Milon 01.05.2017

arrow_upward
0
arrow_downward

Вы должны держать 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"/>

Это сработало для меня.

Arnold Laishram 11.04.2016

comment

Неверный ответ, это работает, потому что пейджер просмотра не ведет себя - D. Sergeev; 05.08.2019

arrow_upward
0
arrow_downward

Для меня единственным решением, которое работало с макетом координатора, так что Viewpager layout_height оставался в определенных пределах, было добавление 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">

Возможно, уже поздно для вас, но, может быть, это поможет кому-то другому.

Это не беспокоило меня, когда я запускал свое приложение, но позже, когда я хотел добавить закусочную на другую вкладку, закусочная была видна только в том случае, если я прокручивал страницу.

r3dm4n 21.12.2016

arrow_upward
0
arrow_downward

Я решил эту проблему, изменив

android:layout_height="wrap_content"

на

android:layout_height="0dp"

и установка

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

в XML-атрибутах ViewPager. 0dp в данном случае означает что-то вроде 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"

и установите layout_constraintBottom_toBottomOf и layout_constraintBottom_toBottomOf в XML-атрибутах ViewPager.

Onderbetaald 22.03.2019

arrow_upward
0
arrow_downward

Переопределите поведение вашего пейджера просмотра и добавьте свой пейджер просмотра в 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) }
            }

D. Sergeev 05.08.2019

ViewPager с панелью инструментов и TabLayout имеет неправильную высоту

Ответы (9)

Вопросы по теме