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

Question

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

我还想给左视图和侧视图添加一些效果，比如调暗和缩放，然后再缩小一点。是否可以使用stock ViewFlipper或ViewPager，或者我必须推出自己的视图组，即封面流(http://www.inter-fuser.com/2010/01/android-coverflow-widget.html)?

（附言我不想使用图库小部件，该组件很糟糕）。

一旦选择了一个视图，这就是我们需要显示的内容(左视图和右视图仍然显示):

向左或向右移动会将主视图移出，变暗或缩小一点，对下一个或上一个视图做相反的操作。

Answer 1

嗯，这里有一个潜在的答案，可能接近你正在寻找的，但不完全是你正在寻找的:有一个名为ViewFlow的项目，我认为它提供了通过屏幕上的指示器通知用户有更多视图的能力。它还提供了将视图缓冲到当前视图左侧和右侧的能力，因此您可以通过缩小它所认为的可用屏幕大小来查看代码以呈现其中的一小部分。

编辑：愚蠢的我；我应该在回答之前阅读最后一个问题。：）不幸的是，我不认为你可以用ViewFlipper或Viewpager做到这一点。

Answer 2

我用它玩了一些，我的解决方案很简单。我把它贴在这里，以防有人感兴趣。

首先，每个片段的布局应该允许两侧有一些间隙。我发现最简单的方法是使用权重：

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.1" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.8"
    android:orientation="vertical" >

    <!-- fragment contents go here -->

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.1" />

这将在两侧留下10%的利润。确保不要设置这些内容的背景，因为它将覆盖相邻片段。现在对于寻呼机本身：正如AngraX所解释的那样，您需要使用负边距，但也要确保预先加载后续片段，因为它们在定期之前是可见的。我得到了很好的效果：

    mPager = (ViewPager) findViewById(R.id.pager);
    mPager.setAdapter(mAdapter);
    mPager.setPageMargin(getResources().getDisplayMetrics().widthPixels / -7);
    mPager.setOffscreenPageLimit(2);

-7值使下一个片段的边缘可见，使用您的特定构图。我还建议对每个片段进行分帧。

Answer 3

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

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

稍后，我们将ViewPager的页边距设置为侧边距的2倍。这会使视图重新对齐。但是，此时，ViewPager将显示多个视图。

您所要做的就是对左右视图应用转换（缩放）（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选项卡10.1上滚动看起来很不稳定。