来两张效果图对比一下
透明状态栏.png
非透明状态栏.png
第一张图是实现了透明状态栏的效果，第二张图是未实现透明状状态栏。如果还看不出区别，那么请打开手机淘宝和任一手机银行App对比顶部的颜色。
现在好多手机已经是全面屏了，如果我们的应用在顶部还是多出来这么一块黑条，那多不美观啊（APP 主题色是黑色的略过）
那么如何实现？我这里由于项目集成了 statusbarutil所以直接就参考了他例子中的代码来实现了。
StatusBarUtil 地址
StatusBarUtil 在 Fragment 使用
实现
- 导包
compile 'com.jaeger.statusbarutil:library:1.4.0' - 设置
NoActionBar的主题( 我这里实现了右滑返回，所以设置背景为透明)
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:textAllCaps">false</item>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
<item name="android:windowAnimationStyle">@style/AnimationActivity</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
</style>
- 区别不同版本对待
新建一个res/values-v19目录，在目录下创建一个dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="statusbar_view_height">25dp</dimen>
</resources>
在原先的res/values目录下的dimens.xml也添加statusbar_view_height
<dimen name="statusbar_view_height">0dp</dimen>
- 给头部带去一些色彩
我这里是首页实现 透明状态栏，而首页是由一个 Activity + 4 个 Fragment 组成的。这里我们只需要将
Activity状态栏透明即可，在Fragment中可动态设置是否需要透明状态栏。
比如我的首页，顶部是显示图片，我想它顶部状态栏要透明，可以这么做。
第一步：在布局文件的顶部加上<LinearLayout></LinearLayout>中的控件
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|snap"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_collapseMode="pin"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:id="@+id/fake_status_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/statusbar_view_height"
android:background="@color/colorPrimary"/>
<TextView
android:id="@+id/search_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:gravity="center"
android:hint="@string/search_hint_txt"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:background="@drawable/home_search_bg_shape"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
id为fake_status_bar 的View控件是为了适配顶部的状态栏
id为search_layout 的View控件是顶部的搜索框
第二步：在 fragment 中再设置状态栏的颜色为透明
// 透明顶部
setTvTitleBackgroundColor(Color.TRANSPARENT);
public void setTvTitleBackgroundColor(@ColorInt int color) {
fakeStatusBar.setBackgroundColor(color);
}
再比如我的其他页面顶部只想显示 App 的主题色，可以这么做。
设置状态栏颜色.png
直接在布局文件中设置 id为fake_status_bar控件的背景色为主题色即可。
<LinearLayout
android:id="@+id/layout_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:id="@+id/fake_status_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/statusbar_view_height"
android:background="@color/colorPrimary"/>
<TextView
android:id="@+id/tv_project_toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:text="我是 Toolbar "
android:textColor="@color/white"
android:textSize="18sp"
android:gravity="center"
android:background="@color/colorPrimary"/>
</LinearLayout>
喜欢文章的话点下文章底部小心心
本文完，欢迎你留言讨论。
网友评论