赞
踩
相信刚接触Android开发的同学都很熟悉这个界面。
这是Android Studio创建新项目后,默认的Empty Activity的布局。
不知道有多少同学和我一样觉得App标题和头顶状态栏的紫色很丑。今天的笔记就是记录一下怎么修改主题颜色。
我们打开项目的AndroidManifest.xml,可以看到有一行是用来指定主题的。
从这一句可以看出,我们的主题是通过@style资源来指定的。资源路径就在res/values下,名为themes.xml。
如果通过ctrl+左键跳转,会发现有两个。这是因为还有一个是深色主题,在res/values-night目录下也有一个themes.xml。
在郭霖老师的《第一行代码》中也有提到更换主题颜色,书中的文件内容是这样的:
- <resources xmlns:tools="http://schemas.android.com/tools">
- <!-- 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>
- </resources>
郭霖老师在书中给出了各个属性代表的位置。这里引用一下Android Material设计图的Color说明。
也就是说,在原来的文件里,各个属性的含义大致如下:
属性名 | 代表位置 |
---|---|
colorPrimary | 操作栏背景。this is the color applied to the action bar background. |
colorPrimaryDark | 状态栏和导航栏背景。this is the color applied to the status bar and navigation bar. |
colorAccent | 控件背景。this is the color applied to framework controls. |
而现在的文件内容是这样的
- <resources xmlns:tools="http://schemas.android.com/tools">
- <!-- Base application theme. -->
- <style name="Theme.Graduation" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
- <!-- Primary brand color. -->
- <item name="colorPrimary">@color/purple_200</item>
- <item name="colorPrimaryVariant">@color/purple_700</item>
- <item name="colorOnPrimary">@color/black</item>
- <!-- Secondary brand color. -->
- <item name="colorSecondary">@color/teal_200</item>
- <item name="colorSecondaryVariant">@color/teal_200</item>
- <item name="colorOnSecondary">@color/black</item>
- <!-- Status bar color. -->
- <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
- <!-- Customize your theme here. -->
- </style>
- </resources>
首先我们可以看到,style的parent是不一样的。这里的parent是Theme.MaterialComponents.DayNight.DarkActionBar。
这里简单介绍一下MaterialComponents。MaterialComponents是Google官方设计团队发布了基于 Material Design 的组件库,是为了让我们开发的程序有一个统一的样式、品牌效应、互动效果以及操作界面产生的动作,是在Android原生组件的基础上添加了更加丰富的功能和显示效果,遵循Android界面设计的规范,能够更方便的设计产品,缩短开发设计时间。
那这些属性的含义如下:
属性名 | 含义 |
---|---|
colorPrimary | 您的应用的主要品牌颜色,主要用于主题 |
colorPrimaryVariant | 您的主要品牌颜色的较浅/较暗变体,在主题中很少使用 |
colorOnPrimary | 用于显示在原色上方的元素的颜色(例如,文本和图标,根据可访问性,通常为白色或半透明的黑色) |
colorSecondary | 您应用程式的次要品牌色彩,主要用于强调某些需要突出的小部件 |
colorSecondaryVariant | 您的次要品牌颜色的较浅/较深变体,在主题中很少使用 |
colorOnSecondary | 用于显示在辅助颜色顶部的元素的颜色 |
最后一个android:statusBarColor就是系统里的状态栏颜色了,这里状态栏颜色定义了和colorPrimaryVariant一致。
更改主题颜色的方法很简单,他们定义主题颜色的方式都是通过@color调用,所以只需要将你想要的颜色定义到res/colors里再调用即可。
例如,我这样改:
- <item name="colorPrimary">@color/teal_200</item>
- <item name="colorPrimaryVariant">@color/white</item>
- <item name="colorOnPrimary">@color/white</item>
这里我把主题颜色改成了薄荷绿,状态栏颜色改成了白色。
效果如下:
上面的效果我们会发现一个问题。当状态栏被我设置为白色之后,状态栏上的文字因为也是白色所以看不见了。这时候我们就需要去修改一下状态栏文字的颜色。这里提供Google原生的改变状态栏颜色的方法:
- public static void setStatusWordColor(Activity activity, boolean dark) {
- View decorView = activity.getWindow().getDecorView();
- if (dark) {
- decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
- } else {
- decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
- }
- }
本质就是decorView两个标志位的切换。
然后在onCreate里调用一下
- override fun onCreate(savedInstanceState: Bundle?) {
- super.onCreate(savedInstanceState)
- setContentView(R.layout.activity_main)
- ThemeUtil.setStatusWordColor(this, true)
- }
现在就好了
现在的app很少会有上方这个标题栏。要删除这个标题栏也很简单,只需要在onCreate()里加入这样一句话
-
- override fun onCreate(savedInstanceState: Bundle?) {
- super.onCreate(savedInstanceState)
- supportRequestWindowFeature(Window.FEATURE_NO_TITLE) //去除标题栏
- setContentView(R.layout.activity_main)
- ThemeUtil.setStatusWordColor(this, true)
- }
现在就没有标题栏了。
如果整个app里所有的Activity都不想要这个标题栏的话,那么我们还可以统一设置一下。
在之前找到的res/values/theme.xml中,我们有提到style的parent是Theme.MaterialComponents.DayNight.DarkActionBar。
这里就可以看到系统默认是选的有ActionBar的模板,我们只需要换成没有ActionBar的,那么整个App的Activity就都没有标题栏了。
- <style name="Theme.Graduation" parent="Theme.MaterialComponents.DayNight.NoActionBar">
- ...
- </style>
本篇笔记记录了文件主题的属性含义,如何修改主题颜色,如何修改状态栏文字颜色,如何删除标题栏。希望能对大家有一点帮助。
参考文章:
Android透明状态栏与状态栏文字颜色更改 - 简书 (jianshu.com)
【译】为Android设置Material Components主题 - 简书 (jianshu.com)
Material Components(MDC)简单使用介绍_fallinux的博客-CSDN博客_material-components-android
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。