Android ViewPager - 动态宽度和多个可见页面

Question

我的问题非常复杂，我很难找到实现以下目标的解决方案：

我需要一种图例（步进器）布局，其中一个孩子由左栏组成，然后是一个圆圈，然后是一个右栏。严格来说像“-o-”这样的东西。所以一系列孩子看起来像这样：“-o-o-o-o-o”。当图例关注一个孩子时，表示当前孩子就是这个孩子，这个孩子有一个更大的圆圈和更长的条：“--O--”。

因此最终的渲染看起来像这样：“-o-o--O--o-o-”。

每个子项 ("-o-") 对应于数据库中的特定项。当孩子获得焦点（“--O--”）时，相关项目将显示在下方。当用户从右向左滑动时，会显示下一项，而从左向右滑动会显示上一项。

滑动时，为了显示哪个孩子将显示其对应的项目，例如孩子将被动画以显示它有焦点。我使用Animator 来：

1. 增加条形宽度和孩子的圆圈大小 获得焦点
2. 降低以前专注的孩子的这些值。

显示图例需要查看之前和之后的内容。

我相信使用ViewPager 将帮助我实现以下目标：

1. 它具有“锚点效果”，这意味着滑动会从一个孩子移动到另一个孩子，以圆圈为中心：条之间的圆圈就是锚点。
2. 我可以通过覆盖我的自定义adapter 的getPageWidth() 方法在屏幕上显示多个页面

我想到的另一个解决方案是HorizontalScrollView。 如果我要使用它，根据滑动属性（强度、速度），图例将不确定地滚动而不锚定圆圈。

但是使用ViewPager 有一个很大的问题：每个页面都有相同的宽度。但是，图例的锚定子项需要更大（因此需要更大的宽度）。

那么如何动态改变宽度呢？

除非我可以自定义一个HorizontalScrollView以通过滑动拦截来添加锚点效果？

Answer 1

还有CarouselLayoutManager，我认为可能包含你想要的效果。

Answer 2

如果您使用ViewPager，我认为最好的方法是使用OnPageChangeListener。您将在用户向左/向右滑动时收到回调，以便您可以根据用户滑动的位置调整指标的大小。

    private int mCurrentPage = 0;

    viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            // positionOffset goes from 0.0 to just under 1.0 for the leftmost page

            float otherOffset = 1.0 - positionOffset;

            if (position == mCurrentPage) { // user is incrementing page, i.e. swiping left
                // size of current page indicator based on otherOffset
                // size of next page indicator based on positionOffset

            } else { // user is decrementing page, i.e. swiping right

                // size of current page indicator based on positionOffset
                // size of previous page indicator based on otherOffset
            }
        }

        @Override
        public void onPageSelected(int position) {
            mCurrentPage = position;

            // ... set final sizes: page @ position = 1.0 all others 0.0
        }
    });

这里是如何理解position 和positionOffset：当一个页面已经稳定时，它是居中的。假设当前页面位置 == 1（即第 2 页）。

• 第一种情况：用户向左滑动进入下一页。假设用户滑动 10% 的距离以进入下一页。 position 将是 1（显示在最左侧），positionOffset 将是 0.1（视口左边缘位于最左侧页面的 10%）。因此，当用户滑动时，positionOffset 将从0.0 变为略低于1.0。

• 第二种情况：用户向右滑动进入上一页。当用户向上一页滑动 10% 的距离时，position 将为 0（最左侧显示），positionOffset 将为0.9（视口左边缘位于最左侧页面的 90% 处）。因此，当用户滑动时，positionOffset 将从1.0 下方变为0.0。

至于指标本身，我做了一个类似的寻呼机指标，我使用了水平方向的LinearLayout，为每个页面添加了一个子指标视图。我使用pagerAdapter.getCount() 来获取要添加的视图数。

您的指示器与动画更复杂，但如果我要这样做，我会使用带有ScaleDrawable 背景的普通View 来显示可以改变大小的图形。