ViewPager with FragmentPagerAdapter

http://xufei.logdown.com/posts/2015/01/04/viewpager-with-fragmentpageradapter

使用 Fragment 和 ViewPager 实现不同pager.

ViewPager 的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/yellow">

    <android.support.v4.view.ViewPager
        android:id="@+id/vpPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:paddingBottom="4dp"
            android:paddingTop="4dp" />

    </android.support.v4.view.ViewPager>

</LinearLayout>

编写 Fragment

public class FirstFragment extends Fragment {
    // Store instance variables
    private String title;
    private int page;

    // newInstance constructor for creating fragment with arguments
    public static FirstFragment newInstance(int page, String title) {
        FirstFragment fragmentFirst = new FirstFragment();
        Bundle args = new Bundle();
        args.putInt("someInt", page);
        args.putString("someTitle", title);
        fragmentFirst.setArguments(args);
        return fragmentFirst;
    }

    // Store instance variables based on arguments passed
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        page = getArguments().getInt("someInt", 0);
        title = getArguments().getString("someTitle");
    }

    // Inflate the view for the fragment based on layout XML
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_first, container, false);
        TextView tvLabel = (TextView) view.findViewById(R.id.tvLabel);
        tvLabel.setText(page + " -- " + title);
        return view;
    }
}

这里只写一个Fragment 例子，其他基本一样。

编写 Adapter

public static class MyPagerAdapter extends FragmentPagerAdapter {
    private static int NUM_ITEMS = 3;

    public MyPagerAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @Override
    public int getCount() {
        return NUM_ITEMS;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) { // 根据 position 设置每个Fragment View
        case 0: 
            return FirstFragment.newInstance(0, "Page # 1");
        case 1: 
            return FirstFragment.newInstance(1, "Page # 2");
        case 2: 
            return SecondFragment.newInstance(2, "Page # 3");
        default:
          return null;
        }
    }

    @Override
    public CharSequence getPageTitle(int position) {
      return "Page " + position;
    }
}

在 FragmentActivity 中使用 Adapter

使用

public class MainActivity extends FragmentActivity {
    FragmentPagerAdapter adapterViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        ViewPager vpPager = (ViewPager) findViewById(R.id.vpPager);
        adapterViewPager = new MyPagerAdapter(getSupportFragmentManager());
        vpPager.setAdapter(adapterViewPager);
    }

    // ...
}

在 Fragment 中使用 Adapter

当 APP 本身已经用 FragmentTabHost 实现了底部 Tab 功能，现在需要在其中一个 Fragment 实现顶部 Tab 功能时，就需要在 Fragment 中使用 ViewPager 。

public class Fragment2 extends Fragment {
    private ViewPager mViewPager;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_content_2, null);
        mViewPager = (ViewPager) view.findViewById(R.id.vpPager);
        mPagerAdapter = new MyPagerAdapter(getFragmentManager());
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setOffscreenPageLimit(3); // 设置ViewPager个数

        controlView();

        return view;
    }

    //....
}

在使用过程中遇到 Bug，重现的步骤是第一次点击 ViewPager Fragment ，再点击一个其他的 Fragment ，再点击回页面就会崩溃。报错信息:

The specified child already has a parent. You must call removeView() on the child's parent first.

在最初实现中我使用如下方式创建View

public class Fragment2 extends Fragment {
    private View mView;
    private ViewPager mViewPager;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mView = getActivity().getLayoutInflater().inflate(R.layout.fragment_content_2, null);
        mViewPager = (ViewPager) mView.findViewById(R.id.vpPager);
        mPagerAdapter = new MyPagerAdapter(getFragmentManager());
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setOffscreenPageLimit(2);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return mView;
    }
}

这种方式的好处在与只需要在 onCreate 时把 View 创建好就行。但是在 Fragment 和 Fragment ViewPager 组合使用会导致Bug。

设置 OnPageChangeListener

private void controlView() {
    mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Toast.makeText(getActivity().getApplicationContext(),
                    "选择页面: " + position, Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

Resource

http://stackoverflow.com/questions/23149981/fragments-the-specified-child-already-has-a-parent-you-must-call-removeview