android-viewpager在每个选项卡中有多个子片段

Question

This is giving me headache. Lets say my app has a ViewPager which contains 4 tabs. I want to have multiple sub-fragments within each tab. that means each tab would have more than just one view. I totally have no clue how to achieve this....

I have a FragmentActivity which gets load first and set my ViewPager

public class FragActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.frag_main);

        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        PagerAdapter adapter = new FFNPagerAdapter(getSupportFragmentManager());

        pager.setAdapter(adapter);
        pager.setOffscreenPageLimit(3);
        tabs.setViewPager(pager);
    }
}

I then have my FragmentPagerAdapter

public class PagerAdapter extends FragmentPagerAdapter implements TextAndIconTabProvider {
    private final String[] TITLES = { "FIRST", "SECOND", "THIRD", "FORTH" };

    public PagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment frag = new Fragment();
        switch (position) {
        case 1:
            frag = new FirstFrag();
            break;
        case 2:
            frag = new SecondFrag();
            break;
        case 3:
            frag = new ThirdFrag();
            break;
        case 4:
            frag = new ForthFrag();
            break;

        }

        return frag;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return TITLES.length;
    }
}

the above would give me a working ViewPager with 4 active tabs. Then I need to do all 4 individual Fragments. I'm giving out one example below.

public class FirstFrag extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.firstfrag, container, false);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);

        Button btn1 = (Button) getActivity().findViewById(R.id.btn1);
        btn1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                // what should I put in this block??????   
                Fragment fragment = new FirstFragSub1();
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                transaction.replace(R.id.pager, fragment); //<<------what should i replace???????
                transaction.commitAllowingStateLoss();
            }
        });
    }
}

The OnCreateView in FirstFragSub1 gets called but I don't see anything displayed on the screen. Basically just a blank. I know by replacing R.id.pager should not be the correct way, I'm just giving out an example of what I initial thought was.

Here is my FirstFragSub1

public class FirstFragSub1 extends ListFragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        Log.i("FirstFragSub1","onCreateView is called");
        return inflater.inflate(R.layout.subone, container, false);
    }
}

Can someone please help me? I really out of idea...Thanks

Answer 1

there is a great tutorial and github here that covers this in detail.

http://tausiq.wordpress.com/2014/06/06/android-multiple-fragments-stack-in-each-viewpager-tab/ https://github.com/tausiq/ViewPagerMultipleFragmentDemo

this covers handling the backstack and multiple tabs with multiple views per tab. hope this help I was searching for a similar solution when i read your question.

Answer 2

Have FrameLayouts in the view that is being inflated by the Fragment. And onCreateView, replace the FrameLayout by the sub fragments that you want.

Also, be careful not to use the Activity's FragmentManager. getFragmentManager returns the Activity's FragmentManager and that will lead to an undesirable result (Only one fragment inside your ViewPager would have the sub fragments loaded). Use the getChildFragmentManager function instead.