Android如何实现超级棒的沉浸式体验

阅读量：7139 次

发布时间：2019-06-28

本文共 7107 字，大约阅读时间需要 23 分钟。

欢迎大家前往，获取更多腾讯海量技术实践干货哦~

本文由发表于

做APP开发的过程中，有很多时候，我们需要实现类似于下面这种沉浸式的体验。

沉浸式体验

一开始接触的时候，似乎大家都会觉这种体验实现起来，会比较困难。难点在于:

头部的背景图在推上去的过程中，慢慢的变得不可见了，整个区域的颜色变成的暗黑色，然后标题出现了。

StatusBar变的透明，且空间可以被利用起来，看我们的图片就顶到了顶了。

我们的viewpager推到actionbar的下方的时候，就固定在了actionbar的下方，不能在往上面推了。

底部有一个控件，随着列表的向上滑动，它退出视角范围，以便于给出更多的空间来展示列表，其实整个沉浸式体验都是为了给列表留出更多的空间来展示。

好，总结起来以上就是我们的问题，也是需要解决的，一个一个解决了，这种需求也就实现了，那么，我们如何去一步一步来解决以上的问题呢？

1、头部背景和标题的渐隐渐现

首先，我们来分析第一个问题，头部的背景图在推上去的过程中，慢慢的变得不可见了，这种听起来好像是某种collapse，因此，很容易让人想到CollapsingToolbarLayout，如果你想要比较容易的了解CollapsingToolbarLayout

应用，建议看的文章，他给也给了一个动画，比较详细的介绍了这个的应用，例如：

CollapsingToolbarLayout

对于里面的用法，我这里不作讲解了，但是如果你不了解这个布局的应用，我强烈建议你好好了解一下，才能继续下面走，只是想说明一下，走到这里，你有一个坑需要去填，那就是我们的标题动画可以不是这样的，而且，还是标题还是居中的，注意，这里的实现，标题不是居中的，是靠左的，这本来是Android设计规范，但是设计师偏偏不买Android规范的账，因此，我们必须躺过这个坑，然后，从Stack Overflow上了解到一个：

假设，这个方式是可行的，那么要解决居中的问题后，把返回按钮改为我们的按钮样式，然后，在耍点小诡计，让title开始是透明的，并且的图片：

collapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);//collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);

然而，假设，始终只是一个假设，实际上，这个假设不成立，我在尝试的时候，发现Toolbar中的TextView根本就不能使用android:layout_gravity="center"这种属性好吧，即使强行加上，效果也是靠左的。

那么，如何做，我的解决方式是这样的

然后，include里面的布局是这样的


    
    
     //*****请注意这个View*******///

效果就是这样

当然，这时候，标题是需要你自己设置渐隐渐现的。那么，我们依据什么呢？

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                mTitle.setAlpha(-verticalOffset * 1.0f / appBarLayout.getTotalScrollRange());            }        });

依据的就是对appBarLayout的监听。

2、将statusBar变为透明，且利用他的空间来放我们的布局内容。

/**     * 使状态栏透明,并覆盖状态栏，对API大于19的显示正常，但小于的界面扩充到状态栏，但状态栏不为透明     */    @TargetApi(Build.VERSION_CODES.KITKAT)    public static void transparentAndCoverStatusBar(Activity activity) {        //FLAG_LAYOUT_NO_LIMITS这个千万别用，带虚拟按键的机型会有特别多问题//        //FLAG_TRANSLUCENT_STATUS要求API大于19//        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);//        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);//        //FLAG_LAYOUT_NO_LIMITS对API没有要求//        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {            Window window = activity.getWindow();            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);            window.setStatusBarColor(Color.TRANSPARENT);            window.setNavigationBarColor(Resources.getSystem().getColor(android.R.color.background_dark));        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {            Window window = activity.getWindow();            window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);        }    }

这里是在网上找的一个方法，直接调用即可，但是API需要大于19，相信目前基本上都满足吧。请注意，我的AppBarLayout中并没有这个属性

android:fitsSystemWindows="true"

如果你加了这个属性，嘿嘿，statusbar虽然空间可以利用，但是有一个你挥之不去的颜色覆盖在上面，

然后,你还记得上面那个布局中

//*****请注意这个View*******///

这个作用可大了，就是为了对status_bar原始空间做偏移的，在代码中，需要动态的改变这个View的高度为statusBar的高度，怎么获取：

/**     * 获取状态栏高度     *     * @param context context     * @return 状态栏高度     */    public static int getStatusBarHeight(Context context) {        // 获得状态栏高度        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");        return context.getResources().getDimensionPixelSize(resourceId);    }

完了之后，还需要设置我们自己塞进去的那个toolbar的高度为toolbar的高度加上StatusBar的高度。

3、ViewPager推到actionbar下面就不让在推了

这个其实需要你CollapsingToolbarLayout里面有一个子view是要使用pin模式的，那么这个子view是谁，显然就是那个toolbar了

4、底部控件随着列表的滑动渐渐隐藏

可以看到，底部的控件是覆盖在列表上的，列表向上滑动的时候，把他隐藏，就可以空出更多的控件看列表。那么，如何做呢？

既然，我们是包裹在CoordinatorLayout中，那么，显然，最好的方式是使用layout_behavior了，我这里实现了一个BottomBehavior：

public class BottomBehavior extends CoordinatorLayout.Behavior {    private int id;    private float bottomPadding;    private int screenWidth;    private float designWidth = 375.0f;//设计视图的宽度，通常是375dp，    public BottomBehavior() {        super();    }    public BottomBehavior(Context context, AttributeSet attrs) {        super(context, attrs);        screenWidth = getScreenWidth(context);        TypedArray typedArray = context.getResources().obtainAttributes(attrs, R.styleable.BottomBehavior);        id = typedArray.getResourceId(R.styleable.BottomBehavior_anchor_id, -1);        bottomPadding = typedArray.getFloat(R.styleable.BottomBehavior_bottom_padding, 0f);        typedArray.recycle();    }    @Override    public void onAttachedToLayoutParams(@NonNull CoordinatorLayout.LayoutParams params) {        params.dodgeInsetEdges = Gravity.BOTTOM;    }    @Override    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {        return dependency.getId() == id;    }    @Override    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {        child.setTranslationY(-(dependency.getTop() - (screenWidth * bottomPadding / designWidth)));        Log.e("BottomBehavior", "layoutDependsOn() called with: parent = [" + dependency.getTop());        return true;    }    public static int getScreenWidth(Context context) {        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);        Display display = null;        if (wm != null) {            display = wm.getDefaultDisplay();            Point size = new Point();            display.getSize(size);            int width = size.x;//            int height = size.y;            return width;        }        return 0;    }}

这个里面有两个自定义属性，id，bottomPadding，id表示基于哪个控件的相对位置改变，我这打算基于viewpager

这个控件，看源码可以知道，只有当onDependentViewChanged返回ture时，layoutDependsOn才会被回调。bottomPadding是表示一个初始的偏移，因为viewpager本身不是顶在屏幕顶端的（开始被图片占据了一部分控件），因此，需要扣除这部分占有。

同理，加入让你实现一个悬浮在左侧，右侧，滑动隐藏，停止显示的，也都可以参考类似Behavior的方式，减少代码耦合。

总结

最后整个布局是这样子的


    
        
             
                  
                       
                            
                                 ............                
                        
                            
                         
                    
               
              
              
      
       ..........底部布局