该效果基本就是前2篇文章的结合,不过还是有点区别的,比如标题栏只能固定在上面,不能像第一篇那样从大变小。这是有原因。
布局
比起第一篇文章就是相当于CollapsingToolbarLayout里面添加了一个TabLayout。但是这里还是有些蹊跷的。比如设置了toolbar的高度为104dp=toolbar 56dp + tabs 高度48dp。其实在xml的preview预览图一个一个点能看出toolbar,tablayout的排列布局顺序。看原作者画的图
代码
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Parallax Tabs");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
setupViewPager(viewPager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.header2);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
int vibrantColor = palette.getVibrantColor(getResources().getColor(R.color.colorPrimary));
int vibrantDarkColor = palette.getDarkVibrantColor(getResources().getColor(R.color.colorPrimaryDark));
collapsingToolbarLayout.setContentScrimColor(vibrantColor);
collapsingToolbarLayout.setStatusBarScrimColor(vibrantDarkColor);
}
});
好多代码跟前面2篇都有重复,这里说一下几个注意点的,collapsingToolbarLayout.setTitleEnabled(false)这里,我们把第一篇中的大字体取消作为标题了,而是用toolbar的getSupportActionBar().setTitle("Parallax Tabs");作为标题,至于为什么,你试一下就知道了。然后后面用Palette取图片中的颜色来设置toolbar和status bar的颜色。
最后主题上面要在values-v21里面为当前的activity建一个statusbar透明的属性:
<item name="android:statusBarColor">@android:color/transparent</item>
完成。Github源代码。

