大纲/细节(活动/片段)布局,从 Android 移植到代号一



我正在将我的Android应用程序移植到Codename One项目,我的近期目标是创建一个iOS版本。

我的应用具有大纲/细节结构,在手机或平板电脑上使用时具有不同的布局。

事实上,当应用程序以横向模式在平板电脑上运行时,可以编辑列表的元素,右侧有一个片段,也就是说,活动列表在左侧,而编辑发生在片段的右侧。

当应用在平板电脑和手机上处于纵向模式时,将显示列表。

在手机上,编辑发生在单独的活动中,但片段是相同的,只是它的布局与活动的布局大。

有人建议我看看KitchenSink的例子。我看到它的结构是主/细节,但在横向和纵向模式下布局是相同的,即左侧的列表和"片段"在两个方向上都可见。

我认为通过自定义 KitchenSink 布局并根据方向和控制流以编程方式设置列表和编辑窗格的大小来重现我的应用程序布局并不困难。

这是正确的路径,还是必须遵循类似于Android活动/片段代码的东西?

代号 One 没有明确的主从抽象,因为它并不真正需要它。

厨房水槽有点简单,只使菜单成为主细节的一部分。在您的情况下,您只需使用几个容器来表示主节点和细节。您可以将这些视为片段,但实际上它们只是 android 术语中的视图组。

在这里,您可以依靠厨房水槽中的代码来实现窗体的此行为。当表单加载时,只需编写您描述的类似于厨房水槽的逻辑,例如:

// I assume form has a BorderLayout and we have a static import of CN.*
if(isTablet() && !isPortrait()) {
form.add(WEST, master);
form.add(CENTER, detail);
} else {
form.add(CENTER, master);
}
form.addOrientationListener(e -> {
detail.remove();
master.remove();
findCommandComponent(
if(isPortrait()) {
form.add(CENTER, master);         
} else {
form.add(CENTER, detail);
form.add(WEST, master);
}
form.getContentPane().animateLayout(150);
});

这里有一些逻辑我删除了,例如用于事件处理/导航,但它的要点是相似的。

另请参阅此处的相关讨论:如何为平板电脑表单布局构建 CN1 代码?

最新更新