ListView+头部向上滑动标题栏渐显以及ScrollView向上滑动标题栏渐显

最近公司任务要求给app增加滑动屏幕，标题栏渐显得功能。结合网上查阅的资料，这种功能完成了，下面就来介绍一下是怎样完成的，欢迎各位提意见。

首先我们应该明确，要达到这种渐显效果，用到的是动画里面的透明度，通过动态设置透明度来达到这种需求。

采用ScrollView的布局向上滑动如何达到标题栏渐显

类似于如上图这种用ScrollView布局来达到滑动的界面，首先需要自定义一个MyScrollView继承ScrollView

/**
 * Created by YK on 2016/8/22.
 * 带滚动监听的ScrollView
 */
public class<span style="color:#ff0000;"> MyScrollView</span> extends ScrollView {

    public interface ScrollViewListener {
        void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy);
    }

    private ScrollViewListener scrollViewListener = null;

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

    public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public MyScrollView(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);
        }
    }
}

然后在代码里面mScrollView.setScrollViewListener(this);重写onScrollChanged()方法，关键代码如下：

/**
	 *在这里处理标题栏颜色渐变逻辑
	 * @param scrollView
	 * @param x
	 * @param y
	 * @param oldx
	 * @param oldy
	 */
	@Override
	public void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy) {

		if (y <= 0) {
			<span style="color:#ff0000;">mTitleBarView.setBackgroundColor(Color.argb(0, 255, 255, 255));			
</span>
		} else if (y > 0 && y <=mIsShowTitleHeight) {
			float scale = (float) y / mIsShowTitleHeight;
			float alpha = (255 * scale);
			mTitleBarView.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));

		} else {
			mTitleBarView.setBackgroundColor(Color.argb(255, 255, 255, 255));

		}
	}

采用ListView+头部向上滑动如何达到标题栏渐显

像上图这种效果的ListView+头部向上滑动的布局，你很容易就会想到在onScroll方法里来处理

@Override
    public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {}

但是你又会发现在这个方法里，用那些参数不能直接获取到listview滑动的垂直距离，怎么办呢？就采用了一篇博客里介绍的，可以 获取到listview滑动的垂直距离。关键代码如下：

    private SparseArray recordSp = new SparseArray(0);//设置容器大小，默认是10

/**
     * 处理标题栏背景颜色渐变
     * @param view
     * @param firstVisibleItem 处于顶部的Item标记
     * @param visibleItemCount 当前可见item数当前可见item数
     * @param totalItemCount 总item数
     */
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        super.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount);

        mCurrentfirstVisibleItem = firstVisibleItem;

        View firstView = view.getChildAt(0);//获取当前最顶部的item
        if (firstView != null) {

            ItemRecod itemRecord = (ItemRecod) recordSp.get(firstVisibleItem);

            if (itemRecord == null) {
                itemRecord = new ItemRecod();
            }
            itemRecord.height = firstView.getHeight();//获取当前最顶部Item的高度
            itemRecord.top = firstView.getTop();//获取对应item距离顶部的距离
            recordSp.append(firstVisibleItem, itemRecord);//添加键值对设置值

            int ScrollY = getScrollY();
            if(ScrollY <= 0){
                mTitleView.setBackgroundColor(Color.argb(0, 255, 255, 255));
            }else if (ScrollY > 0 && ScrollY <= mIsShowTitleHeight) {
                float scale = (float) ScrollY / mIsShowTitleHeight;
                float alpha = (255 * scale);
                mTitleView.setBackgroundColor(Color.argb((int)alpha, 255, 255, 255));              
            } else{
                //滑动距离大于mIsShowTitleHeight就设置为不透明
                mTitleView.setBackgroundColor(Color.argb(255, 255, 255, 255));              
            }
        }
    }

private int getScrollY() {
        int height = 0;
        for (int i = 0; i < mCurrentfirstVisibleItem; i++) {
            ItemRecod itemRecod = (ItemRecod) recordSp.get(i);
            if (itemRecod != null) {
                height += itemRecod.height;
            }
        }
        ItemRecod itemRecod = (ItemRecod) recordSp.get(mCurrentfirstVisibleItem);
        if (null == itemRecod) {
            itemRecod = new ItemRecod();
        }
        return height - itemRecod.top;
    }

    private class ItemRecod {
        int height = 0;
        int top = 0;
    }

经测试，两种情况下的滑动使标题栏渐变没问题。

参考资料：

ActionBar 背景渐变动画效果http://blog.chengyunfeng.com/?p=497#ixzz3aCZS3I3h，英文版地址：http://cyrilmottier.com/2013/05/24/pushing-the-actionbar-to-the-next-level/

Android 开源之StickyHeaderListView 标题渐变、吸附悬停、筛选分类、动态头部：http://www.jianshu.com/p/3bf26722c489#

Android开发：Translucent System Bar 的最佳实践：http://www.jianshu.com/p/0acc12c29c1b/comments/1393558

LISTVIEW 获取精确的垂直滚动距离：http://www.2cto.com/kf/201507/416142.html

SparseArray浅析：http://blog.csdn.net/u013493809/article/details/21699121