一、概述
现在大多数的电商APP的商品详情页长得几乎都差不多,并且有些需求需要当你滑动的时候,标题栏产生渐变效果,更甚者需要状态栏/导航栏也要有渐变效果。但是Android的环境并没有iOS环境一样特别统一,Android要适配所有机型所有版本那真是。。。Android开发者不容易。。。。。
二、沉浸模式(Immersive Mode)
关于沉浸式状态栏说法
这篇文章讲解的很清楚,本文不在强调。
三、效果对比
淘宝效果
效果一
效果二
这里用到StatusBarUtil 非常不错的状态栏工具,个人不喜欢依赖,所以将library库copy到自己demo项目当中,这样在自己使用过程中可以加深印象而不是盲目的照搬硬套。
四、实现过程
首先说下效果二,布局是一个自定义的webview+include一个topbar,过程就是进入这个页面时加载一个h5网页实现titlebar渐变效果。
先贴上布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/ll_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.lhj.imm.view.MyWebView
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="match_parent"></com.lhj.imm.view.MyWebView>
</LinearLayout>
<include
layout="@layout/base_topbar"
android:layout_width="match_parent"
android:layout_height="50dp" />
</FrameLayout>
</RelativeLayout>
这里需要实现WebView的OnScrollChangeListener来监听WebView滑动过程,此时就需要重写WebView控件,否则在4.4以下适配会报错(4.4没测试过) AndroidRuntime: FATAL EXCEPTION: main java.lang.NoClassDefFoundError:com.xxxxxx...
代码错误定位到具体类的那一行是你设置WebView监听,那么说明@TargetApi(Build.VERSION_CODES.M)满足不了,需要重写WebView控件来兼容低版本
public class MyWebView extends WebView {
public OnScrollChangeListener listener;
public MyWebView(Context context) {
super(context);
}
public MyWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setOnScrollChangeListener(OnScrollChangeListener listener){
this.listener = listener;
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (listener != null) {
listener.onScrollChanged(this, l, t, oldl, oldt);
}
}
public interface OnScrollChangeListener {
void onScrollChanged(MyWebView scrollView, int x, int y, int oldx, int oldy);
}
}
Activity实现MyWebView.
OnScrollChangeListener接口
WebView.setOnScrollChangeListener来覆盖重写onScrollChanged方法,
具体代码如下:
@Override public void onScrollChanged(MyWebView v,int scrollX, int scrollY, int oldScrollX, int oldScrollY) { // float webcontent = v.getContentHeight() * v.getScale();// webview的高度 // float webnow = v.getHeight() +scrollY;// 当前webview的高度 // Log.e(TAG, "h=" + height + "," + scrollY+","+v.getContentHeight()+"***"+v.getScale()+"==="+webcontent+","+webnow); if (scrollY <= 0) {//置顶 Log.e(TAG, "已经处于顶端h=" + height + "," + scrollY); Toast.makeText(this,"已经处于顶端",Toast.LENGTH_SHORT).show(); } else if (scrollY==height) {// 已经处于底端 Log.e(TAG, "已经处于底端h=" + height + "," + scrollY); Toast.makeText(this,"已经处于底端",Toast.LENGTH_SHORT).show(); } else {//滑动过程 float scale = (float) scrollY / height; int alpha = (int) (255 * scale); //可以根据scale或者alpha来设置渐变过程的效果 //如果背景是图片可以setImageAlpha方法来设置图片透明渐变效果,如: //base_left_iv.setImageAlpha(255 - alpha); //也可以使用setBackground方法来设置背景颜色渐变效果 //如果背景颜色是Drawable且圆角等,可以强转GradientDrawable来设置背景颜色渐变效果,如: //((GradientDrawable) base_left_rl.getBackgroun