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