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