标题栏滑动渐变效果的实现

本文实现顶部标题栏在页面滑动过程中，从透明渐变到有颜色的效果。

Demo原型来源于：http://download.csdn.net/download/u010786471/9463557

此文为简化后的直接实现，相比Demo结构更清晰易懂。

以此为例，实现渐变效果最关键的是重写ScrollView，通过ScrollView的监听事件，对标题栏的背景进行设置。

故首先，要重写一个ScrollView。

重写一个ScrollView之前，定义一个接口，判断下拉和上拉。

package com.example.shadedemo1;

public interface Pullable {
/**
* 判断是否可以下拉，如果不需要下拉功能可以直接return false
*
* @return true如果可以下拉否则返回false
*/
boolean canPullDown();

/**
* 判断是否可以上拉，如果不需要上拉功能可以直接return false
*
* @return true如果可以上拉否则返回false
*/
boolean canPullUp();
}

重写ScrollView，实现Pullable接口。

package com.example.shadedemo1;

import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.ScrollView;

public class PullableScrollView extends ScrollView implements Pullable {

public PullableScrollView(Context context) {
super(context);
}

public PullableScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public PullableScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

// 用于判断滑动时上滑动还是下滑动
@Override
public boolean canPullDown() {
if (getScrollY() == 0)
return true;
else
return false;
}

@Override
public boolean canPullUp() {
if (getScrollY() >= (getChildAt(0).getHeight() - getMeasuredHeight()))
return true;
else
return false;
}

private boolean mDisableEdgeEffects = true;

// 用于接口回调
public interface OnScrollChangedListener {
void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);
}

private OnScrollChangedListener mOnScrollChangedListener;

// 我们定义的滑动接口，在布局中调用这个接口就可以得到滑动的位置，然后在这个接口里面开始写你的逻辑。
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (mOnScrollChangedListener != null) {
mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt);
}
}

public void setOnScrollChangedListener(OnScrollChangedListener listener) {
mOnScrollChangedListener = listener;
}

@Override
protected float getTopFadingEdgeStrength() {
if (mDisableEdgeEffects
&& Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
return 0.0f;
}
return super.getTopFadingEdgeStrength();
}

@Override
protected float getBottomFadingEdgeStrength() {
if (mDisableEdgeEffects
&& Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
return 0.0f;
}
return super.getBottomFadingEdgeStrength();
}
}

mainactivity布局xml：

<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" >

<com.example.shadedemo1.PullableScrollView
android:id="@+id/scrollView_main"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageView_main"
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/ic_launcher" />

<TextView
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="#e3e3e3"
android:text="upost"
android:textSize="16sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="90dp"
android:text="upost"
android:textSize="16sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="90dp"
android:text="upost"
android:textSize="16sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="90dp"
android:text="upost"
android:textSize="16sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="90dp"
android:text="upost"
android:textSize="16sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="90dp"
android:text="upost"
android:textSize="16sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="90dp"
android:text="upost"
android:textSize="16sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="90dp"
android:text="upost"
android:textSize="16sp" />
</LinearLayout>
</com.example.shadedemo1.PullableScrollView>

<RelativeLayout
android:id="@+id/relativeLayout_main"
android:layout_width="match_parent"
android:layout_height="50dp" >
<!--
<ImageView
android:id="@+id/imageview_logo_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="@drawable/mainlogowhite" />
这里是RelativeLayout中图片的渐变，同一个位置需要放两个除颜色外其他均一致的图片，用于渐变
上面是渐变前，下面是渐变后
在这里只实现RelativeLayout背景的渐变，故注释掉，要实现这里的图片渐变，解除这里的注释和mainactivity中关于这两个图片的注释，即可实现
<ImageView
android:id="@+id/imageview_logo_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="@drawable/logoblue" />
-->
</RelativeLayout>

</RelativeLayout>

MainActivity 中的代码：

package com.example.shadedemo1;

import com.example.shadedemo1.PullableScrollView.OnScrollChangedListener;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.ScrollView;

public class MainActivity extends Activity {
//渐变的图片
//ImageView imageview_logo_blue,imageview_logo_white;
//渐变的标题栏布局
RelativeLayout relativeLayout_main;
// 这个就是你滑动参考的View，可以用任何view替代，实际中一般是ViewPager
ImageView imageView_main;
//重写的滚动视图
PullableScrollView scrollView_main;

// 滑动参考的View的高度变化到哪里了，以便其他界面调回来标题的透明度
int HEIGHT = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//已经注释掉的渐变图片
//      imageview_logo_blue = (ImageView) findViewById(R.id.imageview_logo_blue);
//      imageview_logo_white = (ImageView) findViewById(R.id.imageview_logo_white);

imageView_main = (ImageView) findViewById(R.id.imageView_main);
scrollView_main = (PullableScrollView) findViewById(R.id.scrollView_main);
relativeLayout_main = (RelativeLayout) findViewById(R.id.relativeLayout_main);

scrollView_main.setOnScrollChangedListener(new OnScrollChangedListener() {
@Override
public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {
//已经注释掉的渐变图片
//imageview_logo_blue.setVisibility(View.VISIBLE);
//这里必须先对标题栏背景进行设置，不设置则在scrollView下拉后报空指针异常，同样，渐变的图片也需要先设置成可见，这里要设置成渐变后的图片或背景
relativeLayout_main.setBackgroundResource(R.drawable.search_bg_white);
if (imageView_main!=null
&&imageView_main.getHeight()>0) {
HEIGHT = imageView_main.getHeight();
if (t<HEIGHT) {
int progress = (int)
(new Float(t)/new Float(HEIGHT)*200);
relativeLayout_main.getBackground().setAlpha(progress);
//已经注释掉的渐变图片
//                      imageview_logo_blue.getBackground().setAlpha(progress);
//                      imageview_logo_white.getBackground().setAlpha(255);
}else {
HEIGHT = 255;
//已经注释掉的渐变图片
//                      imageview_logo_blue.getBackground().setAlpha(255);
//                      imageview_logo_white.getBackground().setAlpha(0);
relativeLayout_main.getBackground().setAlpha(255);
}
}

}
});

}

@Override
protected void onRestart() {
// TODO Auto-generated method stub
super.onRestart();
//relativeLayout_main.getBackground().setAlpha(HEIGHT);
//原Demo在onRestart方法中，将relativeLayout_main设置了渐变
//经过测试，注释掉该语句后并没有影响
//同时，如果是在fragment中，因没有onRestart方法，故若是在onResume或onStart方法实现这个渐变，则会因找不到relativeLayout_main而报空指针异常
}

}

除了重写ScrollView，还可以重写ListView、GridView等，以实现滑动监听，更复杂的实现，请参考：

http://download.csdn.net/download/conglida/9183723