不要剪辑 ViewPager 页面 [英] Do not clip ViewPager pages

问题描述

我无法让我的 ViewPager 不剪切其页面内容.

I can't get my ViewPager not clipping its pages contents.

我目前在我的应用程序中使用带有 FragmentStatePagerAdapter 的 ViewPager.我有 3 页，每页显示不同的片段.一切正常，但现在我希望能够在我的页面范围之外进行绘制，如下图所示:

I'm currently using ViewPager with a FragmentStatePagerAdapter in my application. I have 3 pages, each page is showing a different fragment. Everything works fine, but now I want to be able to draw outside of my pages bounds, like in this image:

我在我的所有视图中将 clipChildren 和 clipToPadding 设置为 false 到需要在其范围之外绘制的视图，但这就是我明白了:我的视图会根据页面边界被剪裁.

I set clipChildren and clipToPadding to false in my all views parents to the views that needs to draw outside their bounds, but here's what I get : my views get clipped according to pages bounds.

一些附加信息:为了解决这个问题，我使用 hierarchyviewer 来检查我的视图层次结构并查看某些幕后"视图是否可能具有剪切行为.还有宾果游戏:我的每个片段的根视图都添加在 NoSaveStateFrameLayout 下.我怀疑这家伙夹它的孩子...

Some additional info : In order to fix that issue, I used hierarchyviewer to check my view hierarchy and see if some "under the hood" views could have a clipping behaviour. And bingo : each of my fragments' root views is added under a NoSaveStateFrameLayout. I suspect this guy to clip its children...

您认为我的最后一个假设是否正确?您将如何获得未剪辑的页面?

Is my last assumption correct in your opinion? How would you do to get unclipped pages?

推荐答案

有一些不同的视图需要禁用剪辑.首先，位于 ViewPager 根目录的 FrameLayout 需要禁用剪辑.您可以在初始化视图寻呼机的任何地方执行此操作.您还需要将屏幕外页面限制设置为 2，以允许在滑动期间加载额外的片段.没有这个，你会看到一个从 1->2 加载 3 的弹出窗口，并在 2 完成加载后将其溢出内容添加到 2(这会提前加载 2 和 3).

There are a few different Views that require disabled clipping. First, the FrameLayout that is at the root of the ViewPager needs to have clipping disabled. You can do this wherever you initialize your view pager. You also need to set the off-screen page limit to 2 to allow for an extra fragment to be loaded during a swipe. Without this, you'll see a pop going from 1->2 as 3 loads and adds it's overflow content to 2 once 2 has finished loading (this loads both 2 and 3 ahead of time).

mViewPager.setClipChildren(false);
mViewPager.setClipToPadding(false);
mViewPager.setOffscreenPageLimit(2);

其次，您在 FragmentStatePagerAdapter 中扩展的 XML 需要包含适当的标签，或者可以通过编程方式完成.最后，您还需要强制 NoSaveStateFrameLayout 不进行剪辑.这可以在 onViewCreated 中创建视图之后完成.这是一个示例片段:

Second, the XML you inflate in your FragmentStatePagerAdapter needs to include the appropriate tags or it can be done programmatically. Last, you need to force the NoSaveStateFrameLayout to not clip as well. This can be done after the view has been created in onViewCreated. Here's an example fragment:

public static class PlaceholderFragment extends Fragment {

    public static PlaceholderFragment newInstance() {
        PlaceholderFragment fragment = new PlaceholderFragment();
        return fragment;
    }

    public PlaceholderFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        LinearLayout rootView = (LinearLayout) inflater.inflate(R.layout.fragment_main, container, false);
        //This can be done in XML
        rootView.setClipChildren(false);
        rootView.setClipToPadding(false);
        return rootView;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        //This is the NoSaveStateFrameLayout - force it to not clip
        FrameLayout frameLayout = (FrameLayout) getView();
        frameLayout.setClipChildren(false);
        frameLayout.setClipToPadding(false);
    }
}

我已经测试过这个解决方案并且确信它有效.

I have tested this solution and am certain it works.

完整的活动示例:https://gist.github.com/grantamos/d664f01a30f9ad97ba53

这篇关于不要剪辑 ViewPager 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！