上一篇文章中,已经正常的将QMUI框架引入到项目中了,并且实现了调用框架里面的对话框功能。
上一篇链接:QMUI Android框架初步使用1-环境配置到正常现实对话框
这次继续在上一篇的基础上,将状态栏改为沉浸式,即修改为跟官方demo效果一样。
1、添加沉浸式状态栏,只要一行代码就够了。如下图所示,官方指引:
通过在Activity中调用QMUIStatusBarHelper.translucent()方法,即可实现沉浸式状态栏的效果。
那么我们在MainActivity 的 onCreate方法中添加这行代码。
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 沉浸式状态栏QMUIStatusBarHelper.translucent(this);}
结果却发现界面变成全白,如下图所示。跟官方的效果不一样,没有显示出官方看到的模样。难道所我们的代码加错了?查找原因。
注意到状态栏没了,连最上面的显示时间和信号的也没了,变成了全屏。那么去看看官方的demo源码是怎么使用的。官方的demo,沉浸式状态栏的样例文件是TranslucentActivity这个类,如下图所示。
官方的demo是一整个框架,代码比较复杂,我们要抽丝剥茧,只需要使用核心代码。找到了官方代码调用QMUIStatusBarHelper.translucent(this);的地方,前后都有很多其他代码。先不管那些,往下看。有个initTopBar();函数,看名字,难道我们也要初始化状态栏。
进去看看代码。好像是设置背景颜色和标题。那我们也就依葫芦画瓢,设置一下颜色和标题,看看效果。
直接把整个initTopBar函数的代码复制到我们的项目中,报错,提示mTopBar未定义。那我们也定义,按照官方demo把顶部的@BindView(R.id.topbar) QMUITopBar mTopBar;这一行复制进去。提示BindView报错。BindView是什么鬼,没见过?百度一下。好像是根据注释来生成控件的绑定事件,大致看了下,搞不明白,先不管了。看官方的使用,在头部引入了“import butterknife.BindView;”和“import butterknife.ButterKnife;”这2行,那我们也引入进去。还是在butterknife处标红报错,继续查找哪里出了问题。最后,需要添加编译引用。在Gradle Scripts那里,找到build.gradle(Module:app)文件,在dependencies里面添加butterknife的编译引用。注意把compile改成implementation。如下所示,添加编译依赖。
dependencies {implementation fileTree(dir: 'libs', include: ['*.jar'])implementation 'com.android.support.constraint:constraint-layout:1.1.0'implementation 'com.qmuiteam:qmui:1.1.2'implementation 'com.jakewharton:butterknife:8.4.0'annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'testImplementation 'junit:junit:4.12'androidTestImplementation 'com.android.support.test:runner:1.0.2'androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'}
现在再看,BindView不报错了,但是topbar还是标红报错,提示未定义。查看官方源码,我们也需要在layout布局文件中,添加状态栏区域。在我们的activity_main.xml文件中,在按钮的上面添加状态栏布局代码。如下图所示。
<LinearLayout xmlns:android="/apk/res/android"...><com.qmuiteam.qmui.widget.QMUITopBarandroid:id="@+id/topbar"android:layout_width="match_parent"android:layout_height="?attr/qmui_topbar_height"/><Button... /><Button.../></LinearLayout>
颜色值app_color_theme_4报错未定义,那么把颜色定义文件colors.xml拷贝到我们的res下values文件夹中,直接覆盖掉我们之前的colors.xml文件。
现在项目不报错了,运行试试。一运行就报错,看debug的提示,是在空的对象上调用了QMUITopBar.setBackgroundColor(int)方法。跟那个初始化代码有关。
再对比一下官方,我们把ButterKnife.bind(this, root);也加上去,弄的跟官方的一样。代码如下。注意我们自己的setContentView要注释掉。
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// setContentView(R.layout.activity_main);// 沉浸式状态栏QMUIStatusBarHelper.translucent(this);//初始化状态栏View root = LayoutInflater.from(this).inflate(R.layout.activity_main, null);ButterKnife.bind(this, root);initTopBar();setContentView(root);}
现在再运行,出现如下效果。状态栏出来了,不过跑到中间去了。
这可能跟我们的layout文件的gravity设置为center有关。因为既然状态栏是在layout中定义的位置,那么就是由布局文件控制的。我们调整一下,去掉gravity属性。结果却变成了下面的样子,感觉状态栏的高度好像少了一截。
我们需要在layout文件中再加上android:fitsSystemWindows="true",在看效果。状态栏的高度正常了,不过颜色是白的。
按照官方demo,设置一下背景颜色。在布局文件layout中添加android:background="@color/app_color_theme_4",再看效果。一切正常了。
但是我们的和官方的,还是有点差异。主要是颜色上跟官方还不一样。官方的背景是白色的。我们在下一篇文章中再调吧。
下一篇链接:QMUI Android框架使用探索与详细步骤3-沉浸式状态栏颜色调整及按钮应用
现在整体的代码贴出来。为节省篇幅,非核心的代码就省略掉。
activity_main.xml文件
<?xml version="1.0" encoding="utf-8"?><!--~ *************************************************************~ 文件:activity_main.xml 模块:app 项目:QMUI_Practise~ 当前修改时间:05月29日 19:37:00~ 上次修改时间:05月29日 19:36:55~ 作者:大路~ Copyright (c) ~ *************************************************************--><LinearLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/app_color_theme_4"android:orientation="vertical"android:fitsSystemWindows="true"tools:context=".MainActivity"><com.qmuiteam.qmui.widget.QMUITopBarandroid:id="@+id/topbar"android:layout_width="match_parent"android:layout_height="?attr/qmui_topbar_height"/><Button... /><Button.../></LinearLayout>
MainActivity.java文件:
import ...public class MainActivity extends Activity {@BindView(R.id.topbar) QMUITopBar mTopBar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// setContentView(R.layout.activity_main);// 沉浸式状态栏QMUIStatusBarHelper.translucent(this);//初始化状态栏View root = LayoutInflater.from(this).inflate(R.layout.activity_main, null);ButterKnife.bind(this, root);initTopBar();setContentView(root);}private void initTopBar() {mTopBar.setBackgroundColor(ContextCompat.getColor(this, R.color.app_color_theme_4));mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {finish();overridePendingTransition(R.anim.slide_still, R.anim.slide_out_right);}});mTopBar.setTitle("沉浸式状态栏示例");}public void onClickShowDefaultDialog(View view) {...}public void onClickShowQMUIDialog(View view) {...}}