CoordinatorLayout + AppbarLayout + Viewpager не изменяет размер дочернего макета

У меня проблема с использованием CoordinatorLayout в сочетании с ViewPager и ViewPager: введите здесь описание изображения

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

введите описание изображения здесь

основной код макета:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".activities.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <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/AppTheme.PopupOverlay" />

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

    <FrameLayout
        android:id="@+id/root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <include layout="@layout/content_main" />
    </FrameLayout>

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

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

код макета вкладки

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".activities.MainActivity"
    tools:showIn="@layout/activity_main"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <FrameLayout
        android:id="@+id/regularLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

дочерний код макета

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:clickable="false"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="bottom"
        android:layout_marginRight="85dp"
        android:src="@drawable/ic_android" />

</RelativeLayout>

Есть идеи? Я видел несколько сообщений, но не смог найти проблему, мне нужно, чтобы высота дочернего элемента была screenHeight - actionBarHeight - TabBatHeight


comment
Кажется, это двойная проблема с заполнением fitsystemwindow. Можешь выложить свой макет?   -  person GPack    schedule 14.04.2016
comment
@GPack проверьте код дочернего макета ссылки в конце ответа.   -  person Gaston Flores    schedule 14.04.2016


Ответы (5)


Есть несколько вещей, которые следует учитывать при использовании CoordinatorLayout + AppBarLayout + ViewPager:

  • Разместите ViewPager внутри CoordinatorLayout, но снаружи AppbarLayout
  • Только ViewPager следует установить поведение app:layout_behavior="@string/appbar_scrolling_view_behavior" put
  • Поместите TabLayout внутрь AppBarLayout
  • Вы также можете установить флаг прокрутки для AppBarLayout прямых дочерних элементов.
  • установите android:fitsSystemWindows="true" на CoordinatorLayout и AppBarLayout, чтобы ваш цвет сетки можно было применить к строке состояния

поэтому ваш окончательный макет, вероятно, должен выглядеть так (он не включает ваш дочерний макет, потому что я предполагаю, что это была ваша страница ViewPager):

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:fitsSystemWindows="true">

        <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/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways" />

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


    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

И вот несколько ресурсов, которые вы обязательно должны проверить:

person Behzad Bahmanyar    schedule 11.04.2016
comment
Ух ты, отличный ответ, но у меня не сработало: (1) мой просмотрщик находится в FrameLayout, который находится в CoordinatorLayout, (2) у FrameLayout есть поведение, потому что все макеты будут загружены внутри него, (3) я поместил TabLayout внутри AppBarLayout, но не работает, цвет фона панели вкладок и панели действий одинаков см. (4) установка флага прокрутки и android:fitsSystemWindows не работает. - person Gaston Flores; 12.04.2016
comment
Я до сих пор не понимаю, почему вы не можете использовать TabLayout внутри AppBarLayout? - person Behzad Bahmanyar; 12.04.2016
comment
@Гастон Ф. (1) Вы можете установить другой цвет фона для TabLayout. и если вы это сделаете, у вас будет ViewPager прямо внутри CoordinatorLayout. (2) AppBarLayout на самом деле является настраиваемым вертикальным LinearLayout, поэтому панель инструментов и TabLayout не будут перекрываться. - person Behzad Bahmanyar; 12.04.2016
comment
Я попробовал образец Криса Бейнса, но он не работает, я все еще не могу правильно рассчитать высоту. - person Gaston Flores; 13.04.2016
comment
Я не использую табличку внутри AppBarLayout, потому что есть действия, которым она не нужна. - person Gaston Flores; 13.04.2016
comment
Эй, ОП, можешь пометить это как принятый ответ? Это определенно сработало. палец вверх за построчные инструкции. - person ralphgabb; 28.02.2017
comment
Place ViewPager Inside CoordinatorLayout but Outside AppbarLayout этот совет решит мою проблему.. - person mDonmez; 25.09.2019

У меня была аналогичная проблема, и было добавлено идеальное решение

android:layout_marginBottom="?attr/actionBarSize

в макете с

app:layout_behavior="@string/appbar_scrolling_view_behavior"


Пример:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    android:theme="@style/AppTheme.AppBarOverlay">

    <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/AppTheme.PopupOverlay">

    </android.support.v7.widget.Toolbar>

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

<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="?attr/actionBarSize"
    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"
    app:backgroundTint="@android:color/holo_green_dark"
    app:srcCompat="@android:drawable/ic_input_add" />

</android.support.design.widget.CoordinatorLayout>
person Sylwester Jędraszek    schedule 29.06.2017

Вы можете использовать NestedScrollview в своем дочернем макете:

<android.support.v4.widget.NestedScrollView
    android:id="@+id/nest_scrollview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <your layout>

</android.support.v4.widget.NestedScrollView>
person Nirmal Shethwala    schedule 20.04.2016
comment
Я пробовал это, но все еще не работает, использование nestedScrollView позволяет мне прокручивать вниз до конца, но моя проблема в другом, мне нужно, чтобы дочерний элемент изменил размер до правильной высоты. - person Gaston Flores; 20.04.2016

Принудительное использование requestLayout на пейджере помогло мне решить эту проблему.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ...
    mViewPager.post(new Runnable() {
        @Override
        public void run() {
            mViewPager.requestLayout();
        }
    });
}
person Salah Hammouda    schedule 28.03.2019

Предложу Ссылку для решения дизайнерских задач:

Просмотреть учебник

Используйте основной макет, например

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabGravity="fill"
            android:theme="@style/ThemeOverlay.AppCompat.Dark" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:src="@drawable/ic_done"/>

</android.support.design.widget.CoordinatorLayout>
person Dinesh    schedule 15.04.2016
comment
Я скачал и отредактировал код, но он у меня не работает, мне нужно, чтобы размер ребенка изменился до нужной высоты. Например, у меня есть две вкладки, первая вкладка имеет простой макет, а вторая — recyclerview. - person Gaston Flores; 20.04.2016
comment
@GastonF, пожалуйста, выполните полное руководство, следуя шагам, которые помогут решить вашу проблему. вы должны дочерний макет match_parent - person Dinesh; 21.04.2016