Android SlidingPaneLayout实践

Android SlidingPaneLayout实践

可折叠设备在这里这一事实是无法回避的。在应用程序开发方面，它们带来了一些新的挑战。其中之一是可折叠设备的外形尺寸会根据折叠状态而变化。Android在设计上支持不同的外形尺寸，因此这很容易处理。但是，有一个新的Jetpack库可以使事情变得更容易：
【SlidingPaneLayout】(https://developer.android.com/jetpack/androidx/releases/slidingpanelayout)
主要用例是不同的屏幕尺寸需要不同的用户体验。这方面的经典示例是列表/详细信息界面。列表和详细信息窗格在较大的显示器上并排显示。但列表窗格在较小的显示器上全屏显示。单击列表项后，将详细信息窗格全屏显示。通常，我们将列表和详细信息窗格实现为 s，然后具有根据显示大小更改的主布局。SlidingPaneLayoutFragment

SlidingPaneLayout提供了大致相同的功能，但为我们完成了大部分繁重的工作。

实现

我们需要做的第一件事是在我们的项目中包含依赖项：

dependencies {
    implementation "androidx.slidingpanelayout:slidingpanelayout:1.2.0-alpha01"
}

现在我们可以创建布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout 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"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="@dimen/list_width"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="@dimen/item_width"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

在这里，我们使用 实现列表窗格，并将详细信息窗格实现为 .RecyclerViewNavHostFragment

这里的关键是宽度值。这些定义了全屏显示或并排显示两个窗格之间的拆分点。如果显示的宽度不足以容纳两个宽度，则列表窗格将全屏显示。点击列表项将使详细信息窗格全屏显示。

但是，如果显示的宽度足以包含两个窗格，则它们将并排显示。在这种情况下，属性可能变得很重要。此处，详细信息窗格的权重为 。如果没有其他约束，则在确定列表窗格的大小后，详细信息窗格将填充剩余空间。但是，在某些可折叠设备上，两个窗格之间的边界可能是显示器的折叠线。layout_weight1

片段代码对此完全无关 - 它全部由 .尽管在某些情况下可能需要以编程方式控制这一点。 如有必要，可以通过编程方式轻松控制实现。SlidingPaneLayoutSlidingPaneLayoutOpeneable

结果

我在三星Z Fold2上对此进行了测试，它运行得非常流畅。但是，我无法从该设备捕获视频，因此不得不即兴创作。此捕获来自“7.6 Fold-in with outer display”模拟器实例，该实例类似于三星：

在折叠和展开状态之间转换时，会出现一点布局故障，反之亦然。但是，这并没有在实际设备上发生。不过，它确实很好地显示了不同的UX模型。

思考

SlidingPaneLayout功能强大且易于使用。可折叠设备背后的概念也给我留下了深刻的印象，而且技术正在成熟。然而，我对三星Z Fold2不太着迷。该设备的制造质量非常好，尽管只有时间才能证明显示器的铰链部分的磨损程度。我遇到的问题是折叠和展开显示器的纵横比。

折叠后，显示屏非常高，但不是很宽–816 x 2260像素–大约1：3的纵横比。很少有应用程序真正能够很好地应对这种情况，尤其是最终将列压在一起的第三方启动器应用程序。虽然应用程序有责任适应显示，但这感觉像是一个特别尴尬的纵横比，许多应用程序根本无法很好地应对它。

同样，展开的显示器也是一个不寻常的纵横比。它是 1768 x 2208 像素——大约 1：1.25。这离方不远，再一次，这是一个非常罕见的纵横比，因此应用程序无法很好地应对它。这是BBC天气应用程序：

从表面上看，这看起来还可以。仔细观察，Hemel Hempstead 中的字幕被裁剪（字母P被裁剪）是一个问题。此外，“下一个小时”也跑到它上面的文本中。

怎么了？

这里的问题是，从技术上讲，这是一个纵向显示器，因为它的高度大于宽度。但它并没有那么高。因此，为纵向显示器设计的布局不适用于近方形显示器。

正如我已经提到的，应用程序可以改进自己的布局。但这里的硬件选择意味着应用程序需要支持新的纵横比。这将导致支持此类设备所需的开发和 QA 工作增加。可折叠设备仍然有些昂贵，因此不会大量出货。许多应用程序开发人员会觉得额外的努力是没有道理的。这可能会让潜在买家望而却步。

虽然我已经偏离了这篇文章的主题，但我确实觉得值得一提。感觉设备制造商需要做出更多的努力来符合更合理的纵横比，否则可能会破坏许多应用程序UI。

结论

SlidingPaneLayout是一个非常易于使用的工具，用于处理需要不同显示尺寸不同行为的多个窗格 UI。虽然我在这里重点介绍了可折叠设备，但在使应用程序在多窗口环境中表现良好时，它也非常有用。如果应用未获取整个屏幕，可以确保其行为适应其窗口大小的变化SlidingPaneLayout。
文章源码获取地址
{SlidingPaneLayout}(https://github.com/StylingAndroid/SlidingPaneLayout)