效果展示
思路
先看结构图,根据滑动距离计算alpha
- 最外层是一个
NestedScrollView
,监听Y轴滑动距离。 - 长的是一个titleBar,背景为透明色,滑动过程中由透明色变为白色
- 两边的是功能按钮,由一个白色的图标和一个黑色半透明的圆形背景组成:图标由白色变为黑色,背景由黑色半透明变为白色透明
- 中间的标题文字由透明色变为黑色
代码
scrollHeight = banner.getLayoutParams().height;
scrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (scrollY <= scrollHeight) {
scrollScale = (float) scrollY / scrollHeight;
scrollAlpha = (int) (255 * scrollScale);
//文字由透明变为黑色
txTitle.setTextColor(Color.argb(scrollAlpha, 0, 0, 0));
//背景由透明变为白色
topView.setBackgroundColor(Color.argb(scrollAlpha, 255, 255, 255));
//按钮背景由黑变白
btnLeft.setColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
btnRight.setColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
//按钮文字由白变黑
scrollAlpha = 255 - scrollAlpha;
btnRightIcon.setTextColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
btnLeftIcon.setTextColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
}
}
});
然后运行,看效果,缓慢滑动没有问题,快速滑动,功能按钮的背景没有消失~~~
修正代码
scrollHeight = banner.getLayoutParams().height;
scrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (scrollY <= scrollHeight) {
//开启滑动过快
isCommitColor = false;
scrollScale = (float) scrollY / scrollHeight;
scrollAlpha = (int) (255 * scrollScale);
//文字由透明变为黑色
txTitle.setTextColor(Color.argb(scrollAlpha, 0, 0, 0));
//背景由透明变为白色
topView.setBackgroundColor(Color.argb(scrollAlpha, 255, 255, 255));
//按钮背景由黑变白
btnLeft.setColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
btnRight.setColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
//按钮文字由白变黑
scrollAlpha = 255 - scrollAlpha;
btnRightIcon.setTextColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
btnLeftIcon.setTextColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
} else {
if (!isCommitColor) {
//防止滑动过快bug
isCommitColor = true;
//文字由透明变为黑色
txTitle.setTextColor(Color.BLACK);
//背景由透明变为白色
topView.setBackgroundColor(Color.WHITE);
//按钮背景由黑变白
btnLeft.setColor(Color.WHITE);
btnRight.setColor(Color.WHITE);
//按钮文字由白变黑
btnRightIcon.setTextColor(Color.BLACK);
btnLeftIcon.setTextColor(Color.BLACK);
}
}
}
});
当滑动距离超过参照物的高度scrollHeight
就强制设置为想要的效果
加上一个boolean isCommitColor
为了节约内存
Library
注意
theme
要设置成全屏
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
- 使用
Sofia
设置沉浸式效果
Sofia.with(this)
.statusBarDarkFont()
.invasionStatusBar()
.fitsSystemWindowView(topView)
.navigationBarBackground(Color.BLACK);
什么是IconFont?
阿里的字体图标,可以动态改变颜色,具体用法自行百度华为的虚拟按键可能有问题,
Sofia
还没有兼容好