image
分析
//沉浸式状态栏
api 'com.jaeger.statusbarutil:library:1.5.1'
首先来分析一下我们的布局，在默认的情况下，我们的整个屏幕分为三部分(没有考虑虚拟状态栏)：状态栏、标题栏、内容区域。对于状态栏来说我们只能设置颜色，而像我们上面的需求他应该是一个 Drawable 或者是一张纯图片。
然后在我们的实现中其实是用AppBarLayout包裹着Toolbar,我们操作的也是AppBarLayout,Toolbar保持原状。
实现思路
1. 设置状态栏的颜色为透明和让整个布局沉浸到状态栏中 head_toolbar.xml
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">
style="@style/BaseAppBarLayoutStyle"
android:background="@drawable/shapes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay"
tools:ignore="MissingConstraints">
android:id="@+id/toobar"
style="@style/BaseToolbarStyle"
app:popupTheme="@style/AppTheme.PopupOverlay">
android:id="@+id/toobar_text"
style="@style/ToolBarTitleStyle"
android:text="标题栏" />
2：在BaseActivity 中
@Override
protected void onStart() {
super.onStart();
if (!isInitToolbar) {
initToolbar();
}
}
/**
* 初始化toolbar
* 如果子页面不需要初始化ToolBar，请直接覆写本方法做空操作即可
*
*/
protected void initToolbar() {
mToolBar = findViewById(R.id.base_toolbar);
if (null != mToolBar) {
// 设置为透明色
mToolBar.setBackgroundColor(0x00000000);
// 设置全透明
mToolBar.getBackground().setAlpha(0);
// 清除标题
mToolBar.setTitle("");
setSupportActionBar(mToolBar);
// 子类中没有设置过返回按钮的情况下
if (mToolBar.getNavigationIcon() == null) {
//设置返回按钮
mToolBar.setNavigationIcon(getNavigationIcon());
}
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onNavigationOnClickListener();
}
});
isInitToolbar = true;
//返回文字按钮
View navText = findViewById(R.id.toolbar_nav_text);
if (null != navText) {
navText.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onNavigationOnClickListener();
}
});
}
}
// appbar
AppBarLayout mAppBarLayout = findViewById(R.id.base_appbar);
// 状态栏高度 getStatusBarHeight只是一个获取高度的方法
int statusBarHeight = getStatusBarHeight(mActivity);
//大于 19 设置沉浸和padding
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if (mAppBarLayout != null) {
ViewGroup.MarginLayoutParams appbarLayoutParam = (ViewGroup.MarginLayoutParams) mAppBarLayout.getLayoutParams();
// 更改高度 toolbar_height 的高度是可配置的
appbarLayoutParam.height = (int) (getResources().getDimension(R.dimen.toolbar_height) + statusBarHeight);
// 设置padding
mAppBarLayout.setPadding(mAppBarLayout.getPaddingLeft(),
statusBarHeight,
mAppBarLayout.getPaddingRight(),
mAppBarLayout.getPaddingBottom());
//重新设置回去
mAppBarLayout.setLayoutParams(appbarLayoutParam);
}
}
// 设置沉浸和状态栏的颜色为透明
StatusBarUtil.setTranslucentForImageView(this, 0, null);
}
/**
* 返回按钮
* 子类通过覆写本方法返回需要设置的返回按钮，也可以直接在xml中直接赋值
* @return
*/
protected int getNavigationIcon() {
return R.drawable.ic_chevron_left_write_24dp;
}
/**
* 获取状态栏高度
*
* @param context context
* @return 状态栏高度
*/
private int getStatusBarHeight(Context context) {
// 获得状态栏高度
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
return context.getResources().getDimensionPixelSize(resourceId);
}
/**
* 返回按钮点击
*/
protected void onNavigationOnClickListener() {
finish();
}
看上去我们已经完美，接下来我们就尝试直接将背景颜色更改为 Drawable，为了更显眼，我特地选了一个鲜艳的颜色写了一个shape，代码如下：
android:angle="45"
android:endColor="#03a4f9"
android:startColor="#ff76D2" />
3:value中
base.dimens.xml
112sp
56sp
45sp
34sp
24sp
20sp
16sp
14sp
13sp
12sp
12sp
12sp
14sp
44dp
14dp
config_style
@color/colorPrimary
@color/colorPrimaryDark
@color/colorAccent
false
true
false
true
false
#fff
#fff
#eeeeee
15sp
18sp
48dp
12dp
match_parent
wrap_content
@style/AppTheme.AppBarOverlay
@id/base_appbar
8dp
8dp
8dp
0dp
?actionBarSize
@dimen/toolbar_height
@id/base_toolbar
match_parent
#000
wrap_content
wrap_content
@color/white
center
@null
13sp
true
@id/tv_toolbar_title
16dp
wrap_content
match_parent
2dp
center
true
@color/ToolbarNavTextColor
@dimen/ToolbarNavTextSize
@id/toolbar_nav_text
false
true
@style/ToolbarNavigationButtonStyle
@style/BaseToolbarStyle
false
4：最后一步
image.png
提示:可能会报资源重复的错误，删除掉默认的style 中的就可以了 需要源码的可以联系我