Resolution ScrollView -- imitation QQ space title bar gradient, scrollview -- title bar
Let's take a look at it first:
<? 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 = "I am the title" android: textSize = "18sp" android: textColor = "@ color/transparent" android: background = "#00000000"/> </RelativeLayout>
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); } }}
We need to get the Image Height and set the scroll listener. We can set the color transparency of the title bar and the font color transparency as the scroll distance occurs.
/*** After obtaining the height of the top image, set the scroll listener */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 );}});}
/*** Sliding listener ** @ param scrollView * @ param x * @ param y * @ param oldx * @ param oldy */@ Overridepublic void onScrollChanged (GradationScrollView scrollView, int x, int y, int oldx, int oldy) {// TODO Auto-generated method stub if (y <= 0) {// set the title background color textView. setBackgroundColor (Color. argb (int) 0,144,151,166);} else if (y> 0 & y <= height) {// when the sliding distance is smaller than the height of the banner graph, set background and font color transparency gradient 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 {// slide to the banner to set the normal color textView. setBackgroundColor (Color. argb (int) 255,144,151,166 ));}}
Github: https://github.com/ganchuanpu/GradationTitleBar