Android沉浸状态栏、Scrollview顶部拉缩、完美结合,打造一个精美的下拉效果

2017-12-16 10:26:28来源:http://mp.weixin.qq.com/s/9QVMJVeSCPxBYNczrN2QFg作者:人点击

分享

【公众号回复“ 1024 ”,送你一个特别推送】



声明原创|本文为codeGoogler授权发布,未经允许请勿转载


正文


最近需求要做一个拉缩渐变的状态栏,往上拉的时候,需要显示actionBar,这个过程是渐变的,顶部的图片背景能实现拉缩,并且还要实现状态栏沉浸式


效果如如下:



主要实现以下三个功能:


实现状态栏的透明化


实现ScrollView的拉缩


实现ActionBar的渐变


实现

第一步


至于实现ScrollView的拉缩这个效果很简单,重写onTouchEvent方法,利用滑动的垂直方向的距离,然后在设置图片的大小


......
case MotionEvent.ACTION_MOVE:
if (!mScaling) {
if (getScrollY() == 0) {
mFirstPosition = event.getY();
} else {
break;
}
}
int distance = (int) ((event.getY() - mFirstPosition) * 0.6);
if (distance < 0) {
break;
}
mScaling = true;
params.height = zoomViewInitHeight + distance;
Log.d(TAG, "params.height == " + params.height + ", zoomViewInitHeight == " + zoomViewInitHeight + ", distance == " + distance);
zoomView.setLayoutParams(params);
return true;

这里要注意的是: 在手指释放的时候需要进行恢复图片的高度


第二步


ActionBar的透明度很简单了,在onScrollChanged里进行操作即可


@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
int transAlpha = getTransAlpha();
if (transView != null) {
Log.d(TAG, "[onScrollChanged .. in ], 透明度 == " + transAlpha);
transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, transAlpha));
}
if (translucentChangedListener != null) {
translucentChangedListener.onTranslucentChanged(transAlpha);
}
}

第三部


至于沉浸式状态栏就很简单了,之前写过帖子


你这样玩过android沉浸式状态栏吗—教你玩出新花样


Activity样式 、状态栏透明、屏幕亮度问题全面解析


这里我简单的封装了一些工具类


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上
View decorView = getWindow().getDecorView();
int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
getWindow().setStatusBarColor(Color.TRANSPARENT);
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
}

在相应的Activity或基类执行这段代码就ok了。


可见在4.4到5.0的系统、5.0及以上系统的处理方式有所不同


除了这种代码修改额方式外,还可以通过主题来修改,需要在values、values-v19、values-v21目录下分别创建相应的主题:


//values


< style name = "TranslucentTheme" parent = "AppTheme" >


</ style >//values-v19
< style name = "TranslucentTheme" parent = "Theme.AppCompat.Light.NoActionBar" >

< item name = "android:windowTranslucentStatus" >true</ item >

< item name = "android:windowTranslucentNavigation" >false</ item >


</ style >//values-v21
< style name = "TranslucentTheme" parent = "Theme.AppCompat.Light.NoActionBar" >

< item name = "android:windowTranslucentStatus" >true</ item >

< item name = "android:windowTranslucentNavigation" >false</ item >

< item name = "android:statusBarColor" >@android:color/transparent</ item >


</ style >


给相应Activity或Application设置该主题就ok了。


两种方式根据需求选择就好了,到这里我们就完成了第一步,将状态栏透明化了。


完成了第一步,我们开始给状态栏加上想要的色彩吧!


在values、values-v19目录添加如下尺寸:


//values<dimen name="padding_top">0dp</dimen>//values-v19<dimen name="padding_top">25dp</dimen>

关于25dp,在有些系统上可能有误差,这里不做讨论!


使用Toolbar实现

页面顶部使用Toolbar(或自定义title) 一般情况状态栏的颜色和Toolbar的颜色相同,既然状态栏透明化后,布局页面延伸到了状态栏,何不给Toolbar加上一个状态栏高度的顶部padding呢:


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:paddingTop="@dimen/padding_top"
android:theme="@style/AppTheme.AppBarOverlay" />

效果图下:




总结


总体来看,还是比较简单的,具体请参考源码。


博客地址:
http://www.jianshu.com/p/05aa5329c3d3
项目地址:
https://github.com/androidstarjack/TranslucentScrollView

阅读更多


一篇文章告诉你FFmpeg环境的搭建和编译


知识总结|插件化学习Hook系统方法分析


NDK项目实战—高仿360手机助手之卸载监听


最新2017(Android)面试题级答案(精选版)


相信自己,没有做不到的,只有想不到的


在这里获得的不仅仅是技术!




日更精彩


微 信 号:codeGoogler


— 终端研发部 —



如果你觉得此文对您有所帮助,可以转发给身边的朋友,一起做一个乐于分享的小猿猿




这里学到不仅仅是技术




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台