Andorid ViewPager+PageAdapter+Fragment实现多个tab页

一、文章内容

现在常见的Android或者iOS应用中都可以看到一个页面的下面有多个tab,点击不同的tab页面重新加载。现使用Android提供的ViewPager、PageAdapter和Fragment简单实现这一功能。

二、ViewPager简介

首先为了让页面能够左右滑动，我们需要采用ViewPager这一Android官方提供的组件。在Android Reference中有提到，ViewPager让用户可以左右滑动来切换页面，当然也可以通过点击底部的tab来切换页面。使用ViewPager方式简单，需要以下两步：

• 添加相应的布局文件

<android.support.v4.view.ViewPager
    android:id="@+id/t_ViewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

• 在代码中加载布局文件并显示

ViewPager t_ViewPager = (ViewPager) findViewById(R.id.t_ViewPager);

但viewpager具体的职责应该负责加载、缓存view页面和切换显示不同的fragment。加载和缓存view暂且不深入讨论，对于滑动页面显示新的fragment，这里简单的说一下。

三、OnPageChangeListener简介

OnPageChangeListener是ViewPager类内部的一个接口，它就是负责对界面滑动的监听。它总共有三个方法，源码如下：

public interface OnPageChangeListener {

        /**
         * This method will be invoked when the current page is scrolled, either as part
         * of a programmatically initiated smooth scroll or a user initiated touch scroll.
         *
         * @param position Position index of the first page currently being displayed.
         *                 Page position+1 will be visible if positionOffset is nonzero.
         * @param positionOffset Value from [0, 1) indicating the offset from the page at position.
         * @param positionOffsetPixels Value in pixels indicating the offset from position.
         */
        void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

        /**
         * This method will be invoked when a new page becomes selected. Animation is not
         * necessarily complete.
         *
         * @param position Position index of the new selected page.
         */
        void onPageSelected(int position);

        /**
         * Called when the scroll state changes. Useful for discovering when the user
         * begins dragging, when the pager is automatically settling to the current page,
         * or when it is fully stopped/idle.
         *
         * @param state The new scroll state.
         * @see ViewPager#SCROLL_STATE_IDLE
         * @see ViewPager#SCROLL_STATE_DRAGGING
         * @see ViewPager#SCROLL_STATE_SETTLING
         */
        void onPageScrollStateChanged(int state);
    }

三个方法共同处理页面滑动相关的监听，第一个方法onPageScrolled(int position, float positionOffset, int positionOffsetPixels)是在页面滑动过程中不断的调用；第二个方法onPageSelected(int position)会在一个新的页面被选中时被调用(页面被选中也有相应的判定法则)；第三个方法onPageSelected(int position），会在用户的滑动状态改变时调用。OnPageChangeListener解决的是动作相关的问题，但数据我们还没有解决，也就是存放所以我们还需要一个存放所有的view的组件，我们使用FragmentPagerAdapter，用来存放所有的fragment。

四、FragmentPagerApapter简介
FragmentPagerApapter继承自PagerAdapter，所以我们可以新建一个类，继承FragmentPagerApapter并实现它的一些方法来存放所有的fragment。FragmentPagerApapter主要的管理fragment的方法如下：

    @Override
    public Fragment getItem(int position) {

        return fragments.get(position);
    }

    @Override
    public int getItemPosition(Object object) {
        return super.getItemPosition(object);
    }

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

通过方法名就能知道每个方法时有什么作用，就不再赘述。

四、应用demo

• 创建ViewPager

ViewPager t_ViewPager = (ViewPager) findViewById(R.id.t_ViewPager);

• 自定义一个adapter，继承FragmentPagerAdapter并实现OnPageChangeListener

//这种实现参考了GitHub上一个开源项目(https://github.com/yingLanNull/AlphaTabsIndicator)，但对刷新自己重新实现了一下

private class AdapterAndListener extends FragmentPagerAdapter implements ViewPager.OnPageChangeListener {

    private List<Fragment> fragments = new ArrayList<>();
    private String[] titles = {"班级", "发布", "我"};

    public MainAdapter(FragmentManager fm) {
        super(fm);
        fragments.add(TextFragment3.newInstance(titles[(int)(Math.random()*3)]));
        fragments.add(TextFragment2.newInstance(titles[(int)(Math.random()*3)]));
        fragments.add(TPersonalInfoFragment.getInstance(loginResult));
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getItemPosition(Object object) {
        return super.getItemPosition(object);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
    
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

        if (position==2){

            ((TPersonalInfoFragment)fragments.get(position)).update();
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

}

这里的AdapterAndListener在继承FragmentPagerAdapter的同时并实现了ViewPager.OnPageChangeListener接口，所以它在管理所有页面的同时可以对页面的动作进行监听，根据用户的动作(如切换页面)而更新相应的方法。如：

    @Override
    public void onPageSelected(int position) {

        if (position==2){

            ((TPersonalInfoFragment)fragments.get(position)).update();
        }
    }
    

当用户滑动到第三个界面时，则调用对应的fragment的更新方法

• 自定义fragment的设计

 public class TPersonalInfoFragment extends Fragment {
 
     private JSONObject shownData;
     private TextView usernameView;
     private TextView nameView;
     private TextView typeView;
     private TextView genderView;
     private TextView emailView;
     private TextView schoolIdView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View personalInfoView = inflater.inflate(R.layout.fragment_teacher_personal, container, false);
        Log.d("teacher","done2");
        usernameView = (TextView) personalInfoView.findViewById(R.id.t_username);
        nameView = (TextView) personalInfoView.findViewById(R.id.t_name);
        typeView = (TextView) personalInfoView.findViewById(R.id.t_type);
        genderView = (TextView) personalInfoView.findViewById(R.id.t_gender);
        emailView = (TextView) personalInfoView.findViewById(R.id.t_email);
        schoolIdView = (TextView) personalInfoView.findViewById(R.id.t_schoolId);
        if (shownData!=null){
            try {
                usernameView.setText(shownData.getString("username"));
                nameView.setText(shownData.getString("name"));
                typeView.setText(DataTransform.transformType(shownData.getString("type")));
                genderView.setText(DataTransform.transformGender(shownData.getString("gender")));
                emailView.setText(shownData.getString("email"));
                schoolIdView.setText(shownData.getString("schoolId"));
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
        return personalInfoView;
    }

    public static TPersonalInfoFragment getInstance(JSONObject data){
        TPersonalInfoFragment fragment = new TPersonalInfoFragment();
        Log.d("teacher","done1");
        fragment.shownData = data;
        return fragment;
    }

    public void update(){
        UserInfo userInfo = (UserInfo) getActivity().getApplication();
        final JSONObject param = new JSONObject();
        try {
            param.put("username",userInfo.getUserName());
            param.put("password",userInfo.getPassword());
        } catch (JSONException e) {
            e.printStackTrace();
        }
        final Handler handler = new Handler();
        new Thread(new Runnable() {
            @Override
            public void run() {
                final JSONObject newData = NetUtil.myPost("/user/auth",param);
                handler.post(new Runnable() {
                    @Override
                    public void run() {
                        if (!shownData.equals(newData)){
                            shownData = newData;
                            try {
                                usernameView.setText(newData.getString("username"));
                                nameView.setText(newData.getString("name"));
                                typeView.setText(DataTransform.transformType(newData.getString("type")));
                                genderView.setText(DataTransform.transformGender(newData.getString("gender")));
                                emailView.setText(newData.getString("email"));
                                schoolIdView.setText(newData.getString("schoolId"));
                            } catch (JSONException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                });
            }
        }).start();
    }
}

在TPersonalInfoFragment中，提供一个获取TPersonalInfoFragment 实例getInstance方法，需要传入用户登录之后服务器返回的一个JsonObject，然后根据onCreateView()方法在创建fragment界面的时候调用，设置相应的数据并展示。此外，TPersonalInfoFragment中还有一个update()方法，在实现onPageSelected(int position)方法时，调用这个update()方法，从服务器获取新的数据并更新不同组件上的数据，从而实现刷功能。(注意：这边请求服务端数据必须重新开启一个线程执。)