目标
本篇是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上给我反馈。
