如何使用 NestedScrollView 删除 CoordinatorLayout 底部的空白区域

【问题标题】：How to remove empty white space at the bottom of CoordinatorLayout with NestedScrollView如何使用 NestedScrollView 删除 CoordinatorLayout 底部的空白区域
【发布时间】：2016-01-25 08:11:29
【问题描述】：

我正在使用CoordinatorLayout，其中我使用AppbarLayout 以及ViewPager、Nestedscrollview 和TabLayout。在布局滚动时AppbarLayout 折叠和展开。

现在的问题是这个布局的滚动它在底部留下了我不想要的空白区域。

这是我的抽屉布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:id="@+id/frame_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <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/coordinator"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.design.widget.AppBarLayout
                    android:id="@+id/app_bar"
                    android:layout_width="match_parent"
                    android:layout_height="220dp"
                    android:background="@drawable/offer_image"
                    android:fitsSystemWindows="true"
                    android:theme="@style/AppTheme.AppBarOverlay"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">
                    <!--    <com.flaviofaria.kenburnsview.KenBurnsView
                            android:id="@+id/image"
                            android:layout_width="match_parent"
                            android:layout_height="220dp"
                            android:src="@drawable/offer_image" />-->
                    <android.support.design.widget.CollapsingToolbarLayout
                        android:id="@+id/toolbar_layout"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:fitsSystemWindows="true"
                        app:expandedTitleMarginEnd="64dp"
                        app:expandedTitleMarginStart="48dp"
                        app:layout_scrollFlags="scroll|exitUntilCollapsed">


                        <com.flaviofaria.kenburnsview.KenBurnsView
                            android:id="@+id/image"
                            android:layout_width="match_parent"
                            android:layout_height="220dp"
                            android:src="@drawable/offer_image" />

                        <FrameLayout
                            android:id="@+id/collapse_frame"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="#B3c85a00">

                        </FrameLayout>

                        <FrameLayout
                            android:id="@+id/centerCircle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center">

                            <ImageView
                                android:id="@+id/imageViewCenter"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center" />
                        </FrameLayout>


                        <android.support.design.widget.TabLayout
                            android:id="@+id/tabs"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom"
                            android:layout_marginBottom="15dp"
                            app:tabIndicatorColor="#FFFFFF"
                            app:tabMode="scrollable" />
                        <!--</FrameLayout>-->
                    </android.support.design.widget.CollapsingToolbarLayout>
                </android.support.design.widget.AppBarLayout>

                <!--<FrameLayout-->

                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="match_parent"-->
                <!-- -->
                <!--android:visibility="visible">-->

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab"
                    style="@style/floating_action_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|end"
                    android:src="@drawable/ic_share_white_24dp"
                    android:visibility="gone"
                    app:backgroundTint="#FF9800"
                    app:elevation="6dp"
                    app:pressedTranslationZ="12dp" />

                <android.support.v4.view.ViewPager

                    xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/pager_pre"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left|bottom|fill_vertical"
                    android:layout_marginTop="0dp"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior">

                </android.support.v4.view.ViewPager>


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

            <RelativeLayout
                android:id="@+id/bannerView"
                android:layout_width="match_parent"
                android:layout_height="58dp"
                android:layout_gravity="bottom|center"
                android:background="@drawable/curved_white_with_blue_border"
                android:visibility="gone">

                <TextView
                    android:id="@+id/bannerText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerInParent="true"
                    android:layout_centerVertical="true"
                    android:gravity="center"
                    android:padding="3dp"
                    android:text="Banner"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/bannerImage"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentLeft="true"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:gravity="center"
                    android:padding="3dp"
                    android:scaleType="fitXY"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/bannerClose"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_centerVertical="true"
                    android:src="@drawable/cross_icon" />
            </RelativeLayout>


            <LinearLayout
                android:id="@+id/socialTabs"
                android:layout_width="match_parent"
                android:layout_height="46dp"
                android:layout_gravity="bottom|center"
                android:layout_marginBottom="5dp"
                android:background="@color/White"
                android:orientation="horizontal"
                android:visibility="gone">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:adjustViewBounds="true"
                    android:src="@drawable/follow" />

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:background="@color/White">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="46dp"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:weightSum="3">

                        <ImageView
                            android:id="@+id/facebookImageView"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_weight="1"
                            android:src="@drawable/fb_follow" />

                        <ImageView
                            android:id="@+id/googlePlusImageView"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:layout_weight="1"
                            android:adjustViewBounds="true"
                            android:src="@drawable/google_follow" />

                        <ImageView
                            android:id="@+id/twitterImageView"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_weight="1"
                            android:adjustViewBounds="true"
                            android:src="@drawable/twitter_follow" />
                    </LinearLayout>
                </FrameLayout>
            </LinearLayout>
        </FrameLayout>

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

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

    <ExpandableListView
        android:id="@+id/left_drawer"
        android:layout_width="265dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff"
        android:choiceMode="singleChoice"
        android:divider="@null"
        android:dividerHeight="0dp"
        android:drawSelectorOnTop="true"
        android:groupIndicator="@null"
        android:scrollbars="@null" />
    <!--    <FrameLayout xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:ignore="MergeRootFrame"></FrameLayout>-->

</android.support.v4.widget.DrawerLayout>

NestedScrollView 的代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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="wrap_content"
    android:layout_gravity="fill_vertical"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/fragment_back_color"
            android:orientation="vertical">


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@drawable/new_recharge" />

                <com.spiceladdoo.views.RobotTextviewRegular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="NEW PAYMENT"
                    android:textColor="@color/offer_name_text_color" />

            </LinearLayout>


            <RelativeLayout

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="@color/white"
                android:paddingBottom="20dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="20dp">

                <HorizontalScrollView
                    android:id="@+id/hsv"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:fillViewport="true"
                    android:measureAllChildren="false"
                    android:scrollbars="none">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:id="@+id/wallet_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/wallet_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/wallet_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="WALLET"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"

                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/prepaid_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/prepaid_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/prepaid_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="PREPAID"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />


                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"

                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/postpaid_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/postpaid_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/postpaid_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="POSTPAID"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />


                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/dth_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/dth_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/dth_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="DTH"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />


                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/landline_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/landline_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/landline_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="LANDLINE"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />


                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/datacard_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/datacard_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/datacard_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="DATACARD"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                        </LinearLayout>
                    </LinearLayout>
                </HorizontalScrollView>
            </RelativeLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="10dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:paddingTop="10dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center" />

                <com.spiceladdoo.views.RobotTextviewRegular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="RECENT"
                    android:textColor="@color/offer_name_text_color" />

            </LinearLayout>


            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:id="@+id/lincontainer_rec"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:animateLayoutChanges="true"
                    android:divider="?android:dividerHorizontal"
                    android:orientation="vertical"
                    android:paddingLeft="16dp"
                    android:paddingRight="16dp"
                    android:showDividers="middle" />
            </FrameLayout>
        </LinearLayout>
    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>

我正在分享这个问题的视频点击：

https://www.dropbox.com/s/9yojeq2yw1eebps/layout_height_issue.mp4?dl=0

从过去的三天开始，我一直在努力解决这个问题。

我们将不胜感激。

【问题讨论】：

  • 一直在找这个链接，终于找到了，看看：stackoverflow.com/questions/31266078/…
  • @Martijn Pieters 据我所知，这不是题外话。这对我来说似乎没问题..请打开它
  • @Kool：这篇文章被自动标记为长度。它是巨大的。我确信发布的 XML 可以简化为一个最小的示例，而不仅仅是代码转储。
  • @MartijnPieters 我理解，但这里需要发布所有内容以使问题更清楚。每个视图属性都依赖于其他属性。您应该再次重新打开它
  • @TGMCians 我同意 Martijn 的观点，XML 太长了，甚至无法通过查看来调试它！

标签： android android-viewpager android-coordinatorlayout android-appbarlayout nestedscrollview


【解决方案1】：

尝试添加： 

android:layout_gravity="fill_vertical"

发给NestedScrollView和RecyclerView。（或者你可以试试NestedScrollView）。

另外，请查看此链接：https://stackoverflow.com/a/31266160/4409113

其中说：

这是设计库的错。布局“短于”屏幕高度 导致间隙，折叠/展开中的不当行为 （即你需要拖到折叠的外面 区域再次展开它等等等等。它只是在 时刻或写下这个答案（希望有一天会修复， 但我不知道什么时候会发生）。

顺便说一句，我正在使用以下代码，它正在使用match_parent：

<android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.CardView
            android:id="@+id/cvuser"
            android:layout_width="365dp"
            android:layout_height="140dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="10dp"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="1dp">

            <RelativeLayout
                android:id="@+id/idrel"
                android:layout_width="fill_parent"
                android:layout_height="140dp">

                <TextView
                    android:id="@+id/txtmessage"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginStart="17dp"
                    android:layout_marginTop="10dp"
                    android:textAppearance="?android:attr/textAppearanceMedium" />

                <TextView
                    android:id="@+id/txtauthor"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignStart="@+id/txtmessage"
                    android:layout_marginBottom="35dp"
                    android:textAppearance="?android:attr/textAppearanceMedium" />


            </RelativeLayout>
        </android.support.v7.widget.CardView>

    </android.support.v4.widget.NestedScrollView>

我又看了一遍视频，问题是你的内容不足以滚动。我的意思是，如果你可以添加上面的CardView 和RecyclerView，你会看到会发生什么。内容是不足以滚动和更多内容进入NestedScrollView，然后使用match_parent，它应该可以工作。

【讨论】：

  • 尝试用java添加它有时java会做同样的事情。如果它不起作用，听起来像是来自支持库的错误或类似的东西。或者如果不是，你可以想等待谷歌员工的回答。这应该很有趣......
  • 但有些应用做得非常漂亮。其中之一是play.google.com/store/apps/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-12-28
  • 2016-11-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode