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

2401_84815240

于 2024-05-07 09:22:46 发布

阅读量1k

点赞数 17

分类专栏：程序员文章标签： android java 开发语言

本文链接：https://blog.csdn.net/2401_84815240/article/details/138519664

版权

程序员专栏收录该内容

113 篇文章 0 订阅

订阅专栏

app:layout_constraintDimensionRatio=“375:156” />
…

</android.support.constraint.ConstraintLayout>

<android.support.v7.widget.Toolbar
android:id=“@+id/common_index_activity_tb_title”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:minHeight=“?android:attr/actionBarSize”
android:visibility=“visible”
app:contentInsetLeft=“0dp”
app:contentInsetStart=“0dp”
app:layout_collapseMode=“pin”>

</android.support.v7.widget.Toolbar>

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

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

<?xml version="1.0" encoding="utf-8"?>

//请注意这个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了

</android.support.v7.widget.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的方式，减少代码耦合。

总结

最后整个布局是这样子的

<?xml version="1.0" encoding="utf-8"?>

<com.tencent.igame.view.common.widget.IGameRefreshLayout xmlns:android=“http://schemas.android.com/apk/res/android”
xmlns:app=“http://schemas.android.com/apk/res-auto”
android:id=“@+id/igame_competition_detail_fragment_refresh”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>

<android.support.design.widget.CoordinatorLayout
android:layout_width=“match_parent”
android:layout_height=“match_parent”>

<android.support.design.widget.AppBarLayout
android:id=“@+id/appbarlayout”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
app:elevation=“0dp”>

<android.support.design.widget.CollapsingToolbarLayout
android:id=“@+id/collapsing_tool_bar”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
app:contentScrim=“@color/b_G6”
app:expandedTitleMarginEnd=“10dp”
app:expandedTitleMarginStart=“10dp”
app:layout_scrollFlags=“scroll|exitUntilCollapsed|snap”>

<android.support.constraint.ConstraintLayout
android:layout_width=“match_parent”
android:layout_height=“match_parent”>

<ImageView
android:id=“@+id/igame_arena_rank_class_header_bg”
android:layout_width=“match_parent”
android:layout_height=“0dp”
android:scaleType=“centerCrop”
android:src=“@drawable/bg_arena_rank_class”