Android 仿半糖app首页UI Material Design的使用

半糖appUI效果

半糖.gif

需求

1 toolbar处随上下滑动事件的变化
2 向下滑动的时候，tablayout不会消失
3 左右滑动可切换fragment，点击也可切换fragment
4 banner的自动轮播及手动变换（这个点不讲了，网上有很多开源库甚至代码整理。）

思路及分析

0、 Material Design的UI真的很炫，对这个还不是太熟悉，后续要努力。
1 、标题栏处向上滑动，toolbar会从透明底渐变成白底，同时布局也会改变，细致观察，在渐变过程中两种布局都出现了，所以这里应该市同时存在两个toolbar，通过滑动事件的监听渐变透明到消失或显示
2、上滑到底的时候，banner会消失，toobar占据那个位置，同时tablayout也会置顶，不会随着banner的消失而消失。所以banner、Toolbar、以及tablayou都应该在AppBarLayout里面，同时有收缩banner的情况，所以用到CollapsingToolbarLayout
3、底下content部分的话，就是简单的tablayout+viewpager+fragment的处理，这个一般不难
4、viewpager是没有上下滑动的功能的，viewpager内部布局放在fragment里面处理了，所以我这里将viewpager放在一个NestedScrollView里面了
5、准备over

no bb，just show code

上面是布局，剩下的就是java代码，都挺简单的，唯一需要注意的是，我们要根据上下滑动的状态对toolbar进行显示消失替换等一系列的动作，这个怎么办呢？用到AppBarLayout的addOnOffsetChangedListener，这个可以监听到偏移值（？是这么叫的吗？），可以获取到你滑动的程度。

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            //通过vertical的偏移值除以totalScrollRange来获取到百分比
            float progress = (float) (((int) (Math.abs(verticalOffset) / (appBarLayout.getTotalScrollRange()*0.01)))*0.01);

            if (verticalOffset == 0) {
                // 展开状态 progress为0，展开状态的toolbar可见

                toolbar_default.setVisibility(View.VISIBLE);
                toolbar_nono.setVisibility(View.GONE);
                toolbar_default.getBackground().setAlpha(255);
                iv_defalut_left.getBackground().setAlpha(255);
                iv_default_right.getBackground().setAlpha(255);

                toolbar_nono.getBackground().setAlpha(255);

            } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
                //折叠状态 progress为1，折叠状态的toolbar可见

                toolbar_default.setVisibility(View.GONE);
                toolbar_nono.setVisibility(View.VISIBLE);
                toolbar_default.getBackground().setAlpha(255);

                toolbar_nono.getBackground().setAlpha(255);
                et_nono_left.getBackground().setAlpha(255);
                iv_nono_right.getBackground().setAlpha(255);

            } else {

                //中间状态，两个toolbar是重叠在一起的，根据是从折叠到展开，还是从展开到折叠，同时加上进度progress确定两个toolbar的透明比

                if(toolbar_nono.getVisibility() == View.GONE){// 折叠状态的toolbar不可见，则是从展开到折叠变化
                    flag_defaulttono = true;
                }else if(toolbar_default.getVisibility() == View.GONE){// 展开状态的toolbar不可见，则是从折叠到展开变化，为什么？因为只有到0的时候可见性才会变成gone，其他都是可见或改变透明度。
                    flag_defaulttono = false;
                }// 以上两种情况都不是的话，则不需要改变flag_defaluttono的值

                toolbar_default.setVisibility(View.VISIBLE);
                toolbar_nono.setVisibility(View.VISIBLE);//

                if(flag_defaulttono){ // 0到1变换
                    toolbar_default.getBackground().setAlpha((int) ((1-progress) * 255));
                    iv_defalut_left.getBackground().setAlpha((int) ((1-progress) * 255));
                    iv_default_right.getBackground().setAlpha((int) ((1-progress) * 255));

                    toolbar_nono.getBackground().setAlpha((int) ( progress* 255));
                    et_nono_left.getBackground().setAlpha((int) ( progress* 255));
                    iv_nono_right.getBackground().setAlpha((int) ( progress* 255));

                }else{

                    toolbar_default.getBackground().setAlpha((int) (progress * 255));
                    iv_defalut_left.getBackground().setAlpha((int) (progress * 255));
                    iv_default_right.getBackground().setAlpha((int) (progress * 255));

                    toolbar_nono.getBackground().setAlpha((int) ((1-progress) * 255));
                    et_nono_left.getBackground().setAlpha((int) ((1-progress) * 255));
                    iv_nono_right.getBackground().setAlpha((int) ((1-progress) * 255));
                }

            }
        }
    });

剩下的就是banner啊，viewpager+tablayout等那些的，应该大部分都会用，我就不贴上来了。
代码已经放到了gitHub上，有兴趣的可以去瞅瞅，多多提意见，谢谢！

仿制的UI效果图

仿半糖.gif

后续

后面还是会继续完善这个仿半糖的app吧，还有底部recyclerView的刷新后续可以添加进去，还有UI什么的。
and 源码有放在github（https://github.com/mLiXin/MudoBantanUI）上，大家有兴趣的，可以瞅瞅源码，中间能优化的地方肯定还有很多，我对Material Design的掌握还不是很好，后续会继续多多学习
and bug肯定有，各位多多提意见了
and over，thx ^_