Viewpager被推出屏幕[CoordinatorLayout] [设计库]

我有一个包含3个片段的viewpager的简单应用程序。在其中一个片段中，我有Recyclerview列表。向下滚动时，工具栏将折叠并显示向上滚动。我的问题是，当工具栏被折叠，我向左/向右滚动我正在以编程方式扩展它，它推动ViewPager下来，而不是重叠它。这导致屏幕视图的位移不令人满意。我如何让工具栏与我的viewpager重叠，而不是在展开时将其推下？我对这一问题进行简短记录click Viewpager被推出屏幕[CoordinatorLayout] [设计库]

这是我main_layout：

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:fab="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context=".UI.MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/appBarLayouy" 
     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:popupTheme="@style/AppTheme.PopupOverlay" 
      app:layout_scrollFlags="scroll|enterAlways" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/sliding_tabs" 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/tabsHeight" 
      style="@style/NavigationTab"/> 


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


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

    <com.getbase.floatingactionbutton.FloatingActionsMenu 
     android:id="@+id/floatingActionMenu" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentEnd="true" 
     fab:fab_addButtonColorNormal="@color/blood_orange" 
     fab:fab_addButtonColorPressed="@color/dirtyWhite" 
     fab:fab_addButtonPlusIconColor="@color/dirtyWhite" 
     fab:fab_addButtonSize = "normal" 
     fab:fab_labelStyle="@style/menu_labels_style" 
     fab:fab_labelsPosition="left" 
     app:layout_anchor="@id/viewpager" 
     app:layout_anchorGravity="bottom|end"> 

     <com.getbase.floatingactionbutton.FloatingActionButton 
      android:id="@+id/createPlanBtn" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      fab:fab_colorNormal="@color/blood_orange" 
      fab:fab_title="Create a plan" 
      fab:fab_size="normal" 
      app:fab_icon="@drawable/ic_event_white_48dp" 
      fab:fab_colorPressed="@color/dirtyWhite"/> 

     <com.getbase.floatingactionbutton.FloatingActionButton 
      android:id="@+id/changeStatusBtn" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      fab:fab_colorNormal="@color/blood_orange" 
      fab:fab_size="normal" 
      app:fab_icon="@drawable/ic_textsms_white_48dp" 
      fab:fab_title="Change status" 
      fab:fab_colorPressed="@color/dirtyWhite"/> 

    </com.getbase.floatingactionbutton.FloatingActionsMenu> 

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

这是我的片段包含recyclerview布局：

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

<android.support.v7.widget.RecyclerView 
    android:id="@+id/feedCardViewList" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:clipToPadding="true" 
    xmlns:android="http://schemas.android.com/apk/res/android"/> 

</RelativeLayout>

content_main布局：

<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" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
tools:context=".UI.MainActivity" 
tools:showIn="@layout/activity_main" 
app:layout_behavior="@string/appbar_scrolling_view_behavior"> 


</RelativeLayout>

来源

2016-02-12 Georgi Koemdzhiev

这是否会发生，如果您删除应用程序：layout_scrollFlags =“scroll | enterAlways”？ – Blackbelt

@Blackbelt不，它没有。只有当工具栏被折叠并且我滚动出这个片段时（工具栏被展开在viewpager的PageChanged上） –

@Blackbelt - AFAIK，这个标志与'ViewPager'没有关系，我可以记住许多重复的问题，但是他们都没有答案 – Mohsen

今天就遇到这个问题。我不确定我是否错过了某些东西，并且错误地实施了CoordinatorLayout，或者它是一个错误。但是，如果有人仍然有这个问题，我通过基于应用栏的高度调整工具栏下方的内容边距，以编程方式解决它。那就是：

布局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.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      ...collapsing toolbar content... 

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

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

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

     ...content beneath toolbar... 

    </FrameLayout> 

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

代码（充气布局后）：

AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar); 
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); 
FrameLayout contentLayout = (FrameLayout) view.findViewById(R.id.content); 
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 

    @Override 
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
     ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) contentLayout.getLayoutParams(); 
     layoutParams.setMargins(0, 0, 0, appBarLayout.getMeasuredHeight() + verticalOffset); 
     contentLayout.requestLayout(); 
    } 

});

来源

2017-02-07 03:08:56 user1203585

谢谢你分享你的答案！我没有测试过，但我会接受你的答案，因为它是最详细的答案，它也可以帮助其他人。 –

它的工作原理。帮了很多！ –

-2

在您的viewpager标记中尝试使用Android:MarginBottom = "5dp"，这里您将铺贴高度用作“Match_Parent”，因此它覆盖底部区域。

来源

2016-02-12 08:53:40 Newbiee

这是SupportLibrary的默认配置或默认设计，因此，OP不需要更改任何内容。 – Mohsen

我试过了，这是一个解决问题的方法，它只是破坏了我的布局。 –

我有同样的问题，所以暂时我把一个55dp的底部边距android：layout_marginBottom =“55dp”，看起来不错，我希望这个问题很快就会得到解决。

来源

2016-03-18 16:50:33 Talu

的this

可能重复你可以尝试改变工具栏的app:layout_scrollFlags="scroll|enterAlways"属性app:layout_scrollFlags="enterAlways"。

来源

2016-10-12 13:34:59 Williem

这个为我修好了。竖起大拇指^^ – pixelsize

大家

我也面临着同样的问题。 |从你的工具条码

在你XMLFILE layout_scrollFlags = “enterAlways长卷”：

这个问题可以通过简单地删除

应用程序可以轻松解决。

我也遇到同样的问题，但很快删除此 viewpager后本身布置在屏幕内（没有穿过屏幕限制）

这是默认代码

<android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     app:layout_scrollFlags="scroll|enterAlways" 
     app:popupTheme="@style/AppTheme.PopupOverlay">

这种变化

<android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 

     app:popupTheme="@style/AppTheme.PopupOverlay">

底部的第二行。

来源

2017-08-04 14:08:38

Viewpager被推出屏幕[CoordinatorLayout] [设计库]

回答

相关问题