在安卓手机上,如何像YouTube/Google Music应用一样滑动切换标签页?

5
在他们最新版本的应用程序中,Google 实现了一种非常酷的方式来在选项卡之间滑动而不是点击选项卡标题。我想知道是否有人对如何实现这个功能有更具体的想法。
以下是一些想法 - 欢迎批评:
我的初步想法是这不是一个标准的 TabActivity,它托管子活动。事实上,我甚至认为这不是自定义的 ActivityGroup。选项卡行在滑动时滚动,但不会导致活动选项卡切换。
滑动选项卡的主要内容会展示有趣的行为。我怀疑主内容区域附加了 GestureListener。随着选项卡的滑动,相邻选项卡的行变得可见。这似乎表明这是一组可以水平滚动的 ListView。它几乎像一个水平滚动的 HTML div,所有内容已经存在,但在滑动时进入视图。我不太确定行的呈现是如何处理的(传统上,当向上/向下滚动列表时才会构建和显示行,而不是左/右)。所以也许这也是一个自定义的 ListView 实现?当不侧向滚动时,它的行为就像你期望的常规 ListView 一样,包括快速滚动和下拉时的发光效果。
选项卡行可能是一个 ScrollView,这可以通过滑动到边缘时的发光效果来证明。选项卡内容的行不是。
我试图建立一个由不同部分组成的心理模型,以构建这个非常漂亮的 UI。任何见解都非常感激。
6个回答

2
最有价值的完美操作信息来源是来自IO 2011应用程序的资源。
请查看ScheduleFragment和Workspace类。
谢谢。

Workspace.java文件顶部的注释:“注意:请考虑使用Android兼容包中提供的'ViewPager'小部件,版本为r3。”希望能够看到一个使用ViewPager和ActionBar选项卡的示例。 - marczych

1

Youtube应用程序的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout ...>
    ...
    <TabRow android:id="@id/tabrow" .../>
    <Workspace android:id="@id/workspace" ...>
        <ListView android:id="@id/uploads" ... />
        <ListView android:id="@id/favorites" ... />
        <ListView android:id="@id/playlists" ... />
        <ListView android:id="@id/subscriptions" ... />
    </Workspace>
</LinearLayout>

Google 推出了两个小部件,这些小部件也用于音乐应用程序:

  • com.google.android.youtube.ui.TabRow。

    TabRow 扩展了 HorizontalScrollView

  • com.google.android.youtube.ui.Workspace

    Workspace 扩展了 ViewGroup

关于实现,任何人都可以使用“正确的工具”来查看。但这可能会给出一些粗略的代码,甚至是不正确的代码。我尝试过了,没有太多的运气。有动力和良好技能的人可能会做到。

另一个解决方案,更好的解决方案:我希望 Google 很快发布这些类的库或代码。这个 GUI 片段真的很好用。


1

这与主屏幕的隐喻相同:多个页面,您可以水平滑动,每个屏幕都有其自己的功能。它具有“锁定”行为(如果您滑动到足够远的位置,则跳转到新选项卡,但如果您没有滑动到足够远,则会弹回已经可见的屏幕),不同的是它使用选项卡作为指示器,而不是主屏幕底部的小点。

正如您所说,选项卡不会滚动。而且,在滑动过程中,您实际上不能竖直滚动,因此它基本上是一个类似于here的直接实现。我想,通过多点触控,您可以使其竖直滚动,但这实际上非常奇怪,并且在很大程度上是不必要的:看起来很酷,但实用性有限。 ListView除了成为标准的ListView之外,不需要执行任何其他操作。顶部可能有一个基于按钮的自定义选项卡小部件,根据滚动更新按钮样式以突出显示正确的选项卡。就是这样。


1

您可以将选项卡放置在一个空框架内。

使用 GestureDetector.SimpleOnGestureDetector 将其附加到该框架上,并覆盖 onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) 方法。

您可以通过使用 e1e2 之间的累积距离来决定何时需要强烈地滑动才能实际更改选项卡。

记得在您的 onFling 上返回 false,否则触摸事件将无法传递到下面的视图。


0

我相信我已经找到了你所寻找的解决方案。选项卡实际上位于应用程序的操作栏中:

http://developer.android.com/guide/topics/ui/actionbar.html#Tabs

此外,《Android for Programmers - An App-Driven Approach》(ISBN 0132121360)的第14章完美地介绍了这个操作栏选项卡系统。

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接