目标

本篇是RecyclerView的重构之路系列文章的第二篇， 讲解的是IDouban项目主界面的搭建。使用TabLayout， ViewPager, Fragment实现。

效果图

主界面.png

实现步骤

创建IDouban工程， 这个不多说。

IDouban架构

说架构（容许我装B一下下）， 其实就是一个Activity， 2 个Fragment。

HomeActivity布局

App的主界面，进入显示2个Tab，可以滑动，如何实现这样的效果呢？
很简单， HomeActivity对应的布局文件，添加如下关键代码：

<android.support.design.widget.TabLayout
        android:id="@+id/douban_sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed" />
    <!-- android:background="#1fbcd2"
        app:tabIndicatorColor="#ff0000"-->

    <android.support.v4.view.ViewPager
        android:id="@+id/douban_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

注意， xml文件最外层默认是RelativeLayout, 而我修改为了LinearLayout。
还有TabLayout是android.support.design.widget.TabLayout, 不要弄错。

HomeActivity 代码

现阶段比较简单，套路是：

• 初始化控件
• 创建PagerAdapter
• 添加TabLayout并设置ViewPager

初始化控件

mViewPager = (ViewPager) findViewById(R.id.douban_view_pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.douban_sliding_tabs);

创建PagerAdapter

static class DoubanPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        private final List<String> mFrgmentTitles = new ArrayList<>();

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

        public void addFragment(Fragment fragment, String title) {
            mFragments.add(fragment);
            mFrgmentTitles.add(title);
        }

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

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

        @Override
        public CharSequence getPageTitle(int position) {
            return mFrgmentTitles.get(position);
        }
    }

其中， getItem, getCount, getPageTitle是重写方法，getPageTitle要是没有实现，TabLayout的Tab不显示文字。
addFragment用于外界添加Fragment以及TabLayout标题。

添加TabLayout并设置ViewPager

要知道ViewPager需要跟ViewPagerAdapter一起使用的。

private void setupViewPager(ViewPager viewPager){
        DoubanPagerAdapter pagerAdapter = new DoubanPagerAdapter(getSupportFragmentManager());
        pagerAdapter.addFragment(new MoviesFragment(), getApplicationContext().getResources().getString(R.string.tab_movies_fragment));
        pagerAdapter.addFragment(new BooksFragment(), getApplicationContext().getResources().getString(R.string.tab_books_fragment));
        viewPager.setAdapter(pagerAdapter);
    }

 if(tabLayout != null) {
            tabLayout.addTab(tabLayout.newTab());
            tabLayout.addTab(tabLayout.newTab());
            tabLayout.setupWithViewPager(mViewPager);
        }

套路

之前在给学生讲解App开发时候，一直在给他们总结套路的问题，开发Android App， 脑海里要有基本的步骤。以上述为例，总结一句话： 搭建布局， 找到view， 代码里面走一走。
重点也就几个：

• findViewById找出你的view， 然后等待其他初始化
• 用到了ViewPager， so， 要有ViewPagerAdapter, 还得设置Fragment
• 用到TabLayout, so, 要添加Tab, 还得setupWithViewPager

源码

欢迎在github上给我反馈。

RecyclerView的重构之路(三)