2.4　设置向导界面

设置向导中有四个UI界面，分别为手机防盗模块的展示界面、绑定SIM卡界面、选择安全联系人界面、设置完成界面。本节将针对这四个界面以及涉及的自定义样式和属性分别进行详细讲解。

2.4.1　小圆点界面

设置向导的四个界面中，都会用到显示滑动到当前界面的小圆点。因此先来开发小圆点界面，方便其他界面使用，然后依次开发设置向导界面。

界面中这些小圆点实际上就是RadioGroup中放了一组RadioButton ，通过android：background属性来指定按钮的颜色，具体代码如【文件2-8】所示。

【文件2-8】setup_radiogroup.xml

在上述代码中，使用了一个背景选择器circle_purple_bg_selector，该背景选择器用于控制按钮点击时显示的颜色，当滑动到第几个页面时所对应的第几个按钮就显示为紫色，其他按钮显示白色，该背景选择器代码如【文件2-9】所示。

【文件2-9】res/drawable/circle_purple_bg_selector.xml

从上述代码可以看出，circle_purple_bg_selector.xml并没有直接指定颜色，而是引入了另外两个自定义属性circle_purple.xml和circle_white.xml，这两个自定义属性中分别指定了按钮颜色为紫色、白色，按钮形状为实心圆，具体代码如【文件2-10】和【文件2-11】所示。

【文件2-10】res/drawable/circle_purple.xml

【文件2-11】res/drawable/circle_white.xml

2.4.2　向导界面（一）

设置向导第一个界面使用了两个线性布局，将界面分为两大部分，用于控制布局所占的权重。上部分的线性布局嵌套了一个相对布局和一个线性布局，其中相对布局中放一个安全图标和文字“手机防盗向导”；线性布局中又嵌套了两个线性布局，分别用于放置SIM卡变更报警、GPS追踪的提示文字及图标，以及远程锁屏、远程删除数据的提示文字及图标；下半部分的线性布局中通过<include/>引入了小圆点布局。设置向导一的图形化界面如图2-9所示。

图2-9所示设置向导一对应的布局文件如【文件2-12】所示。

【文件2-12】activity_setup1.xml

上述布局中，使用了很多TextView控件，为了减少代码的重复量，将其样式定义在styles.xml文件中，具体代码如【文件2-13】所示。

【文件2-13】res/values/styles.xml

需要注意的是，textview14sp样式暂时不会用到，它是在获取联系人的Item布局中使用的，暂且一起进行定义。

2.4.3　向导界面（二）

设置向导第二个界面同样分为两大部分，上部分的线性布局包含一个相对布局、两个线性布局，其中相对布局用于放置SIM卡图标及文字；第一个线性布局放置一个图标及文字提示信息；第二个线性布局放置一个Button按钮，用于点击绑定SIM卡。下部分的线性布局中引入了小圆点布局。设置向导二的图形化界面如图2-10所示。

图2-10所示设置向导二对应的布局文件如【文件2-14】所示。

【文件2-14】activity_setup2.xml

上述代码中，绑定SIM卡的提示文字是定义在strings.xml文件中的，通过属性android：text="@string/_sim_sim_bind_info"将其引入，具体代码如【文件2-15】所示。

【文件2-15】res/values/strings.xml

当前布局下方“绑定SIM卡”按钮使用了背景选择器，在按钮按下与释放时显示不同颜色的图片，背景选择器的代码如【文件2-16】所示。

【文件2-16】res/drawable/sim_bind_selector

从上述代码可以看出，默认情况下按钮显示正常背景（sim_bind_n），当按钮按下时，使用蓝色的背景图片（sim_bind_p），当按钮弹起时，使用灰色的背景图片（sim_bind_e）。

值得一提的是，后面代码中很多按钮都使用了背景选择器，用于增强用户体验，在按钮按下与弹起时背景进行变化。如果在代码中动态设置，相对比较麻烦，因此通常使用Android提供的Selector选择器。

2.4.4　向导界面（三）

设置向导第三个界面也分为两大部分，上部分的线性布局包含一个相对布局和一个线性布局，其中相对布局中放了选择联系人图标以及文字，线性布局中放置了一个文本编辑框以及一个Button按钮。下部分的线性布局中引入了小圆点布局。设置向导三的图形化界面如图2-11所示。

图2-11所示设置向导三对应的布局文件如【文件2-17】所示。

【文件2-17】activity_setup3.xml

2.4.5　向导界面（四）

设置向导第四个界面分为两大部分，上部分的线性布局包含两个相对布局，其中第一个相对布局中放置了设置完成图标及提示文字；第二个相对布局中放置一个安全图标及一个ToggleButton按钮，用于开启和关闭防盗保护。下部分的线性布局中引入了小圆点布局。设置向导四的图形化界面如图2-12所示。

图2-12所示设置向导四对应的布局文件如【文件2-18】所示。

【文件2-18】activity_setup4.xml

上述布局文件中，使用了一个ToggleButton控件，该控件用于展示一个可切换的按钮，控制条目的开启与关闭，android：textOn表示选中时按钮的文本，android：textOff属性用于表示未选中时按钮的文本，这两个文本都在代码中进行控制。并且还通过android：background属性为按钮设置背景图片，在指定背景图片时，是通过图片选择器控制的，具体代码如【文件2-19】所示。

【文件2-19】res/drawable/toggle_btn_bg_selector.xml

上述选择器中，当按钮处于被选中状态时，为按钮指定一张紫色的背景图片（swtich_btn_on.png），当按钮未被选中时，为按钮指定一张灰色的背景图（swtich_btn_off.png）。这样就让人觉得当点击按钮时，按钮在不停地切换。

2.4.6　指令界面

设置向导的防盗指令界面由三个相对布局以及一个线性布局组成，三个相对布局分别用于显示安全号码、防盗保护是否开启和重新进入设置向导。下面的线性布局嵌套了四个相对布局，分别用于显示播放报警音乐指令、GPS追踪指令、远程锁屏指令和远程删除数据指令。设置向导指令的图形化界面如图2-13所示。

图2-13所示防盗指令对应的布局文件如【文件2-20】所示。

【文件2-20】activity_lostfind.xml

上述布局文件中，使用include属性引入了一个titlebar.xml布局文件，该布局文件用于设置标题栏，在其他界面中也可以使用。标题栏的代码如【文件2-21】所示。

【文件2-21】titlebar.xml

上述布局文件中，放置了一个TextView控件以及两个ImageView控件，其中TextView控件用于展示标题，ImageView控件用于在标题文字左侧或右侧放置返回按钮。

在防盗指令界面中，用于显示“短信指令功能简介”的TextView控件通过android：background属性引入自定义属性，用于指定TextView控件的背景形状，具体代码如【文件2-22】所示。

【文件2-22】round_purple_tv_bg.xml

在上述选择器中，通过<solid>标签指定当前填充颜色为紫色，<corners>标签用于指定圆角样式，其中android：topLeftRadius属性用于设置左上圆角的半径，android：topRightRadius属性用于设置右上圆角的半径，android：bottomLeftRadius属性用于设置左下圆角的半径，android：bottomRightRadius属性用于设置右下圆角的半径。