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
|