9、样式的学习与使用

手机防盗设置向导中，一共有四个步骤，第一个界面如下：

后面步骤类似，考虑到相同风格的控件使用较多，使用样式来完成。

以上图界面为例，划分的布局为：

TextView显示：1.欢迎使用手机防盗

View显示分割条

TextView显示：您的手机防盗卫士

连续四个：ImageView+TextView

一个Horizontal风格的LinearLayout居中显示四个圆圈图片，表示进行到第几步骤。

一个ImageView显示一个较大的图片

一个右下角的带有图片的Button

创建Values Resource File：style.xml，样式内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="horizontal_linearlayout">
        <!--该样式用于水平布局-->
        <item name="android:orientation">horizontal</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>
    <style name="relativelayout">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>


    <style name="splitter_view">
        <!--该样式用于分割条-->
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">@drawable/devide_line</item>
        <item name="android:layout_marginTop">5dp</item>
    </style>


    <style name="title_text">
        <!--该样式用于标题-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">fill_horizontal</item>
        <item name="android:textSize">30sp</item>
        <item name="android:textStyle">bold</item>
    </style>
    <style name="title_center_text" parent="title_text">
        <!--该样式用于居中标题-->
        <item name="android:layout_gravity">center_horizontal</item>
    </style>


    <style name="content_text">
        <!--该样式用于内容文本-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">20sp</item>
    </style>
    <style name="content_withimage_text" parent="content_text">
        <!--该样式用于前面有image控件的内容文本-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">right</item>
    </style>


    <style name="text_start_image">
        <!--该样式用于文本前的图像-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">left</item>
        <item name="android:src">@drawable/text_start_image</item>
    </style>


    <style name="dot_disable_image">
        <!--灰化圆圈图像-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:src">@drawable/dot_disable</item>
    </style>
    <style name="dot_enable_image">
        <!--绿色圆圈图像-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:src">@drawable/dot_enable</item>
    </style>


    <style name="center_icon_image">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:layout_marginTop">40dp</item>
        <item name="android:layout_marginBottom">40dp</item>
    </style>


    <style name="prev_button">
        <!--上一步-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">left</item>
        <item name="android:layout_alignParentLeft">true</item>
        <item name="android:text">上一步</item>
        <item name="android:drawableLeft">@drawable/prev</item>
        <item name="android:onClick">prev</item>
    </style>
    <style name="next_button">
        <!--下一步-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">right</item>
        <item name="android:layout_alignParentRight">true</item>
        <item name="android:text">下一步</item>
        <item name="android:drawableRight">@drawable/next</item>
        <item name="android:onClick">next</item>
    </style>




</resources>

向导步骤一的界面使用上述样式后的局部文件内容为：

<?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 style="@style/title_text"
        android:text="1.欢迎使用手机防盗" />


    <View style="@style/splitter_view"/>


    <TextView style="@style/content_text"
        android:text="您的手机防盗卫士：" />


    <LinearLayout style="@style/horizontal_linearlayout">
        <ImageView style="@style/text_start_image" />
        <TextView style="@style/content_withimage_text" android:text="sim卡变更报警" />
    </LinearLayout>


    <LinearLayout style="@style/horizontal_linearlayout">
        <ImageView style="@style/text_start_image" />
        <TextView style="@style/content_withimage_text" android:text="GPS追踪" />
    </LinearLayout>


    <LinearLayout style="@style/horizontal_linearlayout">
        <ImageView style="@style/text_start_image" />
        <TextView style="@style/content_withimage_text" android:text="远程数据销毁" />
    </LinearLayout>


    <LinearLayout style="@style/horizontal_linearlayout">
        <ImageView style="@style/text_start_image" />
        <TextView style="@style/content_withimage_text" android:text="远程锁屏" />
    </LinearLayout>


    <!--显示四个步骤的第一步：居中-->
    <LinearLayout style="@style/horizontal_linearlayout"
        android:layout_width="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp">
        <ImageView style="@style/dot_enable_image" />
        <ImageView style="@style/dot_disable_image" />
        <ImageView style="@style/dot_disable_image" />
        <ImageView style="@style/dot_disable_image" />
    </LinearLayout>


    <!--显示一个大图标：居中-->
    <ImageView style="@style/center_icon_image"
        android:src="@drawable/setup1"/>


    <Button style="@style/next_button" />


</LinearLayout>

使用样式的优缺点：

优点：重用性高，样式可继承，可覆盖，这点类似于“类”的继承与覆盖。样式编写完成后，布局就比较容易编写，而且代码量大大降低。

缺点：不是所见即所得，在设计阶段显示不出运行时的效果，往往需要动态运行才能显示出效果，在这方面降低了开发效率。

如下图是在编码阶段的设计预览图，完全就是一坨屎。