Android ViewPager - 如何将当前页面置顶？

Question

我有一个ViewPager/FragmentPagerAdapter组合，带有负页边距，以便页面略微重叠。问题是，中心页面不在顶部。它左边的页面遮挡了它。我希望中心页面始终显示在顶部。有没有一种优雅的方法来实现这个目标？

- user1464652

Answer 1

页面的z-order是根据它们的创建顺序确定的，因此后创建的页面会覆盖在先前创建的页面之上(参见下面的第一张图片)。

通常情况下，这不应该有任何问题，因为页面是并排排列的，没有重叠区域，所以z-order并不重要。但是，在多个可见页面有负边距（重叠）的情况下，所选页面可能会被旁边的页面部分遮挡。

克服这种问题的一种方法是在实例化期间保留页面的引用，并使用view.bringToFront()更改它的z-order。

将其放入代码中:

public class MyActivity extends Activity {

    private ViewPager vp = null;
    private SparseArray<View> viewCollection = new SparseArray<View>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        vp = (ViewPager)findViewById(R.id.viewpager);
        vp.setPageMargin(-20);
        vp.setOffscreenPageLimit(3);
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener(){
            @Override
            public void onPageSelected(int pos) {
                View view = viewCollection.get(pos);  // @@@ Get target page reference
                view.bringToFront();                  // @@@ change z-order to the top
            }
        });
        vp.setAdapter(new MyAdapter());
    }

    public class MyAdapter extends PagerAdapter {

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View pageLayout = getLayoutInflater().inflate(R.layout.page_layout, container, false);
            final Integer pageId = position;
            TextView pageText = (TextView)pageLayout.findViewById(R.id.page_id);
            pageText.setText(String.valueOf(position));
            pageText.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    vp.setCurrentItem(pageId);         // @@@ select the clicked page
                }
            });
            // paint gray shades onto the page background
            pageLayout.setBackgroundColor(Color.argb(255, position*40, position*40, position*40));

            viewCollection.put(position, pageLayout);  // @@@ store the reference
            container.addView(pageLayout);
            return(pageLayout);
        }

        @Override
        public int getCount() {
            return 8; // any arbitrary number
        }

        @Override
        public float getPageWidth(int position) {
            return(0.33f);
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return (view == obj);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View)object);
            viewCollection.remove(position);          // @@@ remove the reference
        }
    }
}

- chaco

---

哦兄弟。你太棒了。我已经尝试用viewpager实现这个把前面的行为三天了，但是一直没有成功。你救了我。非常非常感谢。 - Asad Rao

你有没有想过如何使用FragmentPagerAdapter来完成相同的事情，而不是使用PagerAdapter？ - mcdonaldjosh

我按照你的代码 vp.setPageMargin(-20); 进行了操作，谢谢保存。^^ - Hor Chanpheng