开源中国源码学习UI篇（三）之ViewPager+Fragment的使用分析

    今天，来进行ViewPager多页面滑动的学习，之前的学习笔记如下。

    ViewPager是Android v4包里面的类，可以让用户切换当前的Fragment。

一、定义基础类BaseViewPagerFragment

    BaseViewPagerFragment类继承于BaseFragment，主要是重写onCreateView()和onViewCreated()。

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

	@Override
	public void onViewCreated(View view, Bundle savedInstanceState) {
		
		 mTabStrip = (PagerSlidingTabStrip) view
	                .findViewById(R.id.pager_tabstrip);

	     mViewPager = (ViewPager) view.findViewById(R.id.pager);
//	     mErrorLayout = (EmptyLayout) view.findViewById(R.id.error_layout);
	     mTabsAdapter = new ViewPagerFragmentAdapter(getChildFragmentManager(),
	             mTabStrip, mViewPager);
	     setScreenPageLimit();//这两个函数都是在父类中书写的
	     onSetupTabAdapter(mTabsAdapter);
	}

    对应的R.layout.base_viewpage_fragment，其中PagerSlidingTabStrip为专为ViewPager定制的滑动选项卡。注BaseViewPagerFragment类的具体实现，这里不再详述，有兴趣的话看下面的工程代码。

 <!-- 导航标题栏 -->

    <com.example.testui.widget.BaseViewPagerFragment类
        android:id="@+id/pager_tabstrip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/sliding_tab_strip_background"
        app:allowWidthFull="true"
        app:slidingBlock="@drawable/image_sliding_block" >
    </com.example.testui.widget.PagerSlidingTabStrip>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        style="@style/fill_fill"
        android:layout_below="@id/pager_tabstrip">
    </android.support.v4.view.ViewPager>

二、viewPager数据适配类ViewPagerFragmentAdapter

    主要重写getItem()和getCount()，来为viewPager涉及的Fragment配置。Fragment.instantiate是fragment实例化的一种方式。

@Override
	public Fragment getItem(int pos) {
		//mTabs的类型为ArrayList<ViewPageInfo>
		ViewPageInfo info = mTabs.get(pos);
		//实例化一个Fragment对象
		return Fragment.instantiate(mContext, info.clss.getName(),info.args);
	}

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

    此外，需要将fragment添加到viewPager中，这里编写了addTab()和addFragment()函数。这两个函数，将fragment添加到mtabs，从而在getItem中或得对应的fragment。

//addTab在NewsViewPagerFragment等中调用
	public void addTab(String title, String tag, Class<?> clss, Bundle args) {
        ViewPageInfo viewPageInfo = new ViewPageInfo(title, tag, clss, args);
        addFragment(viewPageInfo);
    }
	
	private void addFragment(ViewPageInfo info) {
        if (info == null) {
            return;
        }
        // 加入tab title
        View v = LayoutInflater.from(mContext).inflate(
                R.layout.base_viewpage_fragment_tab_item, null, false);
        TextView title = (TextView) v.findViewById(R.id.tab_title);
        title.setText(info.title);
        //专为ViewPager定制的滑动选项卡
        mPagerStrip.addTab(v);

        mTabs.add(info);
        notifyDataSetChanged();
    }

三、界面实现类NewsViewPagerFragment

    NewsViewPagerFragment继承第一步所写的BaseViewPagerFragment类。通过在NewsViewPagerFragment类中，将关键数据保存到ViewPagerFragmentAdapter的实例中，实现 BaseViewPagerFragment类的onViewCreated()方法，从而完成界面的数据适配。由于，初始化Fragment时需要Bundle类型，因此下面根据形参类型的不同，编写getBundle()的两个函数。此外addTab()方法中的NewsFragment和BlogFragment均继承于BaseListFragment<News>和BaseListFragment<Blog>，类里面没有额外的函数。BaseListFragment在上一篇创建，为有刷新控件和listView的Fragment。

//定义于父类BaseViewPagerFragment的抽象方法
	@Override
	protected void onSetupTabAdapter(ViewPagerFragmentAdapter adapter) {
		String[] title = getResources().getStringArray(
                R.array.news_viewpage_arrays); //资讯、热点、博客、推荐
		//此函数，title用于显示每个fragment的标题，第二个参数为tag,第三和第四参数用于初始化Fragment
        adapter.addTab(title[0], "news", NewsFragment.class,
                getBundle(NewsList.CATALOG_ALL));
        adapter.addTab(title[1], "news_week", NewsFragment.class,
                getBundle(NewsList.CATALOG_WEEK));
        adapter.addTab(title[2], "latest_blog", BlogFragment.class,
                getBundle(BlogList.CATALOG_LATEST));
        adapter.addTab(title[3], "recommend_blog", BlogFragment.class,
                getBundle(BlogList.CATALOG_RECOMMEND));
	}
	
	private Bundle getBundle(int newType) {
        Bundle bundle = new Bundle();
        //Bundle类是一个key-value对
        bundle.putInt("BUNDLE_KEY_CATALOG", newType);
        return bundle;
    }
	/**
     * 基类会根据不同的catalog展示相应的数据
     * 
     * @param catalog
     *            要显示的数据类别
     * @return
     */
    private Bundle getBundle(String catalog) {
        Bundle bundle = new Bundle();
        bundle.putString("BUNDLE_BLOG_TYPE", catalog);
        return bundle;
    }

    demo图片展示，就这一个界面。demo地址开源中国源码学习UI篇（三）之ViewPager+Fragment的使用分析。