Android - 类似旋转木马的小部件，显示左右元素的一部分

Question

所以我到处搜索，但找不到问题的答案。我基本上需要的是 Android 的 ViewFlipper 或 ViewPager 提供的行为，但我想显示左右 View 的部分，以指示用户有要滚动的元素，而不是让所选 View 占据整个屏幕。

我还想为左 View 和侧 View 添加一些效果，例如调暗和缩放然后缩小一点。是否可以使用现有的 ViewFlipper 或 ViewPager 来完成，还是我必须推出自己的 View 组，就像封面流程 (http://www.inter-fuser.com/2010/01/android-coverflow-widget.html)？

(附言，我不想使用 Gallery 小部件，那个组件很糟糕)。

这是我们需要在选择 View 后显示的内容(仍然显示左右 View ):

向左或向右滑动会将主视图移出，使其变暗并稍微缩小，并对下一个或上一个 View 执行相反的操作。

Answer 1

我想向可能需要相同功能的任何人提供更新。到目前为止，在实现此功能方面已经取得了很大进展，现在该 View 完全按照我们的需要工作。

ViewPager 有一个名为 setPageMargin() 的方法。此方法可以接收负值，这将使 fragment/ View 相互重叠。为了获得所需的布局，我们首先按屏幕的百分比动态计算左右边距。这也可以静态完成，但由于我们将针​​对一系列不同的屏幕尺寸，这似乎是最好的方法。

稍后我们将 ViewPager 的页边距设置为侧边距大小的 2 倍。这使得 View 重新组合在一起。但是，此时，ViewPager 将显示多个 View 。

您剩下要做的就是对左右 View (Android 3.0+) 应用变换(缩放)，或者在它们周围添加更多边距以将它们缩小到合适的大小(3.0 之前)。

OnPageChangeListener.onPageScrolled() 可用于跟踪 ViewPager 的滚动。顺利可以实现转型。代码如下所示:

private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        // positionOffset varies from 0 to 1 and indicates how far the view is
        // from the center of the ViewPager. When a view is selected (centered), this
        // value is 0.

        // Fades the text in an out while the ViewPager scrolls from one view to another.
        // On our final design the text views are fixed to the center of the screen and
        // do not scroll along with the views.
        if (positionOffset < 0.5) {
            setTextViewAlpha(1 - positionOffset * 2);
        } else {
            setTextViewAlpha((positionOffset - 0.5f) * 2);
        }

        // It's surprisingly complicated to get the current object being displayed by
        // a ViewPager (there's no getCurrentObject method). ScaleableFragment is just
        // a custom class to allow an adapter to cache it internally and also correctly
        // manage a fragment's lifecycle and restore from a saved state.
        ScaleableFragment sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager
                .getAdapter()).getItem(position);

        // Calculates by how much the current view will be scaled down. The RATIO_SCALE
        // is 0.3 in our case, which makes the side views 70% of the size of the
        // center view. When centered, the scale will be 1. When
        // fully scrolled, the scale will be 0.7.
        float scale = 1 - (positionOffset * RATIO_SCALE);

        // Just a shortcut to findViewById(R.id.image).setScale(scale);
        sampleFragment.scaleImage(scale);


        // Now, if not in the last element, scale the next one up (in opposite direction).
        if (position + 1 < pager.getAdapter().getCount()) {
            sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager.getAdapter())
                    .getItem(position + 1);
            scale = positionOffset * RATIO_SCALE + (1 - RATIO_SCALE);
            sampleFragment.scaleImage(scale);
        }
    }

    // Once scrolling is done. Make sure the views are in the right scale (1 for center,
    // 0.7 for sides). Required as the onPageScrolled() method does not guarantee it
    // will interpolate to 1.0 precisely.
    @Override
    public void onPageScrollStateChanged(int state) {
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            setTextViewAlpha(1);
            ScaleableFragment sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager
                    .getAdapter()).getItem(pager.getCurrentItem());
            sampleFragment.scaleImage(1);
            sampleFragment.enableClicks();

            if (pager.getCurrentItem() > 0) {
                sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager.getAdapter())
                        .getItem(pager.getCurrentItem() - 1);
                sampleFragment.scaleImage(1 - RATIO_SCALE);
                sampleFragment.disableClicks();
            }

            if (pager.getCurrentItem() + 1 < pager.getAdapter().getCount()) {
                sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager.getAdapter())
                        .getItem(pager.getCurrentItem() + 1);
                sampleFragment.scaleImage(1 - RATIO_SCALE);
                sampleFragment.disableClicks();
            }
        }
    }
};

就是这样。我没有发布完整的解决方案，但我希望这足以让其他人开始。

附言在 3.0+ 上启用硬件加速。没有它，滚动在三星 galaxy tab 10.1 上看起来很不稳定。