Fragment与ViewPager嵌套的简单应用

╮(╯▽╰)╭，说好的每天都要要求自己总结呢？昨天又偷懒了，NONONO，临睡前还是及时做下今天的总结吧，话不多说，主要理下思路。

那今天就看下Fragment与ViewPager的常规使用，比较常见的APP都会有这样一个界面，底部按钮可以切换Fragment，而在某个Fragment又可以嵌套ViewPager做页卡的切换，注意前面在使用ViewPager时，设置适配器直接使用的是PagerAdapter，此适配器接受的是View，而若ViewPager子页卡是Fragment时，可以使用FragmentPagerAdapter，接受的是Fragment的子类。

虽然简单，那就话不多少，理下思路看看是怎么实现的？

1、定义布局：首先你的要定义主布局（内容区域以及选择页卡的区域），定义好主布局之后，就需要考虑子页卡（Example：One，Two，Three为三个子页卡，而在One页卡中包含ViewPager(One1,One2)；

2、定义好布局之后肯定是要创建子类继承与Fragment，通过LayoutInflater加载布局，然后返回view。

3、在mainActivity中加载你的Fragment。

第一步：定义主布局文件，内容区域和下方的选择区域

[code]<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout 
        android:id="@+id/layout_content"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="80dip"
        android:background="#f98f98"
        android:orientation="horizontal">

        <Button 
            android:id="@+id/btn_1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            style="@style/AppBaseTheme"
            android:text="@string/btn_str_1"/>

        <Button 
            android:id="@+id/btn_2"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            style="@style/AppBaseTheme"
            android:text="@string/btn_str_2"/>

        <Button 
            android:id="@+id/btn_3"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            style="@style/AppBaseTheme"
            android:text="@string/btn_str_3"/>
    </LinearLayout>

</LinearLayout>

第二步：创建Fragment子类略，在MainActivity中实现Fragment

[code]public class MainActivity extends FragmentActivity implements OnClickListener{

    //Fragment分页
    private FragmentOne fragmentOne;
    private FragmentTwo fragmentTwo;
    private FragmentThree fragmentThree;
    //FragmentManager
    private FragmentManager manager;
    //FragmentTransaction
    private FragmentTransaction transaction;
    //底部用于切换Fragment的Button
    private Button b1,b2,b3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化底部切换的Button
        initButtons();
        //初次进入程序，加载FragmentOne
        selectFragmentTab(0);
    }

    private void initButtons() {
        b1 = (Button) findViewById(R.id.btn_1);
        b2 = (Button) findViewById(R.id.btn_2);
        b3 = (Button) findViewById(R.id.btn_3);
        b1.setOnClickListener(this);
        b2.setOnClickListener(this);
        b3.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btn_1:
            selectFragmentTab(0);//显示索引为0的Fragment，也就是第一个Fragment
            break;
        case R.id.btn_2:
            selectFragmentTab(1);
            break;
        case R.id.btn_3:
            selectFragmentTab(2);
            break;
        default:
            break;
        }
    }

    /**
     * 
     * @param index 要显示的Fragment的索引
     */
    private void selectFragmentTab(int index) {
        //通过FragmentManager开启事物Transaction，然后通过事物Transaction来管理Fragment
        manager = getSupportFragmentManager();
        transaction = manager.beginTransaction();
        //在我们每次选择切换Fragment时，先隐藏所有的Fragment，再来show出你要切换的Fragment
        hideFragment(transaction);
        switch (index) {
        case 0:
            //做这样的判断是为了:当我们点击相同的按钮，就不会重复new出Fragment实例了。
            if (fragmentOne == null){
                fragmentOne = new FragmentOne();
                transaction.add(R.id.layout_content, fragmentOne);
            }else {
                transaction.show(fragmentOne);
            }
            break;
        case 1:
            if (fragmentTwo == null){
                fragmentTwo = new FragmentTwo();
                transaction.add(R.id.layout_content, fragmentTwo);
            }else {
                transaction.show(fragmentTwo);
            }
            break;
        case 2:
            if (fragmentThree == null){
                fragmentThree = new FragmentThree();
                transaction.add(R.id.layout_content, fragmentThree);
            }else {
                transaction.show(fragmentThree);
            }
            break;
        default:
            break;
        }
        //提交事务
        transaction.commit();
    }

    /**
     * 隐藏Fragment
     * @param transaction2 管理Fragment事务
     */
    private void hideFragment(FragmentTransaction transaction2) {
        if (fragmentOne !=null){
            transaction2.hide(fragmentOne);
        }
        if (fragmentTwo !=null){
            transaction2.hide(fragmentTwo);
        }
        if (fragmentThree !=null){
            transaction2.hide(fragmentThree);
        }
    }

}

注意：此处是通过FragmentManager的add与hide方法来对Fragment进行操作的，这样不会造成在切换Fragment时混乱，而在今天使用replace方法时出现了混乱，到底是不是这样还需要明天做进一步的验证！！！

第三步：因为要想在某一个Fragment中嵌套ViewPager，如在FragmentOne中嵌套使用ViewPager，而ViewPager加载的是Fragment，代码如下：

[code]public class FragmentOne extends Fragment implements OnClickListener{

    private ArrayList<Fragment> fragments;//Fragment 数组
    private MainFragment_1 main_1; //TabFragmentOne
    private MainFragment_2 main_2; //TabFragmentTwo
    private TextView t1,t2; //用于切换的TextView
    private ViewPager viewPager;//viewPager

    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.layout_fragment_1, null);
        init(view);
        return view;
    }

    /**
     * 初始化控件
     * @param view viewGroup
     */
    private void init(View view) {
        // 通过viewGroup来找到控件
        t1 = (TextView) view.findViewById(R.id.tab_1);
        t2 = (TextView) view.findViewById(R.id.tab_2);
        t1.setOnClickListener(this);
        t2.setOnClickListener(this);

        //将TabFragment 添加到FragmentList中
        main_1 = new MainFragment_1();
        main_2 = new MainFragment_2();
        fragments = new ArrayList<Fragment>();
        fragments.add(main_1);
        fragments.add(main_2);

        //ViewPager设置适配器及监听
        viewPager = (ViewPager) view.findViewById(R.id.viewpager);
        viewPager.setAdapter(new MyFragmentPagerAdapter(getChildFragmentManager(), fragments));
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int arg0) {
                switch (arg0){
                case 0:
                    viewPager.setCurrentItem(0);
                    break;
                case 1:
                    viewPager.setCurrentItem(1);
                    break;
                }
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.tab_1:
            viewPager.setCurrentItem(0);
            break;
        case R.id.tab_2:
            viewPager.setCurrentItem(1);
            break;
        default:
            break;
        }
    }

    class MyFragmentPagerAdapter extends FragmentPagerAdapter{

        private ArrayList<Fragment> fragmentList;

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

        public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> fragments) {
            super(fm);
            this.fragmentList = fragments;
        }

        @Override
        public Fragment getItem(int arg0) {
            return fragmentList.get(arg0);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }

    }

}

附上简单的效果图：



附上Demo源码：

简单的实现就差不多这样了吧，明天将会具体研究Fragment的生命周期，ActionBar与ToolBar。