当前位置: 首页 > 科技观察

Android带你分析类ScrollView的QQ空间标题栏渐变

时间:2023-03-14 12:14:23 科技观察

简介今天我们来学习ScrollView——滚动视图,滚动视图分为水平滚动视图(Horizo??ntalScrollView)和垂直滚动视图(ScrollView),今天我们主要研究垂直的。相信大家在开发中经常会用到。ScrollView的功能已经很强大了,但是还是不能满足我们脑洞大开的UI设计者,所以我们需要自定义...本文主要讲的是监听ScrollView的滑动实现仿QQ渐变空间标题栏,一起来看看先上效果图:好了,我们切入主题。关于android:scrollbars设置滚动条显示的那些ScrollView属性你可能不知道。none(隐藏)、horizo??ntal(水平)、vertical(垂直)android:scrollbarStyle设置滚动条的样式和位置。设置值:insideOverlay,insideInset,outsideOverlay,outsideInsetandroid:scrollbarThumbHorizo??ntal设置水平滚动条的drawable。android:soundEffectsEnabled设置点击或触摸时是否有音效android:fadingEdge设置拉动滚动条时边框渐变的方向。none(边框颜色不变),horizo??ntal(水平方向颜色变浅),vertical(垂直方向颜色变浅)。参考fadingEdgeLength的渲染android:fadingEdgeLength设置边框渐变的长度android:scrollX设置水平滚动的偏移值,单位为像素,在GridView中可以看到android:scrollY设置垂直滚动的单位为像素的偏移值android:scrollbarAlwaysDrawHorizo??ntalTrack的设置是否一直显示垂直滚动条android:scrollbarDefaultDelayBeforeFade在N毫秒后开始淡出,单位毫秒。对以上属性感兴趣的可以研究一下,这里就不赘述了。许多属性并不常用。说说我们经常用到的吧。如何监听ScrollView的滚动,实现标题栏的渐变?ScrollView滑动监控:Google并没有给我们提供ScrollView的滚动距离,是滑动到布局底部还是顶部。,但是提供了一个onScrollChanged方法:@OverrideprotectedvoidonScrollChanged(intx,inty,intoldx,intoldy){super.onScrollChanged(x,y,oldx,oldy);//todo:}}通过查看源码注释,/***Thiscalcalledinresponsetoaninternalscrollinthisview(即*viewscrolleditsowncontents)。这通常是*{@link#scrollBy(int,int)}或{@link#scrollTo(int,int)}被*调用的结果。**@paramlCurrenthorizo??ntalscrollorigin。*@paramtCurrentverticalscrollorigin。*@paramoldlPrevioushorigintalscrollorigin.*@paramoldlPrevioushorizo??ntalscrollorigin.*@paramoldtPreviousverticalscrollorigin.*/我们可以知道这个方法的参数是:l:当前水平滚动距离t:当前垂直滚动距离oldl:上一个水平滚动距离oldt:上一个垂直滚动距离但是我们不能调用这个方法,我们可以重复写一个接口或者重写ScrollView暴露这个方法:packagecom.hankkin.gradationscroll;importandroid.content.Context;importandroid.util.AttributeSet;importandroid.widget.ScrollView;voidonScrollChanged(GradationScrollViewscrollView,intx,inty,intoldx,intoldy);}privateScrollViewListenerscrollViewListener=null;publicGradationScrollView(Contextcontext){super(context);}publicGradationScrollView(Contextcontext,AttributeSetattrs,intdefStyle){super(context,attrs,deftextStyle);}contextGradationScrollView(context,属性,deftextStyle);AttributeSetattrs){super(context,attrs);}publicvoidsetScrollViewListener(ScrollViewListenerscrollViewListener){this.scrollViewListener=scrollViewListener;}@OverrideprotectedvoidonScrollChanged(intx,inty,intoldx,intoldy){super.onScrollChanged(x,y,oldx,oldy);scrollViewListener!=null){scrollViewListener.onScrollChanged(this,x,y,oldx,oldy);}}}设置标题渐变滚动监听外露,我们应该设置标题栏随着ScrollView滑动改变标题栏的透明度实现Gradient:我们先看看布局:最外层是我们的自定义的ScrollView包裹着一张背景图和一个ListView(ListView被重写为不可滑动),然后在layout的顶部有一个TextView作为标题栏。您还可以使用布局然后我们需要获取图片的高度,并设置滚动监视器,并随着滚动距离设置标题栏颜色透明度和字体颜色透明度/***获取顶部图片高度后,设置滚动监视器*/privatevoidinitListeners(){ViewTreeObservervto=ivBanner.getViewTreeObserver();vto.addOnGlobalLayoutListener(newViewTreeObserver.OnGlobalLayoutListener(){@OverridepublicvoidonGlobalLayout(){textView.getViewTreeObserver().removeGlobalOnLayoutListener(this);height=ivBanner.getHeight();scrollListpeakAkterView(QQ}});}/***滑动监听*@paramscrollView*@paramx*@paramy*@paramoldx*@paramoldy*/@OverridepublicvoidonScrollChanged(GradationScrollViewscrollView,intx,inty,intoldx,intoldy){//TODOAuto-generatedmethodstubif(y<=0){//设置标题背景色textView.setBackgroundColor(Color.argb((int)0,144,151,166));}elseif(y>0&&y<=height){//滑动时距离小于横幅图像的高度,s等背景色和字体颜色透明度渐变floatscale=(float)y/height;floatalpha=(255*scale);textView.setTextColor(Color.argb((int)alpha,255,255,255));textView.setBackgroundColor(Color.argb((int)alpha,144,151,166));}else{//滑动到banner设置正常颜色textView.setBackgroundColor(Color.argb((int)255,144,151,166));}}OK,这样就实现了上面看到的效果。这其实并不难,但我们不是自己做的。我相信我们可以自己去实现它,我们可以实现UI想要的东西。