ViewPagerInFragment 在Fragment中使用ViewPager

来源：互联网发布：oracle手动创建数据库编辑：程序博客网时间：2024/06/10 05:01

平时，我们都是在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

0 0