View Flow for Android 技术文档

2024-12-23 21:44:56作者：咎竹峻Karen

1. 安装指南

View Flow 是一个适用于 Android 的 UI 小部件，它提供了一个可以水平滚动的 ViewGroup，其中的项目由一个 Adapter 填充。此组件是一个库项目，这意味着无需将资源复制粘贴到您的项目中，只需将 ViewFlow 组件作为引用添加到任何项目中即可。

2. 项目的使用说明

在布局中使用

在您的布局文件中添加以下代码：

<org.taptwo.android.widget.ViewFlow
    android:id="@+id/viewflow"
    app:sidebuffer="5"
    />

使用 app:sidebuffer 是可选的。它定义了当前显示的 View 两边的 View 数量。默认的 sidebuffer 是 3，总共有 7 个 View 在同一时间被加载（最多）。

要使用更方便的 app:sidebuffer 属性，必须在布局文件中包含应用程序命名空间，方式和包含 android 命名空间相同。请参考示例项目中的 main.xml 文件获取完整示例。请注意，它引用的是应用程序命名空间，而不是 viewflow 命名空间，如 xmlns:app="http://schemas.android.com/apk/res/your.application.package.here"。

在 Activity 中使用

在您的 Activity 中添加以下代码：

ViewFlow viewFlow = (ViewFlow) findViewById(R.id.viewflow);
viewFlow.setAdapter(myAdapter);

如果要设置不同的初始位置（默认为 0），可以这样做：

viewFlow.setAdapter(myAdapter, 8);

尽管可能这样做，但你不应该在调用 setAdapter(myAdapter) 后立即调用 setSelection(...)，因为这样可能会加载不必要的视图，从而导致性能下降。

监听屏幕切换事件

如果你需要监听屏幕切换事件，可以实现自己的 ViewFlow.ViewSwitchListener 并将其传递给 setOnViewSwitchListener() 方法。

viewFlow.setOnViewSwitchListener(new ViewSwitchListener() {
    public void onSwitched(View v, int position) {
        // 在这里编写你的代码
    }
});

添加流程指示器

还可以在布局中添加一个流程视图指示器。FlowIndicator 的目的是呈现一个视觉表示，显示焦点在项目列表中的位置。你可以自己实现一个 FlowIndicator，也可以使用 View Flow 库提供的实现。View Flow 库当前支持以下指示器：

圆形流程指示器

此指示器为 Adapter 中的每个 View 显示一个圆圈，当前选中的 View 有一个特殊的圆圈表示（请参见下面的截图）。

<org.taptwo.android.widget.CircleFlowIndicator
    android:padding="10dip" android:layout_height="wrap_content"
    android:layout_width="wrap_content" android:id="@+id/viewflowindic"
    android:background="#00000000"/>

然后你需要将 ViewFlow 与 FlowIndicator 连接起来：

CircleFlowIndicator indic = (CircleFlowIndicator) findViewById(R.id.viewflowindic);
viewFlow.setFlowIndicator(indic);

支持的属性有：activeColor、inactiveColor、activeType（填充或描边）、inactiveType（填充或描边）、fadeOut（指示器淡出时间，以毫秒为单位，0 表示永不淡出）、radius。

标题流程指示器

此指示器显示前一个、当前和下一个 View 在 Adapter 中的标题（请参见下面的截图）。

<org.taptwo.android.widget.TitleFlowIndicator
    android:id="@+id/viewflowindic" android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    app:footerLineHeight="2dp"
    app:footerTriangleHeight="10dp" app:textColor="#FFFFFFFF" app:selectedColor="#FFFFC445"
    app:footerColor="#FFFFC445" app:titlePadding="10dp" app:textSize="11dp" app:selectedSize="12dp"
    android:layout_marginTop="10dip"
    app:clipPadding="5dp" />

然后你需要将 ViewFlow 与 FlowIndicator 连接起来：

TitleFlowIndicator indicator = (TitleFlowIndicator) findViewById(R.id.viewflowindic);
indicator.setTitleProvider(myTitleProvider);
viewFlow.setFlowIndicator(indicator);