Material Design : Parallax Scrolling Tabs

1,071 阅读1分钟
原文链接: shiguiyou.github.io

原文地址:blog.grafixartist.com/parallax-sc…

先上效果图:
Demo

该效果基本就是前2篇文章的结合,不过还是有点区别的,比如标题栏只能固定在上面,不能像第一篇那样从大变小。这是有原因。

布局


    
        
            
            
            
        
    
    

比起第一篇文章就是相当于CollapsingToolbarLayout里面添加了一个TabLayout。但是这里还是有些蹊跷的。比如设置了toolbar的高度为104dp=toolbar 56dp + tabs 高度48dp。其实在xml的preview预览图一个一个点能看出toolbar,tablayout的排列布局顺序。看原作者画的图

jiexi

代码

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源代码