android标题栏滑动渐变效果

先看一下效果图：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<?xml version= "1.0"  encoding= "utf-8" ?> <RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android"      xmlns:tools= "http://schemas.android.com/tools"      android:layout_width= "match_parent"      android:layout_height= "match_parent"      tools:context= "com.hankkin.gradationtitlebar.QQSpeakActivity" >        <com.hankkin.gradationscroll.GradationScrollView          android:id= "@+id/scrollview"          android:layout_width= "match_parent"          android:layout_height= "match_parent"          android:scrollbars= "none" >          <LinearLayout              android:layout_width= "match_parent"              android:layout_height= "wrap_content"              android:orientation= "vertical"  >              <ImageView                  android:id= "@+id/iv_banner"                  android:scaleType= "fitXY"                  android:src= "@drawable/banner3"                  android:layout_width= "match_parent"                  android:layout_height= "200dp"  />              <com.hankkin.gradationscroll.NoScrollListview                  android:id= "@+id/listview"                  android:layout_width= "match_parent"                  android:layout_height= "wrap_content"  >              </com.hankkin.gradationscroll.NoScrollListview>          </LinearLayout>      </com.hankkin.gradationscroll.GradationScrollView>      <TextView          android:paddingBottom= "10dp"          android:id= "@+id/textview"          android:layout_width= "match_parent"          android:layout_height= "55dp"          android:gravity= "center|bottom"          android:text= "我是标题"          android:textSize= "18sp"          android:textColor= "@color/transparent"          android:background= "#00000000"  /> </RelativeLayout>

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

public  class  GradationScrollView  extends  ScrollView {        public  interface  ScrollViewListener {          void  onScrollChanged(GradationScrollView scrollView,  int  x,  int  y,                               int  oldx,  int  oldy);      }        private  ScrollViewListener scrollViewListener =  null ;        public  GradationScrollView(Context context) {          super (context);      }        public  GradationScrollView(Context context, AttributeSet attrs,                                 int  defStyle) {          super (context, attrs, defStyle);      }        public  GradationScrollView(Context context, AttributeSet attrs) {          super (context, attrs);      }        public  void  setScrollViewListener(ScrollViewListener scrollViewListener) {          this .scrollViewListener = scrollViewListener;      }        @Override      protected  void  onScrollChanged( int  x,  int  y,  int  oldx,  int  oldy) {          super .onScrollChanged(x, y, oldx, oldy);          if  (scrollViewListener !=  null ) {              scrollViewListener.onScrollChanged( this , x, y, oldx, oldy);          }      } }

我们需要获取图片的高度，并且设置滚动监听，随着滚动的距离来设置标题栏的颜色透明度和字体颜色的透明度

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/**    * 获取顶部图片高度后，设置滚动监听 */ private  void  initListeners() {            ViewTreeObserver vto = ivBanner.getViewTreeObserver();          vto.addOnGlobalLayoutListener( new  ViewTreeObserver.OnGlobalLayoutListener() {              @Override              public  void  onGlobalLayout() {                  textView.getViewTreeObserver().removeGlobalOnLayoutListener(                          this );                  height = ivBanner.getHeight();                    scrollView.setScrollViewListener(QQSpeakActivity. this );              }          });   }

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/**       * 滑动监听       * @param scrollView       * @param x       * @param y       * @param oldx       * @param oldy */ @Override public  void  onScrollChanged(GradationScrollView scrollView,  int  x,  int  y,                                  int  oldx,  int  oldy) {          // TODO Auto-generated method stub          if  (y <=  0 ) {    //设置标题的背景颜色              textView.setBackgroundColor(Color.argb(( int )  0 ,  144 , 151 , 166 ));          }  else  if  (y >  0  && y <= height) {  //滑动距离小于banner图的高度时，设置背景和字体颜色颜色透明度渐变              float  scale = ( float ) y / height;              float  alpha = ( 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 ));          }      } github地址：https://github.com/a4575169/GradationTitleBar.git