企业官网建设流程全解析

WelcomeCoordinator是一款来自 Redbooth 开源团队的 Android 引导页库（Welcome Wizard / Onboarding 组件），它把多页欢迎向导、表单向导变成"一行 XML + 一段回调"就能实现的体验。本文带你用一张"架构图"拆解它的 5 个核心组件如何协作，以及从手指滑动到视差动画帧的完整数据流。

🧭 项目结构：两个模块，职责分明

整个仓库由 Gradle 声明为两个模块（见 settings.gradle）：

核心库的全部源码只有 5 个 Java 文件 + 1 个属性定义文件，非常适合逐行阅读：

• WelcomeCoordinatorLayout.java —— 顶层容器
• WelcomeCoordinatorTouchController.java —— 手势与翻页引擎
• WelcomeCoordinatorPageInflater.java —— 页面膨胀器
• WelcomePageLayout.java —— 单页容器
• WelcomePageBehavior.java —— 行为基类
• attrs.xml —— 自定义属性定义

┌─────────────────────────────────────────────────────────┐ │ WelcomeCoordinatorLayout (HorizontalScrollView) │ │ ┌───────────────┐ ┌───────────────┐ ┌──────────────┐ │ │ │ WelcomePage1 │ │ WelcomePage2 │ │ ...Page N │ │ │ │ WelcomePageLayout (RelativeLayout) │ │ │ │ ├─ view_behavior=".ParallaxTitleBehaviour" │ │ │ │ ├─ app:destiny="@+id/android_destiny" │ │ │ └───────────────┘ └───────────────┘ └──────────────┘ │ │ [TouchController 拦截手势] → [ScrollChanged] │ │ → notifyProgressScroll() → 每个 Behavior 同步帧 │ │ [dispatchDraw 绘制底部指示圆点] │ └─────────────────────────────────────────────────────────┘

🏗️ 核心组件一：WelcomeCoordinatorLayout —— 指挥中枢

WelcomeCoordinatorLayout 继承自HorizontalScrollView，是整个库的"总指挥"，它管理四类状态：

1. 页面列表：内部FrameLayout mainContentView承载所有页面，页面之间用"左外边距 = 屏幕宽 × 序号"的方式横向排开，而不是堆叠，这让滚动位置天然是连续的（见configurePageLayout，WelcomeCoordinatorLayout.java）；
2. 手势处理：onTouchEvent优先交给WelcomeCoordinatorTouchController处理吸附逻辑，失败才回落到系统默认滚动（WelcomeCoordinatorLayout.java）；
3. 指示圆点：dispatchDraw里逐帧绘制未选中/选中的圆点，选中点位置由scrollX插值得出，实现圆点"滑动"效果（WelcomeCoordinatorLayout.java）；
4. 行为注册表：behaviors列表保存所有页面的WelcomePageBehavior，滚动时统一分发进度。

它对外暴露的 XML 属性（定义在 attrs.xml）：

🖐️ 核心组件二：TouchController —— 翻页吸附引擎

WelcomeCoordinatorTouchController 用VelocityTracker跟踪手势，是"松手后自动对齐到整页"的关键，数据流如下：

ACTION_DOWN ──记录 currentScrollX / 初始触点 X ACTION MOVE ──scrollLimited() 钳制边界 → view.setScrollX() → ViewTreeObserver.OnScrollChangedListener 触发 → view.notifyProgressScroll(progress, scrollX) ACTION UP ──computeCurrentVelocity() → moveToPagePosition()

吸附决策在 moveToPagePosition 中，规则非常直白：

• 速度 < -300（快速左滑）→ 翻到下一页；
• 速度 > 300（快速右滑）→ 回到当前页；
• 否则看新页可见比例：超过 50% 进下一页，否则回弹。

翻页动画由ObjectAnimator在 300ms 内平滑修改scrollX完成，结束后回调onPageSelected(page)，Demo 里每个页面的入场动画就是靠这个回调触发的。

📄 核心组件三：PageInflater + PageLayout —— 页面装载管线

调用coordinator.addPage(R.layout.welcome_page_1, ...)时，数据流是：

addPage(layoutResIds) └─ 逆序循环（保证第一页在最左） ├─ PageInflater.inflate() ── 仅解析 XML，得到 ViewGroup ├─ extractPageBehaviors() ── 遍历子 View，收集 view_behavior │ └─ WelcomePageLayout.getBehaviors() 逐一绑定 │ coordinator / target / page 三要素 └─ mainContentView.addView(pageView)

• addPage 是唯一的"注页入口"；
• WelcomeCoordinatorPageInflater 只是LayoutInflater的薄封装；
• WelcomePageLayout 继承RelativeLayout，每页 XML 的根节点必须是它。它的自定义LayoutParams会解析出两个关键属性：
  • app:view_behavior：类名字符串，通过反射实例化行为对象（parseBehavior）；
  • app:destiny：目标视图 id，供行为做跨页面飞行动画。

🎬 核心组件四：WelcomePageBehavior —— 视差动画扩展点

这是整个库最精妙的设计：把"页面元素如何动"从页面中解耦为可插拔的行为。基类 WelcomePageBehavior 只有两个抽象方法：

关键技巧是**"动画不播放，只定位帧"：Behavior 在onCreate里创建一个时长等于整个滚动区宽度的ObjectAnimator但从不 start，滚动时每帧调用setCurrentPlayTime(scrollX)，于是动画进度与手指位置严格同步**——这正是欢迎页视差效果的原理，可参考 Demo 的 ParallaxTitleBehaviour。

跨页面飞行动画则依靠destiny属性：getDestinyView 按 id 在 Coordinator 全局查找目标视图，AnimationFlightTo 据此计算位移向量，让星星"飞"到下一页的指定位置。

🔁 数据流全景：一次滑动的 5 个阶段

① 手指拖动 TouchController.setScrollX → 页面位移 ② 滚动监听 OnScrollChangedListener → notifyProgressScroll() ③ 行为同步 遍历 behaviors → onPlaytimeChange(逐帧驱动视差) ④ 事件回调 OnPageScrollListener.onScrollPage(progress, maximum) → Demo 用它同步整屏背景色渐变 ⑤ 松手吸附 moveToPagePosition → 300ms 平滑动画 → 结束回调 onPageSelected → 触发该页入场动画

其中第④步对应 setOnPageScrollListener；Demo 的 MainActivity 用它做了两件事：onScrollPage驱动四色背景渐变，onPageSelected按页码播放火箭、头像、图表等入场动画（switch (pageSelected)分支）。

🛠️ 三步接入你自己的 App

1. 引入依赖：在build.gradle中添加compile 'com.redbooth:WelcomeCoordinator:1.0.1'（依赖仓库配置见 buildsystem/dependencies.gradle）；
2. 布局声明：参考 activity_main.xml，放置WelcomeCoordinatorLayout并设置指示器样式；
3. 注册页面：在onCreate中调用coordinator.addPage(...)，每页 XML 以WelcomePageLayout为根（模板见 welcome_page_1.xml），需要动效的子 View 加上app:view_behavior即可。

📚 阅读源码建议路径

1. 先跑app模块，拖动四页感受视差与吸附效果；
2. 从addPage→extractPageBehaviors顺藤摸瓜，理解页面装载；
3. 再看TouchController的边界钳制与速度判定；
4. 最后实现一个自己的WelcomePageBehavior，把滚动进度换算成你需要的动画帧。

WelcomeCoordinator 用不到 600 行核心代码，演示了"容器—手势—行为"三权分离的经典架构，是学习 Android 自定义 ViewGroup 与动画同步机制的优秀样板 🚀