14

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

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

（PS 我不想使用 Gallery 小部件，那个组件很烂）。

这是我们在选择视图后需要显示的内容（仍然显示左视图和右视图）：

视图切换器

向左或向右甩动会将主视图移出，使其变暗并稍微减小一点，并与下一个或上一个视图相反。

4

4 回答 4

16

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

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();
            }
        }
    }
};

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

PS On 3.0+ 启用硬件加速。没有它，三星 Galaxy Tab 10.1 上的滚动看起来很不稳定。

于 2012-05-04T04:25:25.690 回答
4

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

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

<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 值使下一个片段的边缘可见，请使用您的特定构图。我还建议对每个片段进行构图。

于 2012-09-24T13:58:58.433 回答
2

好吧，这是一个可能的答案，可能与您正在寻找的内容接近，但并不完全是您正在寻找的内容：有一个名为ViewFlow的项目，我认为它能够通过指标通知用户有更多视图屏幕上。它还提供了在当前视图的左侧和右侧缓冲视图的能力，因此您可以通过基本上缩小它所看到的可用屏幕尺寸来查看代码以渲染它们的一小部分。

编辑：愚蠢的我；我应该在回答之前阅读最后一个问题。:) 不幸的是，我认为您不能使用 ViewFlipper 或 Viewpager 来做到这一点。

于 2012-04-03T21:21:13.790 回答
1

只需使用 ViewPager 并使用片段的宽度和边距。我已经这样做了，而且效果很好。

于 2012-05-14T20:05:14.827 回答