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

来源：互联网发布：java random 1到100 编辑：程序博客网时间：2024/05/27 16:41

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

0 0