Toolbar的背景虚化加listView头部布局置顶

 今天讲一下toolbar的一个拓展  
 github源码下载：https://github.com/MaxPanda0/toolbarDemo
 随着内容区域的滑动顶部的图片和Toolbar也会做出相应的动作。图片会收缩和展开，Toolbar的背景在透明和黑色之间变化。要实现这种类似Play商店的效果。再加一个listView头部布局置顶效果，效果图如下：
 ![1展开状态，2.头部滑动状态3.头部置顶状态](https://img-blog.csdn.net/20160720131521269)
第一步搭建一个布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        xmlns:tools="http://schemas.android.com/tools"  
        xmlns:roundIcon="http://schemas.android.com/apk/res-auto"  
        xmlns:app="http://schemas.android.com/apk/res-auto"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        tools:context=".MainActivity">  

        <android.support.v7.widget.Toolbar  
            android:id="@+id/toolbar"  
            android:layout_width="match_parent"  
            android:layout_height="48dp"  
            android:background="#00000000"  
            android:minHeight="?attr/actionBarSize"  
            app:popupTheme="@style/Theme.AppCompat.Light.DarkActionBar"  
            app:theme="@style/Theme.AppCompat" />  

        <TextView  
            android:layout_marginTop="155dp"  
            android:textSize="30sp"  
            android:text="大熊读报"  
            android:textColor="#ffff0000"  
            android:id="@+id/title"  
            android:padding="16dp"  
            android:gravity="center_vertical"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content" />  

        <ListView  
            android:id="@+id/listview"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"
           android:layout_below="@+id/toolbar"></ListView>  
           <!--模块一-->  

        <android.support.v4.view.ViewPager  
            android:id="@+id/vp_top"  
            android:scaleType="fitXY"  
            android:layout_width="match_parent"  
            android:layout_height="220dp" />  
        <!--模块二--> 
         <include android:id="@+id/ll_inactive_navigation_main"
                layout="@layout/navigation"
                />     
    </RelativeLayout>  

第二步 在activity中初始化控件

private void initView() {
        toobar=(Toolbar) findViewById(R.id.toolbar);
        toobarHeight=toobar.getLayoutParams().height;
        titel=(TextView) findViewById(R.id.title);
        vp=(ViewPager) findViewById(R.id.vp_top);
        lv=(ListView) findViewById(R.id.listview);
        activeBar=getLayoutInflater().inflate(R.layout.navigation, null);
        inactiveBar=findViewById(R.id.ll_inactive_navigation_main);
    }

第三步 配置listView给listView添加监听获得实时滑动距离

lv.addHeaderView(header);
        lv.addHeaderView(activeBar);
        lv.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, new String[]{
                "nihao0","nihao1","nihao2","nihao3","nihao4","nihao5","nihao6","nihao7","nihao8","nihao9",
                "nihao","nihao","nihao","nihao","nihao","nihao","nihao","nihao","nihao","nihao",
                "nihao","nihao","nihao","nihao","nihao","nihao","nihao","nihao","nihao","nihao",
        }));
        lv.setOnScrollListener(new OnScrollListener() {

            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {

            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                if(vpBgHeight==0)return;
                int dist = getScrollDist();
                if(-dist>=vpBgHeight){

                    relaParams.setMargins(0,toobarHeight, 0, 0);
                }else{
                    relaParams.setMargins(0,vpBgHeight+dist, 0, 0);
                }
                inactiveBar.setLayoutParams(relaParams);
                vp.setTranslationY(dist);  
                setTopBgParams(dist / 2);  
                setTitleParams(dist);

            }
        });

计算滑动的距离

private int getScrollDist() {  
            if (lv.getChildCount()<1) return 0; //不然会空指针错误  
            int firstVisiblePosition=lv.getFirstVisiblePosition();  
            curScrollDist=-lv.getChildAt(0).getTop();  
            //  
            if (firstVisiblePosition>=1){  
                curScrollDist+=vpBgHeight;  
                firstVisiblePosition--;  
            }  
            View view=lv.getChildAt(1);  
            if (view!=null){  
                curScrollDist+=firstVisiblePosition*view.getHeight();  
            }  
            return -curScrollDist;  
        }  

计算布局参数

protected void setTitleParams(int dist) {
        int min=-(vpBgHeight-titel.getMeasuredHeight());  
        int max=0;  
        float transY=getBetween(min, max, dist);  
        titel.setTranslationY(transY);  
        float ratio=1-transY/min/3;  
        titel.setPivotX(0);  
        titel.setPivotY(0);  
        titel.setScaleX(ratio);  
        titel.setScaleY(ratio);  
    }
    protected void setTopBgParams(int dist) {
        int min=-vpBgHeight/2;  
        int max=0;  
        float transY=getBetween(min, max, dist);  
        float ratio=transY/min;  
        //mask: 0~255(滑到顶部)  
        int mask= (int) (ratio*0xff);  
        vp.setAlpha(1-(mask/2)/120f);
        toobar.setBackgroundColor(0xff000000);
        toobar.setAlpha((mask/2)/120f);
    }

github源码下载：https://github.com/MaxPanda0/toolbarDemo