标题栏渐变的效果实现

最近做APP非要加一个功能就是标题栏随着滑动变色，研究一天终于搞出来，废话少说，直接来干活。我们都知道滑动变色我们必须用到手势的监听，无奈最外层是ScrollView还要加监听，所以呢自己自定义一个ScrollView从写的ScrollView添加的滑动的监听，当然原理就是接口回调，这个大家都知道，这里就不详细多说，直接上图：

首先是我们自定义的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);}// 用于判断滑动时上滑动还是下滑动@Overridepublic boolean canPullDown() {    if (getScrollY() == 0)        return true;    else        return false;}@Overridepublic 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;// 我们定义的滑动接口，在布局中调用这个接口就可以得到滑动的位置，然后在这个接口里面开始写你的逻辑。@Overrideprotected 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;}@Overrideprotected float getTopFadingEdgeStrength() {    if (mDisableEdgeEffects            && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {        return 0.0f;    }    return super.getTopFadingEdgeStrength();}@Overrideprotected float getBottomFadingEdgeStrength() {    if (mDisableEdgeEffects            && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {        return 0.0f;    }    return super.getBottomFadingEdgeStrength();

然后就是最主要的渐变代码。可以直接使用，注释很详细：
public class MainActivity extends Activity implements OnClickListener {

private ImageView imageviewLogoFragmentHome,        imageview_logo_fragment_home_blue;// 左上角的电话的渐变private ImageView imageviewTwoDimensionCodeOneOne1,        imageview_two_dimension_code_blue;// 搜索背景的渐变变private ImageView imageview_search_bg_white, imageview_search_bg_gray;// 这个就是你滑动参考的View，你可以放任何viewprivate LinearLayout imageviewView;private RelativeLayout relativeLayoutHometop;private PullableScrollView scrollview;// 轮播图的高度变化到哪里了，以便其他界面调回来标题的透明度int HEIGHT = 0;@SuppressLint("UseValueOf")protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    initView();    scrollview            .setOnScrollChangedListener(new PullableScrollView.OnScrollChangedListener() {                @Override                public void onScrollChanged(ScrollView who, int l, int t,                        int oldl, int oldt) {                    imageview_logo_fragment_home_blue                            .setVisibility(View.VISIBLE);                    imageview_two_dimension_code_blue                            .setVisibility(View.VISIBLE);                    // 给标题整体设置白色图片这个才会渐变                    relativeLayoutHometop                            .setBackgroundResource(R.drawable.search_bg_white);                    if (imageviewView != null                            && imageviewView.getHeight() > 0) {                        HEIGHT = imageviewView.getHeight();                        if (t < HEIGHT) {// =                            int progress = (int) (new Float(t)                                    / new Float(HEIGHT) * 200);// 255                            // 底色的渐变                            relativeLayoutHometop.getBackground().setAlpha(                                    progress);                            imageview_logo_fragment_home_blue                                    .getBackground().setAlpha(progress);                            imageviewLogoFragmentHome.getBackground()                                    .setAlpha(255);                            // 左边的的渐变                            imageviewTwoDimensionCodeOneOne1                                    .getBackground().setAlpha(255);                            imageview_two_dimension_code_blue                                    .getBackground().setAlpha(progress);                            // 搜索底灰色的渐变                            imageview_search_bg_white.getBackground()                                    .setAlpha(0);                            imageview_search_bg_gray.getBackground()                                    .setAlpha(progress);                            HEIGHT = progress;                        } else {                            HEIGHT = 255;                            imageview_search_bg_white.getBackground()                                    .setAlpha(0);                            imageview_search_bg_gray.getBackground()                                    .setAlpha(255);                            imageviewTwoDimensionCodeOneOne1                                    .getBackground().setAlpha(0);                            imageview_two_dimension_code_blue                                    .getBackground().setAlpha(255);                            imageview_logo_fragment_home_blue                                    .getBackground().setAlpha(255);                            imageviewLogoFragmentHome.getBackground()                                    .setAlpha(0);                            relativeLayoutHometop.getBackground().setAlpha(                                    255);                        }                    }                }            });}@SuppressLint("CutPasteId")private void initView() {    imageviewLogoFragmentHome = (ImageView) findViewById(R.id.imageview_logo_fragment_home);    imageview_logo_fragment_home_blue = (ImageView) findViewById(R.id.imageview_logo_fragment_home_blue);    imageviewTwoDimensionCodeOneOne1 = (ImageView) findViewById(R.id.imageview_two_dimension_code_one_one1);    imageviewTwoDimensionCodeOneOne1.setOnClickListener(this);    imageview_two_dimension_code_blue = (ImageView) findViewById(R.id.imageview_two_dimension_code_blue);    imageview_two_dimension_code_blue.setOnClickListener(this);    imageview_search_bg_white = (ImageView) findViewById(R.id.imageview_search_bg_white);    imageview_search_bg_gray = (ImageView) findViewById(R.id.imageview_two_dimension_code_blue);    imageviewView = (LinearLayout) findViewById(R.id.imageviewView);    relativeLayoutHometop = (RelativeLayout) findViewById(R.id.relativeLayoutHometop);    scrollview = (PullableScrollView) findViewById(R.id.ptrScrollView_home);}@Overrideprotected void onRestart() {    // TODO Auto-generated method stub    super.onRestart();    relativeLayoutHometop.getBackground().setAlpha(HEIGHT);}@Overridepublic void onClick(View v) {}

下面就是主要的布局：

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <LinearLayout            android:id="@+id/imageviewView"            android:layout_width="match_parent"            android:layout_height="300dp"            android:background="#ff00ff"            android:orientation="vertical" >        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical" >            <TextView                android:layout_width="match_parent"                android:layout_height="90dp"                android:background="#00ff00"                android:text="11111111111" />            <TextView                android:layout_width="match_parent"                android:layout_height="90dp"                android:text="11111111111" />            <TextView                android:layout_width="match_parent"                android:layout_height="90dp"                android:text="11111111111" />            <TextView                android:layout_width="match_parent"                android:layout_height="90dp"                android:text="11111111111" />            <TextView                android:layout_width="match_parent"                android:layout_height="90dp"                android:text="11111111111" />            <TextView                android:layout_width="match_parent"                android:layout_height="90dp"                android:text="11111111111" />            <TextView                android:layout_width="match_parent"                android:layout_height="90dp"                android:text="11111111111" />            <TextView                android:layout_width="match_parent"                android:layout_height="90dp"                android:text="11111111111" />        </LinearLayout>    </LinearLayout></com.example.shade.PullableScrollView><include    android:layout_width="wrap_content"    android:layout_height="48dp"    android:layout_alignParentLeft="true"    layout="@layout/apphead" />

还有标题栏的布局：

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="48dp"        android:layout_alignParentTop="true"        android:gravity="center_vertical" >        <RelativeLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content" >            <ImageView                android:id="@+id/imageview_logo_fragment_home"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="12dp"                android:background="@drawable/mainlogowhite" />            <ImageView                android:id="@+id/imageview_logo_fragment_home_blue"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="12dp"                android:background="@drawable/logoblue" />        </RelativeLayout>        <RelativeLayout            android:id="@+id/imageview_Search"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginLeft="12dp"            android:layout_marginRight="12dp"            android:layout_weight="1"            android:focusable="true"            android:focusableInTouchMode="true" >            <ImageView                android:id="@+id/imageview_search_bg_white"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="@drawable/search_bg_white"                android:scaleType="fitXY" />            <ImageView                android:id="@+id/imageview_search_bg_gray"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="@drawable/search_bg_gray"                android:scaleType="fitXY" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentLeft="true"                android:layout_centerVertical="true"                android:layout_marginLeft="5dp"                android:layout_marginRight="20dp"                android:src="@drawable/home_naigationbar_search_grey" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="25dp"                android:background="@null"                android:ems="20"                android:gravity="left"                android:hint="搜索"                android:imeOptions="actionSearch"                android:singleLine="true"                android:textColorHighlight="#cccccc"                android:textSize="12sp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="10dp" >            <ImageView                android:id="@+id/imageview_two_dimension_code_one_one1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="@drawable/phone_white"                android:scaleType="fitXY" />            <ImageView                android:id="@+id/imageview_two_dimension_code_blue"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="@drawable/phone_bule" />        </RelativeLayout>    </LinearLayout></RelativeLayout> 其实原理很简单就是放两个相同图片一个蓝色一个白色，两个同时渐变 一个从蓝色变道透明，一个从透明变为蓝色，很简单。

最开始：

滑动中:

滑动结束：

 **

最后介绍一个群，每天都有干货。喜欢Lol和android的朋友可以加一下：Android晋级群 225274452

**
最后你们要的链接，一切就是俩字，免费。。。。。。
http://download.csdn.net/detail/u010786471/9463557