昨天无意间发现百度手机助手里边的搜索栏挺有意思,如下图
百度手机助手.gif
感觉可以模仿一下,以后项目中可能会用到
首先先分析一下整个效果
1.顶部应该是一个固定的titlebar,随着页面的滑动透明度发生变化
2.最底层的页面应该是一个scrollview,很简单。
3.然后就是那个搜索栏了,仔细看整个动画,发现这个搜索栏应该是在titlebar的上边的,所以整个页面是分成这样3层的
主要细节:
搜索栏随着滑动而变小
titlebar随着滑动改变透明度
当scrollview最上边的imageview完全进入titlebar下边的时候,此时是搜索栏缩小到最小程度,titlebar完全不透明
用到主要知识:估值器 IntEvaluator
主要代码:
int abs_y = Math.abs(y);
//滑动距离小于顶部栏从透明到不透明所需的距离
if ((scrollLength - abs_y) > 0) {
//估值器
IntEvaluator evaluator = new IntEvaluator();
float percent = (float) (scrollLength - abs_y) / scrollLength;
if (percent <= 1) {
//透明度
int evaluate = evaluator.evaluate(percent, 255, 0);
rv_bar.getBackground().setAlpha(evaluate);
//搜索栏左右margin值
evaluatemargin = evaluator.evaluate(percent, DensityUtil.dip2px(SearchViewActivity.this, ENDMARGINLEFT), DensityUtil.dip2px(SearchViewActivity.this, STARTMARGINLEFT));
//搜索栏顶部margin值
evaluatetop = evaluator.evaluate(percent, DensityUtil.dip2px(SearchViewActivity.this, ENDMARGINTOP), DensityUtil.dip2px(SearchViewActivity.this, STARTMARGINTOP));
layoutParams = (FrameLayout.LayoutParams) rv_search.getLayoutParams();
layoutParams.setMargins(evaluatemargin, evaluatetop, evaluatemargin, 0);
rv_search.requestLayout();
}
} else {
rv_bar.getBackground().setAlpha(255);
if (layoutParams != null) {
layoutParams.setMargins(DensityUtil.dip2px(SearchViewActivity.this, ENDMARGINLEFT), DensityUtil.dip2px(SearchViewActivity.this, 5), DensityUtil.dip2px(SearchViewActivity.this, ENDMARGINLEFT), 0);
rv_search.requestLayout();
}
}
}
});
我实现的效果,只是把图片换成了一个红色背景,大同小异
my.gif源码地址 有什么问题,欢迎交流
如果感觉有用,请star鼓励一下!!
网友评论