How to manage ViewPages from another page

Question

I have a ViewPager with 3 pages with a listView on each page. I want to animate listView so that when the user moves horizontally for the next page, the listView elements should fit the width of the next page.

ie The first element should be fully pressed, the second should be visible halfway, thirst should be visible for half a second, etc.

This type of animation is already in mi3 xiamo for the contact list.

In the above image, I am scrolling in the right direction. Pay attention to the visibility of the Recent items.

It would be very helpful if someone helped me make this animation. Please share some links or tips on animating listView according to page changes in ViewPager .

Answer 1

Have you ever studied the OnPageChangeListener.onPageScrolled(int position, float positionOffset) method that was used as the Swip ViewPager listener? You can do something with positionOffset , its percentage value is from 0 to 1 or a spread informing us about how much of the body of the next page is displayed, process the Last Call list item by this value, set them left -axis in the getView method ( )

------------------ Update 1 on 2014-10-03 ------------------

I am trying to perform this effect, but I cannot get this animated work at this time. I already do that the ListView reported a shift offset (delta) and does everything in my capabilities for its elements, it is going to close the effect that we wanted. But the very difficult part is that we have to figure out how compatible with scrolling or rollover with your finger and directly switching method.

I have been trying for three days to look for the ViewPager rule, check the ViewPager and the ListView source, but it does not return positive. So I push the project on GitHub.

------------------ Update 2 in 2014-10-04 ------------------

The next GIF will explain the animation exactly.

------------------ Update 3 on 2014-10-07 ------------------

Well, it turned out that I was not able to fully reproduce this animation. To be a valuable ending, at least I did my work on the project, I also do my best to get closer to the original effect. Check out my first GitHub update project to complete all the work.

Answer 2

You must use PageTransformer to apply the transform to each page of the ViewPager you scroll. The basics are described in Android Developer Training .

Below is some code that implements what you need in a very simple way:

 public class SwipeAnimationActivity extends Activity { private static final String[] COUNTRIES = new String[]{ "Belgium", "France", "Italy", "Germany", "Spain", "Austria", "Russia", "Poland", "Croatia", "Greece", "Ukraine", }; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_swipe_animation); viewPager = (ViewPager) findViewById(R.id.view_pager); viewPager.setAdapter(createPagerAdapter()); viewPager.setPageTransformer(false, createPageTransformer()); } private FragmentPagerAdapter createPagerAdapter() { return new FragmentPagerAdapter(getFragmentManager()) { @Override public Fragment getItem(int position) { ListFragment listFragment = new ListFragment(); listFragment.setListAdapter(createListAdapter()); return listFragment; } @Override public int getCount() { return 3; } }; } private ArrayAdapter<String> createListAdapter() { return new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, COUNTRIES); } private ViewPager.PageTransformer createPageTransformer() { return new ViewPager.PageTransformer() { @Override public void transformPage(View page, float position) { ListView listView = (ListView) page.findViewById(android.R.id.list); int childCount = listView.getChildCount(); float offset = .5f * listView.getWidth(); for (int i = 0; i < childCount; i++) { View childView = listView.getChildAt(i); childView.setTranslationX(i * offset * position); } } }; } } 

You can easily adjust transformPage(View page, float position) to achieve the desired effect (perhaps using interpolators to provide some weakening of the animation).