CoordinatorLayout + AppbarLayout + ViewPager không thay đổi kích thước bố trí con

Question

Tôi có một vấn đề sử dụng CoordinatorLayout kết hợp với ViewPager và ViewPager:

cách bố trí không thay đổi kích thước một cách chính xác. Giả sử rằng chiều cao được giải quyết bao gồm chiều cao của tab. Vì vậy, khi tôi di chuyển xuống dưới tôi thấy điều này:

chính mã bố trí:

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

mã bố trí tab

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

mã bố trí con

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

Bất kỳ ý tưởng nào?Tôi thấy nhiều bài viết nhưng không thể tìm thấy được vấn đề, tôi cần rằng chiều cao của đứa trẻ phải screenHeight - actionBarHeight - TabBatHeight

Answer 1

Có một số điều cần lưu ý khi sử dụng CoordinatorLayout + AppBarLayout + ViewPager:

• Nơi ViewPager BênCoordinatorLayout nhưng OutsideAppbarLayout
• ChỉViewPager nên thiết lập hành vi của nó để app:layout_behavior="@string/appbar_scrolling_view_behavior" đưa
• Nơi TabLayout bên AppBarLayout
• Bạn cũng có thể thiết lập cuộn cờ trên AppBarLayouttrẻ em trực tiếp
• thiết android:fitsSystemWindows="true" trên cả CoordinatorLayout & AppBarLayout nên màu scrim của bạn có thể được áp dụng cho thanh trạng thái

để bố cục cuối cùng của bạn có thể trông giống như thế này (nó không bao gồm lớp con của bạn ) ut vì tôi đoán nó là ViewPager trang của bạn):

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

Và đây là một số tài nguyên mà bạn chắc chắn nên kiểm tra:

• Handling Scrolls with CoordinatorLayout
• Introduction to CoordinatorLayout on android
• Great sample project by Chris Banes

Answer 2

Tôi sẽ đề xuất một liên kết đến sol đã vấn đề thiết kế:

Check tutorial

Sử dụng chính Layout như

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

Answer 3

Bạn có thể sử dụng NestedScrollview trong cách bố trí con bạn:

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

Answer 4

Tôi đã có một vấn đề tương tự và giải pháp hoàn hảo đã thêm

android:layout_marginBottom="?attr/actionBarSize

trong cách bố trí với

app:layout_behavior="@string/appbar_scrolling_view_behavior"

---

Ví dụ:

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