您的位置:首页 > 其它

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

2016-08-24 15:41 295 查看
最近公司任务要求给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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐