ViewPagerInFragment 在Fragment中使用ViewPager

平时，我们都是在Activity中使用ViewPager,其实我们在Fragment中使用Fragment.

          这是整个工程下的Java文件，其中SingleFragmentActivity是通用类，MainFragment就是包含ViewPager的Fragment;WeixinFragment、FriendFragment、AdrressFragment、SettingFragment就是ViewPager可以滑动的四个Fragment.除了SingelFragmentActivity外，其他的Fragment对已一个布局文件。

      WeixinFragment、FriendFragment、AdrressFragment、SettingFragment四个Fragment分别加载对于的布局文件。

布局文件activity_fragment.xml只是一个通用的布局文件，由SingleFragmentActivity加载。

activity_fragment.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragmentContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

SingleFragmentActivity.java

public abstract class SingleFragmentActivity extends FragmentActivity {

    protected abstract Fragment createFragment();


    protected int getLayoutResId(){
        return R.layout.activity_fragment;
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(getLayoutResId());

        FragmentManager fragmentManager = getSupportFragmentManager();
        Fragment fragment = fragmentManager.findFragmentById(R.id.fragmentContainer);

        if (fragment == null){
            fragment = createFragment();
            fragmentManager.beginTransaction()
                    .add(R.id.fragmentContainer, fragment)
                    .commit();
        }
    }
}

    布局文件fragment_top.xml和fragment_bottom.xml是fragment_main.xml中头部与底部的布局文件，通过include嵌进fragment_main.xml布局中

fragment_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical">
    
    <include layout="@layout/fragment_top"/>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/fragment_main_viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:focusable="false">
    </android.support.v4.view.ViewPager>

    <include layout="@layout/fragment_bottom"/>

</LinearLayout>

 底部布局文件fragment_bottom.xml由四个ImageView组成，它们正常的时候使用灰色图标，在被点击的时候，图标使用绿色的按下图标。

fragment_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/weixin"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:id="@+id/weixin_imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_weixin_normal"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/address"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:id="@+id/address_imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_address_normal"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/find_friend"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:id="@+id/find_friend_imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_find_frd_normal"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/setting"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:id="@+id/setting_imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_settings_normal"/>
    </LinearLayout>

</LinearLayout>

在MainFragment中加载fragment_main.xml布局文件，并初始化四个Fragment,以及ViewPager

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mView = inflater.inflate(R.layout.fragment_main, container, false);

        // 初始化MainFragment
        initFragment();

        // 初始化ViewPager
        initViewPager();

        return mView;
    }

在initFragment( )方法中，找到ViewPager的id;四个包裹图片的LinearLayout的id,主要用于点击底部的图片时，切换对应的Fragment;四个ImagaView的id,主要用于切换Fragment时，改变图标的状态。

在initViewPager( )方法中，使用ArragList装载四个Fragment, 自定义适配器adapter并设置成ViewPager的是适配器。通过对ViewPager滑动状态的监听，设置不同的Fragment以及底部图标不同的状态。

private void initFragment() {
        mViewPager = (ViewPager) mView.findViewById(R.id.fragment_main_viewPager);

        // 四个LinearLayout
        mWeixin = (LinearLayout) mView.findViewById(R.id.weixin);
        mAddress = (LinearLayout) mView.findViewById(R.id.address);
        mFriend = (LinearLayout) mView.findViewById(R.id.find_friend);
        mSetting = (LinearLayout) mView.findViewById(R.id.setting);

        // 四个ImageView
        mWeixinImageView = (ImageView) mView.findViewById(R.id.weixin_imageView);
        mAddressImageView = (ImageView) mView.findViewById(R.id.address_imageView);
        mFrindImageView = (ImageView) mView.findViewById(R.id.find_friend_imageView);
        mSettingImageView = (ImageView) mView.findViewById(R.id.setting_imageView);


        mWeixin.setOnClickListener(this);
        mAddress.setOnClickListener(this);
        mFriend.setOnClickListener(this);
        mSetting.setOnClickListener(this);
    }

    private void initViewPager(){
        mWeixinFragment = new WeixinFragment();
        mAddressFragment = new AddressFragment();
        mFriendFragment = new FriendFragment();
        mSettingFragment = new SettingFragment();

        mArrayList = new ArrayList<Fragment>();
        mArrayList.add(mWeixinFragment);
        mArrayList.add(mAddressFragment);
        mArrayList.add(mFriendFragment);
        mArrayList.add(mSettingFragment);

        FragmentManager fm = getActivity().getSupportFragmentManager();
        mAdapter = new MyFragmentAdapter(fm, mArrayList);
        mViewPager.setAdapter(mAdapter);

        // 第一次进入应用界面时，设置底部的Weixin图片
        setTextViewState(0);

        // 对ViewPager滑动时进行监听
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                int currentItm = mViewPager.getCurrentItem();
                setTextViewState(currentItm);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.weixin:
                setSelect(0);
                break;
            case R.id.address:
                setSelect(1);
                break;
            case R.id.find_friend:
                setSelect(2);
                break;
            case R.id.setting:
                setSelect(3);
                break;
        }

    }

    private void setSelect(int i) {
        mViewPager.setCurrentItem(i);
        // 设置Fragment
        mAdapter.getItem(i);
        // 设置底部的图片
        setTextViewState(i);
    }


    // 选择底部的其中一个图片时，其他三个图片设为暗色
    private void setTextViewState(int currentItm) {
        // 获取资源
        Resources r = getResources();
        switch (currentItm){
            case 0:
                mWeixinImageView.setImageDrawable(r.getDrawable(R.drawable.tab_weixin_pressed));
                mAddressImageView.setImageDrawable(r.getDrawable(R.drawable.tab_address_normal));
                mFrindImageView.setImageDrawable(r.getDrawable(R.drawable.tab_find_frd_normal));
                mSettingImageView.setImageDrawable(r.getDrawable(R.drawable.tab_settings_normal));
                break;
            case 1:
                mWeixinImageView.setImageDrawable(r.getDrawable(R.drawable.tab_weixin_normal));
                mAddressImageView.setImageDrawable(r.getDrawable(R.drawable.tab_address_pressed));
                mFrindImageView.setImageDrawable(r.getDrawable(R.drawable.tab_find_frd_normal));
                mSettingImageView.setImageDrawable(r.getDrawable(R.drawable.tab_settings_normal));
                break;
            case 2:
                mWeixinImageView.setImageDrawable(r.getDrawable(R.drawable.tab_weixin_normal));
                mAddressImageView.setImageDrawable(r.getDrawable(R.drawable.tab_address_normal));
                mFrindImageView.setImageDrawable(r.getDrawable(R.drawable.tab_find_frd_pressed));
                mSettingImageView.setImageDrawable(r.getDrawable(R.drawable.tab_settings_normal));
                break;
            case 3:
                mWeixinImageView.setImageDrawable(r.getDrawable(R.drawable.tab_weixin_normal));
                mAddressImageView.setImageDrawable(r.getDrawable(R.drawable.tab_address_normal));
                mFrindImageView.setImageDrawable(r.getDrawable(R.drawable.tab_find_frd_normal));
                mSettingImageView.setImageDrawable(r.getDrawable(R.drawable.tab_settings_pressed));
                break;
            default:
                break;
        }
    }

     通过继承FragmentPagerAdapter，自定义自己的适配器。构造函数传入的参数分别为Fragment,ArrayList,这样保证适配器的通用性，下次我们可以将这个适配器在其他项目中使用。

MyFragmentAdapter.java

public class MyFragmentAdapter extends FragmentPagerAdapter {
    private static final String TAG = "MyFragmentAdapter";
    private ArrayList<Fragment> mFragmentList;

    public MyFragmentAdapter(FragmentManager fm, ArrayList<Fragment> list){
        super(fm);
        mFragmentList = list;
    }

    @Override
    public int getCount() {
        Log.i(TAG, "mFragmentList.size() " + mFragmentList.size());
        return mFragmentList.size();
    }

    @Override
    public Fragment getItem(int position) {
        Log.i(TAG, "position: " + position);
        return mFragmentList.get(position);
    }
}

 

这是最后我们完成的结果，代码我已经上传到GitHub上，可自行下载https://github.com/yxhuangCH/viewpagerinfragment