沉浸式状态栏(顶部状态栏和底部导航栏)
Toolbar的使用注意点以及封装
WToolBarLayout
镇楼图:
主图片
- 从系统默认的角度:
本文会讲的比较详细,这一部分比较基础,了解的同学可以直接看下一部分
<!-- 仅配置沉浸式 -->
仅配置沉浸式 -> {
不进行任何的更改,在我们创建项目的时候就会展现的默认配置 -> {
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
选择Theme.AppCompat.Light.DarkActionBar作为基本主题,也就是parent,
可以根据item来设置不同的颜色,对照主图片,我们如果想要实现一个简单
的沉浸式,只需要将<item name="colorPrimary">标签与<item name="colorPrimaryDark">
设置为同一种颜色即可
}
示例代码(3处) -> {
1.part1(设置两个相同的颜色)
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimaryDark</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
2.part2(application使用这个主题:AppTheme)
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
3.part3
同样是上面的那段代码,MainActivity中并没有使用独立的主题,则采用application设置的主题
}
效果如图1;
}
<!-- 自定义一个标题栏 -->
如果我们想进一步的设置自定义的标题栏,则进行以下配置 -> {
<!-- Base application theme. -->
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimaryDark</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/common_colorAccent</item>
<!--不使用actionbar-->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
即添加两个item即可
效果如图2;
可以看到,如果这样配置了的话,那么标题栏就没有了,那我们就可以在布局文件中写一个属于自己定义的标题
示例布局:
简单的使用一个toolbar,关于toolbar的知识之后会再抽出一篇来讲,在这里,我们知道可以在标题栏的位置设置
我们想要的布局即可
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:background="@color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
<TextView
android:text="bar"
android:textColor="@color/colorAccent"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
可以看到tooolbar的高度属性我设置了?actionBarSize,这个属性就是获取本应是系统给于的标题栏高度
,那么我们现在toolbar的高度就和系统默认的一样了
效果如图3;
}
图1
图2
图3
- 从安卓布局的角度:
那么我们说完了默认的方式,那如果想要放置一张图片呢?或者标题和状态栏一起采用渐变色呢,从默认的方式则无法完成了,这时候,我们需要一定的自定义,那么这个时候我们肯定不能满足于我仅仅知道需要设置几个item,而需要更深入的了解,了解这次布局具体是怎么完成的,从而可以实现各种各样的需求
//布局角度
布局角度 ->{
1. setContentView(R.layout.activity_main) -> {
再启动activity的时候我们需要设置一个布局id,从而完成对xml的加载,那么,在这一过程中,主题,以及你的
xml文件,具体做了什么工作呢
1-1. 进行xml的解析,这是一个递归的操作,将xml文件转化成一个View;
1-2. 在我们的屏幕上,会创建一个布局,称为DecorView,在这个View当中,包裹着你的主题设置以及xml文件,
即可以看作,他包含了顶部状态栏,xml文件转化的view,以及底部导航栏;
1-3. 这个时候会去解析你所配置的主题,从而决定在DecorView中顶部状态栏,xml文件转化的View,以及底部
状态栏相互之间的位置关系;
1-4. 将这3者依次添加,并为xml文件转化的View赋予id,android.R.id.content;这是一个默认的id,我们之
后把这个xml文件转化的View称为contentView;
那么至此我们就可以知道了,实际上展示在我们屏幕上的,是一个称为DecorView的View,contentView就是我们所配
置的布局,而主题可以决定他们之间的位置关系
当然,主题的作用并不仅仅是用来决定位置关系,他还具有一些其他的功能
}
2. 主题的一些作用,以及在不同版本中主题的配置 -> {
4.4 以下: (无法通过主题来配置沉浸式,我们能做的,只有配置
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item> 从而去掉标题栏)
4.4 以上4.4以下:(需要创建values-v19的文件夹存放
那么我们在两个文件夹中分别操作
并不是我们创建的文件夹,系统默认的:
<style name="CommonAppTheme" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
而我们创建的:
<style name="CommonAppTheme" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
需要采用相同的命名,在不同版本的手机上,会分别读取,而这次添加了两个属性,而这个属性的作用,就是
保证顶部状态栏的透明
)
5.0 以上:(需要创建values-v21的文件夹存放
<style name="CommonAppTheme" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<!--<item name="android:windowTranslucentNavigation">true</item>-->
<!--Android 5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
这一次,之前在4.4以上5.0以下设置的属性,我们有true改成了false,原因呢,就在注释上
在这里,有一点非常重要的要注意,也就是
<!--<item name="android:windowTranslucentNavigation">true</item>-->
属性,我已经注释掉了,为了提高重要性,划分为第三点来讲解
}
3. 重要 <item name="android:windowTranslucentNavigation">true</item>属性 ->{
3-1. 如果是普通并不具有虚拟键盘的手机,则在4.4到5.0版本,5.0以上版本,添加上这一句,则可以保证沉浸
式的完成
3-2. 他的作用,就是之前所说style对于位置的更改,
配置为false时,布局结构的呈现状态是从上到下的,即线性的,依次为顶部状态栏,contentView,底部状态栏
配置为true时,布局结构的呈现状态是覆盖的,即contentView在下面,而顶部状态栏和底部导航栏是覆盖在
contentView上的,可以称之为contentView通顶通底;
此时呈现的状态如图4;
可以看到底部状态栏并不是黑色了,而变为了半透明,而contentView最下方是被底部导航栏所遮挡着的
(注:标题栏是使用了一个渐变色,而这张图其实是下一个状态,我添加了顶部的padding,到现在的话,真正应该
呈现的是标题栏往上一个状态栏距离的样子)
3-3. 这样可能有人觉得如果底部不放东西的话,那么就可以了,其实是不行了,进行测试,在这个时候,所获得
的屏幕高度会比contentView要小,这是因为计算屏幕的高度的时候,所算出来的值是不包含底部导航栏的高度
的
计算方法:
public static int getScreenHeight(Context context) {
DisplayMetrics dm = context.getResources().getDisplayMetrics();
return dm.heightPixels;
}
}
4. 那么是否沉浸式于虚拟键盘就不能共存了呢,也是有方法的,这里我们需要去代码中设置
protected void translateStatueBar() {
Window window = getWindow();
// if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
// window.setStatusBarColor(Color.TRANSPARENT);
// } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// }
window.getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}
这里切记:一定不要设置View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
很多文章均写着要设置,但设置了的话,就又通底了,不过此时地步导航栏是全黑的
可以看到,我们是通过decorView的配置来实现这种效果的,也可以看到,我于一段注释掉了的代码,而这段代码就是
主题style的java写法,如果不喜欢通过主题来配置,那么使用此段代码即可,记得需要在setContentView()之前调用
这是配置主题,就像我们一开始说的那样,contentView()方法执行的时候,是需要拿到主题信息的
}
图4
- 自己填充去掉的状态栏:
先看一下最终要实现的效果,如图5:
那么我们可以看到,除了底部状态栏,那么整个都是contentView了,而我们并没有设置状态栏啊,这时,我们可以自己去添加
一个,其实换一种想法,就是contentView的最上部就是屏幕的最上部了,添加什么已经可以为所欲为了~~
附上计算顶部状态栏的算法,只要添加一个这样高度的view就可以啦
/**
* 获取顶部状态栏的的高度
*
* @param context context
* @return 顶部状态栏的高度
*/
public static int getStatusBarHeight(Context context) {
int result = 0;
int resourceId = context.getResources().getIdentifier("status_bar_height"
, "dimen", "android");
if (resourceId > 0) {
result = context.getResources().getDimensionPixelSize(resourceId);
}
if (result == 0) {
final float scale = context.getResources().getDisplayMetrics().density;
result = (int) (26 * scale + 0.5f);
}
return result;
通过这样的方法,顶部状态栏其实完全就在我们的掌控之中,所以,对于drawerLayout的使用,也变得方便了很多,
并不需要去额外判断,只需要在主布局上添加顶部状态栏高度,而drawerLayout的抽屉部分则不需要处理了
效果如图6;
注意:如果你使用了NavigationView 则需要添加:
app:insetForeground="@android:color/transparent"
这是去掉navigationView自己默认的前景色
}
图5
图6
WToolbarLayout
这是一个在沉浸式的环境下,辅助完成状态栏设置的工具
第一步
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
第二步
添加依赖
implementation 'com.github.qyxghcl:WToolbarLayout:v1.0.0'
第三步
包裹toolbar即可
<com.a50647.wtoolbarhelper.ToolBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/common_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:isHalfTrans="false">
<android.support.v7.widget.Toolbar
android:id="@+id/common_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ToolbarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="@style/Common_Menu_Style">
<TextView
android:id="@+id/common_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:textColor="@color/common_white"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
</com.a50647.wtoolbarhelper.ToolBarLayout>
