文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android入门教程之创建样式与主题

2022-06-06 07:42

关注

一、前言

作为一个安卓开发者,我们一般把焦点放在app的功能上。但是仅仅有功能是不够的,界面和功能一样重要。有两种方法可以改变app的外观。第一种就是直接在xml中直接修改

View
的属性。这种方法只适合于只有几个
View
Activity
的简单app。第二种方法就是创建自定义的样式和主题。如果你对web开发熟悉,第一种方法类似于使用内联的CSS样式,而第二种类似于使用style sheets。

这篇文章我们将介绍如何创建自定义的样式和主题。

二、创建Styles

样式显然是应用到UI控件上面的。因此,让我们先创建一个新的空activity并添加两个View到布局文件中。


<View android:layout_width="100dp"
 android:layout_height="100dp"
 android:layout_margin="5dp"
 android:background="#009688"
 android:id="@+id/box1" />
<View android:layout_width="100dp"
 android:layout_height="100dp"
 android:background="#00BCD4"
 android:layout_margin="5dp"
 android:id="@+id/box2" />

就如你看到的,属性

layout_width 
layout_margin
是被显式的定义在每个
View
中。

要为这个

View
创建一个新的样式,右键它并选择
Refactor > Extract > Style

现在你会看到一个对话框,里面可以为样式设置名字,还可以选择要包含的属性。我们命名为MyBox,并选择除了

background
之外的所有属性。


当你点击ok之后,你会看到第一个

View
的代码已经变了。


<View android:background="#009688"
 android:id="@+id/box1"
 style="@style/MyBox" />

这个

View
现在有了一个指向MyBox 样式的style属性。你可以打开
res/values/styles.xml
来查看这个样式的定义


<style name="MyBox">
 <item name="android:layout_width">100dp</item>
 <item name="android:layout_height">100dp</item>
 <item name="android:layout_margin">5dp</item>
</style>

一旦一个样式被定义好,你就可以应用到任何

View
中。比如,把MyBox应用到第二个
View


<View android:background="#00BCD4"
 android:id="@+id/box2"
 style="@style/MyBox" />

应用了样式之后,

activity
中的两个
View
就是这个样子:

三、继承 Styles

Android允许你在其他样式的基础上创建一个新样式。换句话说就是允许你继承style。

继承一个style有两种不同的语法。第一种语法被称为隐式的语法,使用.号作为标记。比如,如果你要创建两个

parent
为MyBox,名为 TEAL和CYAN的子样式:


<style name="MyBox.TEAL">
 <item name="android:background">#009688</item>
</style>
<style name="MyBox.CYAN">
 <item name="android:background">#00BCD4</item>
</style>

你也许能猜到MyBox.TEAL 和 MyBox.CYAN 都具有MyBox的所有属性,除此之外,它们还有

android:background
属性。

第二种语法通常叫做显式的语法。它使用一个

parent
属性,其值就是
parent style
的名称。这里是一个定义名为TealBox的样式的代码片段:


<style name="TealBox" parent="MyBox">
 <item name="android:background">#009688</item>
</style>

应用一个派生的

style
跟应用一个普通的没有区别。


<View android:id="@+id/box1"
 style="@style/TealBox" />
<View android:id="@+id/box2"
 style="@style/MyBox.CYAN" />

大多数开发者在继承自己的style时使用隐式的语法,而继承系统

style
时使用显式的语法。

四、创建Themes

目前为止,我们只是把

style
应用到activity里面的
View
中。Android还允许你把
style
应用到整个
activity
和应用中。当一个样式被应用到
activity
或者
application
中时,就变成了一个一个theme(主题)。

默认,使用最新版本Android Studio创建的所有的app都使用一个叫做AppTheme的主题。

AppTheme
AppCompat
的子类,一个非常大而广泛的主题,影响到几乎所有常用视图的外观。

你可以在styles.xml中找到

AppTheme
的定义:


<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
</style>

AppTheme
遵循Material Design.因此,为了创建符合Material Design spec的主题,使用
AppTheme
作为
parent
是一个不错的主题。要不然,你也可以直接使用
Theme.AppCompat
作为
parent

虽然你可以书写XML代码来创建主题-记住,它们只是样式而已-但是在本教程,我将演示如何使用Android Studio的主题编辑器来做这些复杂的工作。

要打开主题编辑器,打开

Tools
菜单选择
Android > Theme Editor

在主题编辑器窗口的右边,你不仅有修改主题的控件,还有创建一个新主题的控件。左边展示主题修改后的预览结果。


要创建一个新主题,点击Theme下拉菜单,选择Create New Theme选项。

在弹出的对话框中,设置新主题的名称为MyTheme然后点击ok。

到此时, styles.xml将有一行新代码:


<style name="MyTheme" parent="AppTheme" />

让我们使用主题编辑器来修改MyTheme。为了让事情变的简单,本教程只修改

colorPrimary
,
colorPrimaryDark
, 以及
colorAccent
属性的值。

要修改

colorPrimary
的值,点击
colorPrimary
按钮。主题编辑器将显示一个颜色对话框。选择你想要的颜色,但是记住给它一个新名字,如果你忘记了,主题编辑器将覆盖AppTheme的这个颜色。

修改

colorPrimaryDark
colorAccent
的值是相同的步骤。主题编辑器将自动根据你选择的
colorPrimary
推荐合适的
bothcolorPrimaryDark
colorAccent

现在MyTheme的定义看起来就是这样:


<style name="MyTheme" parent="AppTheme" >
 <item name="colorPrimary">@color/colorPrimaryMyTheme</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDarkMyTheme</item>
 <item name="colorAccent">@color/colorAccentMyTheme</item>
</style>

五、 应用Themes

在应用我们创建的主题之前,让我们先添加几个常用的控件到

activity
中。这样更容易看到主题的效果。

下面的代码创建了一个普通的Button,一个无边框的Button,一个彩色的Button,一个Checkbox,一个RadioButton,一个Switch,一个Seekbar,一个TextView以及一个EditText:


<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="normal"
 android:id="@+id/normal_button" />
<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="borderless"
 android:id="@+id/borderless_button"
 style="@style/Widget.AppCompat.Button.Borderless" />
<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="colored"
 android:id="@+id/colored_button"
 style="@style/Widget.AppCompat.Button.Colored" />
<CheckBox android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New CheckBox"
 android:id="@+id/checkBox" />
<RadioButton android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New RadioButton"
 android:id="@+id/radioButton" />
<Switch android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New Switch"
 android:id="@+id/switchButton" />
<SeekBar android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/seekBar" />
<TextView android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New Text"
 android:id="@+id/textView" />
<EditText android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/editText"
 android:hint="Input" />

当添加了这些

View
之后,布局看起来就是这样的:

如果你读过Material Design spec。我确定你可以看出来此时的

activity
colorPrimary 
colorPrimaryDark
使用了靛蓝色。而
colorAccent
使用的是粉色。这些都是Android Studio默认的颜色。你可以在项目的
res/values/colors.xml
中找到它们的
hex
值。

要在

activity
中使用这个主题,打开项目的manifest文件,在定义
activity
的地方添加
android:theme
属性,把值设为
@style/MyTheme


<activity android:name=".MainActivity"
 android:theme="@style/MyTheme">
 <intent-filter>
  <action android:name="android.intent.action.MAIN" />
  <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
</activity>

同样,你还可以通过设置

application
android:theme
属性把这个主题应用到整个app。

如果你现在看看你的

activity
,它应该有很大不同。

六、总结

在这个教程中,你学会了如何创建和应用自定义的样式和主题。你可以把这些知识用来让你的app变的更好看。现在多数用户都已经习惯了 Material Design,偏离规则太远会干扰到他们。以上就是这篇文章的全部内容,希望对大家的学习和工作能带来一定的帮助,如果有疑问可以留言交流。

您可能感兴趣的文章:Android主题切换之探究白天和夜间模式基于android样式与主题(style&theme)的详解Android中应用界面主题Theme使用方法和页面定时跳转应用Android 设置主题实现点击波纹效果的示例分析Android多主题颜色的相关问题Android编程应用风格和主题详解android仿iphone主题效果的主菜单Android实现换肤的两种思路分析Android编程实现换肤功能实例Android开发实现切换主题及换肤功能示例


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯