CollapsingToolbar无法使用不那么高的内容

时间:2015-06-11 15:47:32

标签: android android-support-library android-design-library androiddesignsupport

我很确定这是一个错误,所以我要求解决方法。我的布局就像:

<CoordinatorLayout>

    <AppBarLayout>
        <CollapsingToolbarLayout>
            <ImageView/>
            <Toolbar/>
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <android.support.v4.widget.NestedScrollView/> <!-- content here -->

</CoordinatorLayout>

我正在从网络上检索内容,我不知道它有多高 - 可能是几行,可能很长。 但是,我发现CollapsingToolbar在内容不足以覆盖整个屏幕时效果不佳。例:

  • content.height > screen.height:有效;滑动顶部/底部可展开和折叠工具栏,以及滚动内容;

  • content.height < screen.height:没有。那是好,因为大多数时候(content.height + expandedToolbar.height) > screen.height

换句话说,当内容不够高时,即使内容+ expandedToolbar比整个屏幕高得多,它也不会对滚动手势做出反应并显示一些错误 - 可能需要十个手势折叠工具栏一点点。因此,您很难到达内容的底部,因为工具栏已展开,所以隐藏在底部。

任何解决方法?

如果您想尝试,只需参加cheesesquare示例项目并删除(或减少)activity_detail.xml中的NestedScrollView内的内容[此处为API17]

1 个答案:

答案 0 :(得分:21)

诀窍是将$(document).ready(function () { resizeViewPort(); }); $(window).resize(function () { resizeViewPort(); }); function resizeViewPort() { alert(($(window).height() / $(window).width()).toFixed(2)); var height = $(window).height(), width = $(window).width(); var scale = (height / width).toFixed(2); if (scale >= 1.7 && scale <= 1.8) { if (height <= 736) { // 736x414 alert("Mobile PORTRAIT"); } } else if (scale >= 1.3 && scale <= 1.6) { if (height <= 1024) { // 1024x768 alert("Tablet PORTRAIT"); } } else if (scale >= 0.6 && scale <= 0.8) { if (height <= 768) { // 768x1024 alert("Tablet LANDSCAPE or Desktop 4:3"); } else if (height <= 900) { // 900x1440 alert("Desktop HD 16:10"); } else if (height <= 1200) { // 1200x1920 alert("Desktop FullHD 16:10"); } } else if (scale >= 0.5 && scale < 0.6) { if (height <= 414) { // 414x736 alert("Mobile LANDSCAPE"); } else if (height <= 720) { // 720x1280 alert("Desktop HD 16:9"); } else if (height <= 1080) { // 1080x1920 alert("Desktop FullHD 16:9"); } } } 添加到android:layout_gravity="fill_vertical"。通过这种方式,工具栏可以平滑地折叠和扩展。对任何非空NestedScrollView的滚动手势做出反应,无论其大小如何。

当然,如果滚动视图为空,则工具栏不会通过滚动内容&#34;而不会崩溃。屏幕的一部分。但这对我来说并不是那么糟糕。

更新

看起来此解决方案存在较大内容的一些问题,因为内容的最底部将保持隐藏状态。我可以发现隐藏的部分(看起来像)与折叠的工具栏高度一样大。这样可以很容易地定义一个变通方法 - 只需在ScrollView的底部添加一个边距,以便测量并释放底部隐藏部分。因此:

NestedScrollView

或您在视图中为android:layout_gravity="fill_vertical" android:layout_marginBottom="?attr/actionBarSize" 提供的任何尺寸。请注意,此解决方案非常适合小型和大型内容,但滚动不是那么平滑的小型内容。

Update2(2015年7月)

从早期测试开始,看起来该错误已在支持设计库的v22.2.1版本中得到修复。