android values-v21 style 报错,Android开发:Translucent System Bar 的最佳实践

Translucent System Bar 的最佳实践

近几天准备抽空总结Android一些系统UI的实践使用,于是开始动手建了一个库 AndroidSystemUiTraining ,边撸代码边写总结

今天开写第一篇,对 Translucent System Bar 的实践做一些总结。说起 Translucent System Bar 的特性,可能有些朋友还比较陌生,这里做一下简单的介绍。

0acc12c29c1b

Android 4.3豌豆荚

看上图,Android 4.4之前,即使我们打开手机app,我们还总是能看到系统顶部那条黑乎乎的通知栏,这样会使得app稍显突兀。于是Android 4.4开始,便引入了Translucent System Bar的系特性,用于弥补系统通知栏突兀之处。(估计也是向ios学习,因为ios一大早就有这个特性)。我们先来看看 Translucent System Bar 新特性引入后,发生了什么样的变化。下面截取了 中华万年历的天气预报界面 和 QQ音乐主界面 的效果(两个界面的效果实现 Translucent System Bar 的方式有些区别,下文会细讲)

0acc12c29c1b

中华万年历

0acc12c29c1b

QQ音乐

可以看到,系统的通知栏和app界面融为一体,妈妈再也不用面对黑乎乎的通知栏了。有关 Translucent System Bar 的特性就暂且介绍到此。

工程简介

先简单介绍一下工程的结构,核心部分已经圈出,待我逐一讲解

0acc12c29c1b

工程结构

主要的操作都在style.xml 和 AndroidManifest.xml 中,Activity里面没有任何涉及到Translucent System Bar设置的代码,所以可以忽略不看。

ColorTranslucentBarActivity 和 ImageTranslucentBarActivity 分别用于展示两种不同实现方式的效果

要在Activity中使用 Translucent System Bar 特性,首先需要到AndroidManifest中为指定的Activity设置Theme。但是需要注意的是,我们不能直接在values/style.xml直接去自定义 Translucet System Bar 的Theme,因为改特性仅兼容 Android 4.4 开始的平台,所以直接在values/style.xml声明引入,工程会报错。有些开发者朋友会在代码中去判断SDK的版本,然后再用代码设置Theme。虽然同样可以实现效果,但个人并不推崇这种做法。我所采取的方法则是建立多个SDK版本的values文件夹,系统会根据SDK的版本选择合适的Theme进行设置。大家可以看到上面我的工程里面有values、values-v19、values-v21。

第一种方式

第一种方式,需要做下面三步设置

1、在values、values-v19、values-v21的style.xml都设置一个 Translucent System Bar 风格的Theme

values/style.xml

values-v19/style.xml

true

true

values-v21/style.xml

false

true

@android:color/transparent

上面需要注意的地方是,无论你在哪个SDK版本的values目录下,设置了主题,都应该在最基本的values下设置一个同名的主题。这样才能确保你的app能够正常运行在 Android 4.4 以下的设备。否则,肯定会报找不到Theme的错误。

2、在AndroidManifest.xml中对指定Activity的theme进行设置

android:name=".ui.ImageTranslucentBarActivity"

android:label="@string/image_translucent_bar"

android:theme="@style/ImageTranslucentTheme" />

3、在Activity的布局文件中设置背景图片,同时,需要把android:fitsSystemWindows设置为true

activity_image_translucent_bar.xml

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@mipmap/env_bg"

android:fitsSystemWindows="true">

到此,第一种实现方式完成,大家可以看看下面的效果

0acc12c29c1b

ImageTranslucentTheme效果

就跟中华万年历的天气预报效果界面一样,系统的整个导航栏都融入了app的界面中,背景图片填满了整个屏幕,看起来舒服很多。这里还有一个android:fitsSystemWindows设置需要注意的地方,后面会在细讲。接下来看第二种实现。

方式二

相比中华万年历,QQ音乐采用的是另外一种实现的方式,它将app的Tab栏和系统导航栏分开来设置。

0acc12c29c1b

QQ音乐效果风格

由于它的Tab栏是纯色的,所以只要把系统通知栏的颜色设置和Tab栏的颜色一致即可,实现上相比方法一要简单很多。同样要到不同SDK版本的values下,创建一个同名的theme,在values-v21下,需要设置系统导航栏的颜色:

values-v21/style.xml

false

true

@color/color_31c27c

再到ColorTranslucentBarActivity的布局文件activity_color_translucent_bar.xml中设置Tab栏的颜色

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="55dp"

android:background="@color/color_31c27c">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="QQ Music"

android:textColor="@android:color/white"

android:textSize="20sp" />

到此,我们就可以得到和QQ音乐主界面一样的效果了。

0acc12c29c1b

QQ音乐界面实现效果

到此,就大体介绍完了 Translucent System Bar 的两种实现方式了。

android:fitsSystemWindows的“踩坑”

通过前面的两种方式,大家估计会留意到一个地方,就是所有实现 Translucent System Bar 效果的Activity,都需要在根布局里设置 android:fitsSystemWindows="true" 。设置了该属性的作用在于,不会让系统导航栏和我们app的UI重叠,导致交互问题。这样说可能比较抽象,看看下面两个效果图的对比就知道了。

0acc12c29c1b

有fitsSystemWindows设置

0acc12c29c1b

没有fitsSystemWindows设置

注:上面的演示效果,是借助了我的另一个开源项目,详情请戳:AndroidAlbum

这样的话,如果我有10个Activity要实现这种效果,就要在10个布局文件中做设置,非常麻烦。所以,想到一种方法,在theme中加上如下的android:fitsSystemWindows设置:

true

发现果真可以了。所有要实现 Translucent System Bar 的Activity,只需要设置了这个theme即可,改起来也很方便。可惜,后来出现了一个BUG,让我还是得老老实实的回去布局文件中设置。

0acc12c29c1b

Toast文字错位

Toast打印出来的文字都往上偏移了。这里也是我疏忽的地方,因为在布局文件中设置是对View生效,而到了theme进行设置则是对Window生效了,两者在实现上就不一样了。所以,最终只能改回原来的方式去实现。

实践总结

最后做一下小小的总结:

方式一适用于app中没有导航栏,且整体的背景是一张图片的界面;

方式二适用于app中导航栏颜色为纯色的界面;

android:fitsSystemWindows设置要在布局文件中,不要到theme中设置;

怎样,介绍到这里,你会使用 Translucent System Bar 了吗?赶快到你的app中引入吧!

补充更新(2016-02-19)

一些热心的网友反馈,在Android 4.4平台上使用第二种方法失效。我立马跑到Android4.4的真机运行一遍,果真出现下面的bug,顶部变成黑白渐变了。

0acc12c29c1b

4.4平台上第二种方案出现的BUG

在此,先为自己的疏忽向广大读者说声抱歉。以后会最大程度的避免这种低级错误的产生。下面给出此Bug的修复方案:

第一步:去到 ColorTranslucentBarActivity 的布局文件中,将布局划分成为标题布局和内容布局两部分;

第二步:将 ColorTranslucentBarActivity 的根布局颜色设置与标题布局的颜色一致,并将内容布局设置为白色;

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/color_31c27c"

android:fitsSystemWindows="true"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="55dp"

android:background="@color/color_31c27c">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="QQ Music"

android:textColor="@android:color/white"

android:textSize="20sp" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/white"

android:orientation="vertical">

android:id="@+id/btn_show_toast"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Show a toast" />

经过以上两步,即可在 4.4 平台上实现 Translucent System Bar 的效果 。最后附上修复bug后的效果图一张。

0acc12c29c1b

Android 4.4平台bug修复后的效果图

补充更新(2016-02-22)

很多童鞋反应,在每个布局文件中都要写上 android:fitsSystemWindows="true" ,有没有更佳方便的方法,本人当时没有思路。今天收到coder_sharp童鞋反馈的一种更为简便的思路

0acc12c29c1b

coder_sharp童鞋提供的新思路

个人把他的思路,整理成代码,如下:

public abstract class TranslucentBarBaseActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(getLayoutResId());//把设置布局文件的操作交给继承的子类

ViewGroup contentFrameLayout = (ViewGroup) findViewById(Window.ID_ANDROID_CONTENT);

View parentView = contentFrameLayout.getChildAt(0);

if (parentView != null && Build.VERSION.SDK_INT >= 14) {

parentView.setFitsSystemWindows(true);

}

}

/**

* 返回当前Activity布局文件的id

*

* @return

*/

abstract protected int getLayoutResId();

}

所有需要实现效果的界面继承以上的父类,并实现 getLayoutResId 抽象方法即可,就可以不用在布局文件中不断做重复操作了,具体代码详见工程中的 TranslucentBarBaseActivity 和 BestTranslucentBarActivity。

补充更新(2016-02-25)

近几天在琢磨 Material Design 的一些新控件效果,意外的发现上面提到的第二种方式,在将原 values-v21/style.xml

....

....

@color/color_31c27c

换成

....

....

@android:color/transparent

之后,依旧可以实现同样的效果。那么,到了这里你就可以发现,上面提到的两种方式从本质上其实是殊途同归(最终总结得到的就是一种方式)!

我是热爱技术,喜欢开源和分享的Clock,很享受写文和其他开发者们探讨问题的乐趣,其中很多bug都是其他细心的开发者发现的。如果你对我写的内容感兴趣,欢迎关注我的简书,我很乐意把我开发中一些有趣的东西分享到简书中来(虽然目前仅仅是Android,但相信以后肯定会有其他内容的),希望与其他开发者共同探讨,共同进步!

欢迎关注我的简书,以及:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这些文件夹是Android中的资源文件夹,用于存放应用程序所需的各种资源文件,例如图片、布局文件、颜色值、字符串等等。其中,drawable-v21和drawable-v24是用于存放特定版本的Android系统所需的图片资源文件,下面是它们的区别: - drawable-v21:这个文件夹是用于存放Android 5.0(API level 21)及以上版本所需的图片资源文件。通常,这些图片资源文件用于支持Material Design风格的UI设计,如矢量图标、状态选择器等。 - drawable-v24:这个文件夹是用于存放Android 7.0(API level 24)及以上版本所需的图片资源文件。它主要用于支持Android Nougat(7.0)引入的多窗口模式,以及支持新的设备像素密度。 如果你的应用程序需要支持不同版本的Android系统,那么你可以将特定版本所需的图片资源文件放置在对应的文件夹中,这样系统会根据设备的Android版本来自动加载对应版本的图片资源文件。 举个例子,如果你想在Android 5.0及以上版本中使用Material Design风格的矢量图标,那么你可以将这些图片资源文件放置在drawable-v21文件夹中。而如果你想在Android 7.0及以上版本中支持多窗口模式,那么你可以将相关的图片资源文件放置在drawable-v24文件夹中。 在使用这两个文件夹时,你需要注意以下几点: - 文件夹名称必须按照规定的格式命名,即“drawable-vxx”,其中xx代表Android版本号。 - 如果你在drawable文件夹中也有相同名称的图片资源文件,那么系统会优先加载drawable-vxx文件夹中对应版本的图片资源文件。 - 如果你的应用程序只支持较低版本的Android系统,那么你可以将所有图片资源文件都放置在drawable文件夹中,系统会自动加载适合当前设备的版本的图片资源文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值