1

I need to create an app that has 2 special behaviors on a viewPager that has 3 pages:

  1. On page 0, there are 2 images, one on top of the other. the background image doesn't move when going from page 0 to page 1 , but it will move when going from page 1 to page 2 (and vice versa) . On page 1, there is nothing besides the background image from page 0.

    In short, to the user, it seems as if the image from page 0 actually unveils the content of page 1 when scrolling to it (since page 1's content is behind page 0).

  2. Some pages would have on top views that move faster than the viewPager, providing an effect as if they float above it, in a semi-3d way . Maybe show up after half the page was scrolled.

Both special behaviors are very hard to think about, and I would like to ask for your suggestions of how to achieve them.

Another tricky thing is that I need to use an indicator of the viewPager, so even if I decide to use multiple viewPagers, I would have to deal with this issue too.

Community
  • 1
  • 1
android developer
  • 114,585
  • 152
  • 739
  • 1,270

1 Answers1

0

Copy the background image in both Page 0 and Page 1, and try changing the image offset in onPageScrolled callback to achieve your goal~

FragmentPic is a simple fragment with only one imageview child as iv

    /*this method change position of image to move it against its parent and make it looks static to the screen */
    public void changeImageOffset(int offset) {
        RelativeLayout.LayoutParams lp = (LayoutParams) iv
                        .getLayoutParams();
                lp.leftMargin = offset;
                lp.rightMargin = -offset;
                iv.setLayoutParams(lp);
    }

in the viewPager activity

    mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrolled(int position, float arg1, int arg2) {
                ((FragmentPic) mAdapter.getItem(position))
                        .changeImageOffset(arg2);

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });

The above code can make the page1 static and the page2 covering it from right to left.

Bolton
  • 2,226
  • 3
  • 25
  • 29
  • but i need the image to stay static (no movement) between page 0 and page 1, or maybe i didn't understand you? – android developer May 08 '13 at 09:38
  • move the imageview relative to nested fragment to keep it static to the screen, I mean. – Bolton May 08 '13 at 09:43
  • i don't understand. you are talking about the background imageView. do you say it won't be a part of the fragment? you mean i should put it in a frameLayout and move it along with the viewPager? if so, how would i make it look like it's moving between page 1 to 2 ? – android developer May 08 '13 at 11:10
  • what would changeImageOffset do? do you mean to put 2 viewPager instances , one above the other, and update the background one when you move between page 1 and page 2? – android developer May 08 '13 at 13:20
  • Changing the offset to make the background look like not moving when the viewpager is paging. There's only one viewpager, you could choose whether to make the background static depond on the position argument in method onPageScroll – Bolton May 08 '13 at 13:40
  • shouldn't i check the value of the position in onPageScrolled ? especially since i need to change the location of the imageView of page 0 alone, no? – android developer May 08 '13 at 14:08
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29630/discussion-between-bolton-and-android-developer) – Bolton May 09 '13 at 04:40