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>

使用样式的优缺点：

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

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

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