首页 > 代码库 > 第三章 界面UI的基石—UI布局（5）

第三章 界面UI的基石—UI布局（5）

2024-11-04 19:55:02   204人阅读

3.3 样式（Style）和主题（Theme）的使用

3.3.1样式（Style）的使用

不管是应用开发还是游戏开发，我们开发出来的产品，大部分的时候还是要让更多的人来使用的。因此，除了功能上的完善之外，布局上的合理而美观也是我们需要考虑的问题。Style和Theme的设计就是提升用户体验的关键之一。

Style和Theme都是为了改变样式，但是二者又略有区别：

1）Style是针对窗体元素级别的，改变指定控件或者Layout的样式。

2）Theme是是针对窗体级别的，改变窗体样式。

它们的使用是非常灵活的，可以添加系统中所带组件的所有属性。

下面，我们分别来看看它们是如何使用的。

首先，我们在values目录下创建styles.xml文件，打开之后添加上一个样式：

<?xml version="1.0" encoding="utf-8"?>

<resources>

<style name="TextView">

<item name="android:textSize">18sp</item>

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

<item name="android:shadowColor">#FF5151</item>

<item name="android:shadowRadius">3.0</item>

</style>

<style name="TextView_Style2">

        <item name="android:textSize">24sp</item>

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

        <item name="android:shadowColor">#E6CAFF</item>

        <item name="android:shadowRadius">3.0</item>

</style>

</resources>

 

其中，android:shadowColor是指定文本阴影的颜色，android:shadowRadius是设置阴影的半径。设置为0.1就变成字体的颜色了，一般设置为3.0的效果比较好。

接着，我们在布局文件中添加两个文本框，分别给他们用上这两个样式：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

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

  android:orientation="vertical"

  android:layout_width="match_parent"

  android:layout_height="match_parent">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        style="@style/TextView_Style1"

        android:text="我是样式1"/>

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        style="@style/TextView_Style2"

        android:text="我是样式2"/>

</LinearLayout>

 

效果图如图3-10所示。

技术分享

图3-10Style样式的使用

 

可以看到，这两个文本框应用了不同的样式，所以显示了不同的效果。

3.3.2主题（Theme）的使用

说完了style，下面就说说Theme。Theme跟style差不多，从代码的角度来说是一样的，只是概念上的不同。Theme是应用在Application或者Activity里面的，而Style是应用在某一个View里面的。我们还是以一个例子来看看Theme的使用。
我们首先在values目录下创建themes.xml文件，（当然，我们也可以在之前的styles.xml文件中直接添加）打开之后添加上一个样式：

<?xml version="1.0" encoding="utf-8"?>

<resources>

<style parent="@android:style/Theme" name="MyTheme">

<item name="android:windowNoTitle">true</item>

<item name="android:windowBackground">@drawable/ball</item>

</style>

</resources>
 
 
在这里，我们写了一个继承自系统默认的Theme的主题，里面有2个属性，第一个属性是设置无标题，第二个属性是设置背景图。然后，我们在AndroidManifest.xml文件中应用该主题：
 

<?xml version="1.0" encoding="utf-8"?>

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

      package="com.chapter2"

      android:versionCode="1"

      android:versionName="1.0">

<uses-sdk android:minSdkVersion="8" />

<application android:icon="@drawable/icon" android:label="@string/app_name"

                 android:theme="@style/MyTheme">

        <activity android:name=".Chapter2Activity"

                  android:label="@string/app_name">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

</application>

</manifest>
 
 
运行的效果如图3-11所示。
 技术分享

图3-11Theme主题的使用

 

可以看到，我们应用的主题已经生效了。标题栏被设置为了不可见，同时也设置了背景图片。
我们可以将那些展现效果相同的视图设置为相同的样式或主题，提高我们开发的效率和代码的可读性。

第三章 界面UI的基石—UI布局（5）


联系
我们