在选项卡中使用带有同步列表视图的ViewPager

Question

我有一个含有两个选项卡（页）的viewpager。这两个选项卡都包含了一个带有多个项目（行）的listview。我希望当我在两个选项卡之间滚动时，两个选项卡中的listview能够同步显示相同的行。

例如，当我在第一个选项卡中显示列表视图的第10-15行时，当我滚动到第二个选项卡时，我希望再次显示第二个选项卡中列表视图的第10-15行。

这种效果是否可行？我无法在viewpager中找到任何属性来帮助我。我该如何通过编程实现这种效果？

- kallianas

Answer 1

问题已解决。 如果其他人需要这种效果，以下是我如何做到的：

public class myViewPager extends Fragment implements OnPageChangeListener {
    ...         
    ViewPager viewPager;

    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
            Bundle savedInstanceState) 
    {
        ...

        //init viewPager
        ...
        ...

        viewPager.setOnPageChangeListener(this);
        return view;
    }

    @Override
    public void onPageSelected(int position) {
        // get the 2 page(tabs) fragments (I am using FragmentStatePagerAdapter) [*1]
        MyFragmentPagerAdapter a = (MyFragmentPagerAdapter) viewPager.getAdapter();     
        MyFragment selectedFrag = (MyFragment) a.instantiateItem(viewPager, position);      
        MyFragment previousFrag = (MyFragment) a.instantiateItem(viewPager, (position == 0) ? 1 : 0);

        // get 1st visible item position index & item offset value from top  [**2]
        int index = previousFrag.listView.getFirstVisiblePosition();
        View view = previousFrag.listView.getChildAt(0);
        int top = (view == null) ? 0 : view.getTop();
        //set the listView to the synchronized position
        selectedFrag.listView.setSelectionFromTop(index, top);
    }

    ...

    private class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Bundle args = new Bundle();
            args.putInt("position", position);
            return Fragment.instantiate(getActivity(), MyFragment.class.getName(), args);
        }
        ...
        ...
    }

    public static class MyFragment extends Fragment {
        ...

        private ListView listView;

        ...
        // CreateView ...
        // init listview ...
        // do other stuff ...
        ...
    }

}

相关帮助：

[*1] 在这里更新ListFragment中的数据

[**2] 在这里同步两个ListView位置

干杯.. :)

- kallianas

---

这个实现的用户体验不太理想，因为只有在滚动到页面约90%的位置时才会调用 onPageSelected() 方法。这将仍然显示列表在其原始位置，然后突然跳到正确位置。更优雅的解决方案是使用 onPageScrolled() 方法。 - Christopher Perry