Android UI：主题和样式

最新推荐文章于 2022-08-13 14:21:50 发布

danpincheng0204

最新推荐文章于 2022-08-13 14:21:50 发布

阅读量313

点赞数

文章标签： python java android html css

本文是我们名为“ Android UI设计–基础 ”的学院课程的一部分。

在本课程中，您将了解Android UI设计的基础知识。您将了解用户输入，视图和布局以及适配器和片段。在这里查看！

1.简介

在之前的文章中，我们讨论了布局以及如何组织Views以创建有吸引力的用户界面。我们看到Android SDK提供了多个layout managers和View s ，如果不够用的话，我们可以创建自定义layout manager和View 。我们还讨论了drawable ，当我们要自定义一些小部件时，它非常有用。

在本文中，我们将描述如何使用style和theme 。这是开发应用程序时的一个重要方面，因为使用样式和主题，我们可以为我们的应用程序打上品牌并具有和谐的外观。

布局和Views指定用户界面的结构时，样式和主题定义其外观。 Android中的主题是什么？

主题是一组样式，可以应用于整个应用程序或单个Activity 。它有助于创建吸引人的用户界面。另一方面，样式指定一组属性，这些属性对View或Window外观有影响。这些属性指定字体大小，字体系列，背景颜色，字体颜色等。我们可以想象，一种样式就像网页中CSS，它将内容结构与它在屏幕上的显示方式分开。

在XML中创建布局时，我们使用layout managers和Views 。使用“ Views我们可以指定例如背景色，字体颜色，“ View大小”等。例如，假设我们有一个简单的TextView ，如下所示：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FF0000"
    android:text="Hello style"
    android:textColor="#FFFFFF"
    android:textSize=""14sp"" >

</TextView>

查看上面的代码，我们发现有一些错误：我们不仅向View添加了有关其内容的信息，而且还添加了有关其外观的信息，并直接对其进行了硬编码。这是非常糟糕的做法，因为如果要更改文本颜色，我们应该在用户界面定义中查找每个TextView 。

此外，在文本消息大小相同的一致且吸引人的用户界面中，我们将必须为布局中的每个TextView复制文本大小信息。这是一个经典示例，其中使用样式可以避免数据重复，将布局结构与其外观分开并提高XML文件的可读性。

样式和主题是非常相似的概念：当我们将样式应用于Activity或应用程序时，而不是将其应用于单个View ，我们将其称为主题。在这种情况下，属于Activity /应用程序的View每个属性都将由Activity /应用程序样式指定。例如，我们可以定义样式的文本大小和颜色，并将其应用于Activity 。这样，所有文本将看起来像样式中定义的一样。

2.样式定义

现在我们知道样式是什么，我们必须在应用程序中定义它。为此，我们必须在res/values下创建一个XML文件。我们可以根据需要选择文件名，但文件扩展名必须是.xml 。在资源标签内定义了样式。因此，我们有：

<resources xmlns:android="http://schemas.android.com/apk/res/android" >

    <style
        name="MyTextStyle"
        parent="@android:style/TextAppearance" >

        <item name="android:textColor">#FF0000</item>

        <item name="android:textSize">14sp</item>
    </style>

</resources>

这样，我们定义了一种称为MyTextStyle的新样式，并定义了一些在项目标签中指定的属性。注意，在样式定义中，我们使用了parent属性。这是一个可选属性，如果我们希望已定义的样式从父样式继承其属性，则可以使用该属性。然后，在样式定义中，我们可以覆盖父属性。在样式标签下，我们定义了两个项目，因此我们指定了两个属性。

item标记具有名称属性，该属性定义了属性名称。这是我们要应用样式的属性的名称，标签内容是属性值。在我们的示例中，我们定义了一个名为android:textColor的属性，为其分配了值#FF0000和另一个名为android:textSize的14sp并14sp分配了值14sp 。

遗产

如前所述，样式可以使用style标签中的parent属性从父样式继承。因此，我们可以创建具有样式的层次结构。在同一XML样式文件中还有另一种实现分层结构的方法：我们可以简单地使用. 符号。

例如，我们可以假设我们要创建另一个名为MyTextStyleHuge样式，该样式从MyTextStyle继承但覆盖文本大小：

<style name="MyTextStyle.MyTextStyleHuge" >
    <item name="android:textSize">30sp</item>
</style>

我们可以通过这种方式继续添加新的继承。

样式属性

每种样式都使用item标记定义一组属性的值。属性名称是View定义的属性的名称。例如，在查看TextView我们注意到它具有XML属性部分的文档中描述的一组属性。如果要定义此属性之一的样式，则必须在item标签的属性名称中使用相同的名称。

在上面的示例中，我们使用了属性android:textSize和android:textColor ，根据文档，它们是TextView两个属性：第一个用于定义文本大小，另一个用于文本颜色。

一旦定义了样式，就必须应用它。如前所述，我们可以将其应用于单个View ， Activity或应用程序。例如，如果我们要将样式应用于单个View可以通过以下方式使用style属性：

<TextView
    style="@style/MyTextStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with style" />

现在，我们将MyTextStyle应用于TextView 。这两种方式是等效的：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello without style"
    android:textColor="#FF0000"
    android:textSize=""14dp"" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with style"
    style="@style/MyTextStyle"/>

在左侧，我们采用了应避免的不良做法，而在右侧，我们采用了最佳做法。使用布局中的这两个TextView运行一个应用程序：

图1

如您TextView ，两个TextView的结果都相同。

3.创建和应用主题

我们知道主题是一种特殊的样式，它应用于Activity或应用程序而不是单个View 。主题始终是一种样式，当我们要定义主题时，我们使用定义样式之前使用的相同技术，因此我们在res/values下创建一个XML文件。 Android提供了大量主题和样式，我们可以使用它们或覆盖对其进行自定义。

让我们假设我们想为所有将背景设置为绿色的应用程序创建一个主题。在这种情况下，我们以这种方式定义了一种称为AllGreen的样式：

<style
    name="AllGreen"
    parent="@android:style/Theme.Black" >

    <item name="android:background">#00FF00</item>

</style>

然后将其应用于Manifest.xml的应用程序：

<application
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AllGreen" >

</application>

运行这样的应用程序，我们将得到以下结果：

图2

结果， Activity背景是我们想要的绿色。我们之前已经为TextView定义了一种样式，现在我们想在主题中使用它。为此，我们必须对其进行一些修改：

<resources xmlns:android="http://schemas.android.com/apk/res/android" >

    <style
        name="MyTextStyle"
        parent="@android:style/Widget.Text&lt;code>View&lt;/code>" >

        <item name="android:textColor">#FF0000</item>

        <item name="android:textSize">14sp</item>
    </style>

    <style
        name="AllGreen"
        parent="@android:style/Theme.Black" >

        <item name="android:background">#00FF00</item>

        <item name="android:textViewStyle">@style/MyTextStyle</item>
    </style>

</resources>

运行我们拥有的应用程序：

图3

到目前为止，我们仅使用纯色作为背景，并且已经看到很容易更改背景，但是如果要使用渐变色怎么办？

在上一篇文章中，我们描述了如何创建渐变：我们必须在res/drawable目录下创建一个XML扩展名的文件；我们称其为grandient_red.xml ：

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <gradient
        android:endColor="#AA0000"
        android:startColor="#FF0000"
        android:type="linear" />

</shape>

现在，我们必须以样式引用它，为简单起见，我们可以创建另一个样式文件，称为style_gradient.xml ：

<resources xmlns:android="http://schemas.android.com/apk/res/android" >

    <style
        name="RedGrad"
        parent="@android:style/Theme.Black" >

        <item name="android:background">@drawable/gradient_red</item>
    </style>

</resources>

如您drawable我们使用@drawable/file_name引用了我们在drawable目录下创建的drawable 。运行具有这种风格的应用程序，我们可以：

图4

到目前为止，无论何时定义颜色或字体大小，我们都使用一些硬编码值。即使有可能，出于以下几个原因也不建议这样做：

例如，如果要更改颜色或字体大小，则必须在样式文件中查找这些值。
我们想根据平台版本或屏幕尺寸来更改字体大小和颜色。

因此，将颜色定义和/或字体大小等移至外部资源并以样式引用它们是一个好习惯。

因此，让我们重写之前使用的文本样式，这一次我们将样式写入一个名为style_text.xml的XML文件中：

<resources>

    <style name="MyTextStyle1" >

        <item name="android:textColor">@color/red</item>

        <item name="android:textSize">@dimen/myTextSize</item>
    </style>

</resources>

在这种样式中，我们引用了设置文本颜色和文本大小的外部资源。在这种情况下，我们必须创建两个文件：一个文件可以调用包含颜色定义的colors.xml ，另一个文件包含称为dimens.xml的尺寸：

<resources>
    <color name="red">#FF0000</color>
</resources>
<resources>
    <dimen name="myTextSize">14sp</dimen>
</resources>

现在我们知道可以使用@符号引用外部资源，但是有时我们希望引用单个样式元素而不是整个样式。

例如，我们要引用当前的文本颜色，但是我们不知道操作系统将使用哪种颜色。我们该怎么做？ Android提供了? 符号，我们可以使用它来访问单个元素。例如，我们可以假设要将文本颜色值设置为Android OS中定义的值：

<style name="TextRef" >

    <item name="android:textColor">?android:attr/textColorLink</item>

</style>

使用此表示法，我们将当前文本颜色设置为用于链接的默认文本颜色。运行我们拥有的应用程序：

图5

主题和平台

Android提供了一个有趣的功能，当我们想为可以在不同Android版本上运行的不同设备创建应用程序时，该功能很有用。

到目前为止，我们仅使用res/values并创建了几个表示样式，尺寸，颜色等的文件。 Android可以根据平台版本使用不同的资源，因此我们可以根据平台版本调整主题和样式，或者甚至可以根据平台创建具有不同颜色的不同样式。

我们知道较新的Android版本引入了一些新功能，API和资源，包括样式和主题。当我们的应用在具有新Android版本的设备上运行时，我们可以使用较新的主题。同时，我们希望保持与旧版Android的兼容性。使用平台相关的资源，我们可以实现此目标。

为了创建依赖于平台版本的资源集，我们必须在res下创建一个名为values-vxx的目录，其中xx是API级别；例如，如果我们要创建适合于Android 3.0（API级别11）或更高版本的资源集，则可以创建一个名为values-v11的目录。在此目录下，我们创建样式和主题。如果我们注意到使用Eclipse作为IDE时，它会默认创建两个主题，一个在res/values ：

<style name="AppBaseTheme" parent="android:Theme.Light">

另一个在res/values-v11 ：

<style name="AppBaseTheme" parent="android:Theme.Holo.Light">

如您所见，这两个主题具有相同的名称，但继承自不同的父母。

我们不仅可以根据平台版本来指定主题，还可以根据屏幕尺寸来指定主题。例如，如果要在最小屏幕尺寸至少600dp时应用主题，则可以创建一个名为values-sw600dp的目录，并在其下创建样式文件。仅当设备的最小屏幕尺寸至少600dp时，才会应用此样式和主题。当我们要根据屏幕尺寸提供不同的样式/主题时，此技术很有用。例如，我们只能在res/values定义一种样式/主题，并根据屏幕大小提供不同的文本大小。在这种情况下，我们只能创建一个名为dimens.xml的文件。

4。结论

现在，我们知道了如何使用样式和主题，回顾一下我们应该遵循的一些基本规则非常有用：

请勿将硬编码的值用于颜色，大小等。
定义样式或主题，并在小部件定义中使用style=”...”来引用样式。
在样式定义中，不要直接在XML文件中使用值，而要使用外部资源来引用主题。例如，使用@color/color_name引用颜色。
根据平台版本提供不同的样式或主题。
根据屏幕大小提供不同的资源。

5.下载源代码

这是关于如何使用Android主题和样式的课程。您可以在此处下载源代码： themeStyle.zip

翻译自: https://www.javacodegeeks.com/2015/09/android-ui-themes-and-styles.html