【0064】【项目实战】-【手机安全卫士】-【3】

1.对话框展示样式兼容低版本

1.1 存在的问题

【说明】

【BUG1】背景色本来是透明的；

【源码修改】

【BUG2】在对话框的四周存在内边距，需要屏蔽掉，是系统自带的；

【最后的效果】

2.手机防盗界面功能分析

2.1 功能分析

 1 3,手机防盗业务逻辑分析
 2 
 3     输入密码成功后
 4     根据是否设置完成四个导航界面决定跳转到导航界面一,还是手机防盗列表界面
 5         1,跳转到导航界面的第1个,描述功能
 6           跳转到导航界面的第2个,必须,绑定sim卡,才可以跳转到第三个界面
 7           跳转到导航界面的第3个,必须输入电话号码,(两种途径(1,输入2,选择))
 8           跳转到导航界面的第4个,手机防盗的总开关,开启
 9 
10         2,手机防盗功能列表界面
11             展示导航界面三已选中手机联系人号码
12             展示是否开启防盗保护
13             重新对导航界面设置

【说明1】跳转之后的界面

【说明2】

【1】点击下一页的按钮之后按钮本身的颜色会变深；

【2】点击下一页的按钮之后跳转到第二页面；

【说明】点击下一页的按钮之前，必须绑定sim卡；

【说明】跳转到导航界面的第3个,必须输入电话号码,(两种途径(1,输入2,选择联系人))

 

【说明】跳转到导航界面的第4个,手机防盗的总开关,开启

2,手机防盗功能列表界面

展示导航界面三已选中手机联系人号码
展示是否开启防盗保护
重新对导航界面设置

【再次点击手机防盗的按钮需要直接跳转到设置好的界面】

3.最后设置完成界面的书写

3.1 跳转的位置

【说明】有两处需要跳转的地方

一个是在设置密码之后直接跳转到设置完成的界面，一个是在确认密码的页面之后；

3.2 类的书写

【设置完成界面】

3.3 业务逻辑

3.3 .1 最终设置界面的完成

3.3.2【导航的第一个界面的创建创建】

 

【布局的配置】

【目前的效果】

 

 【验证结果】跳转的界面的逻辑没有问题；

 4. 导航界面一布局编写

 4.1 布局效果

【布局的分析】

4.2 布局的源码

【源码】

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6     <TextView
 7         style="@style/TitleStyle"
 8         android:text="1,欢迎使用手机防盗"/>
 9     <TextView
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:textColor="#000"
13         android:textSize="18sp"
14         android:layout_margin="5dp"
15         android:text="您的手机防盗卫士:"/>
16     <TextView
17         android:layout_width="wrap_content"
18         android:layout_height="wrap_content"
19         android:textColor="#000"
20         android:textSize="18sp"
21         android:gravity="center_vertical"
22         android:drawableLeft="@android:drawable/star_big_on"
23         android:text="sim卡变更报警"/>
24     <TextView
25         android:layout_width="wrap_content"
26         android:layout_height="wrap_content"
27         android:textColor="#000"
28         android:textSize="18sp"
29         android:gravity="center_vertical"
30         android:drawableLeft="@android:drawable/star_big_on"
31         android:text="GPS追踪"/>
32     <TextView
33         android:layout_width="wrap_content"
34         android:layout_height="wrap_content"
35         android:textColor="#000"
36         android:textSize="18sp"
37         android:gravity="center_vertical"
38         android:drawableLeft="@android:drawable/star_big_on"
39         android:text="远程数据销毁"/>
40     <TextView
41         android:layout_width="wrap_content"
42         android:layout_height="wrap_content"
43         android:textColor="#000"
44         android:textSize="18sp"
45         android:gravity="center_vertical"
46         android:drawableLeft="@android:drawable/star_big_on"
47         android:text="远程锁屏"/>
82 </LinearLayout>

5. 参照文档,选择器编写

5.1 效果：下半部部分的布局效果

【说明】在下一页的按钮上，点击和未点击存在差异；

点击之后的颜色效果比较深，原理是两张不同的效果的图片的切换；

5.2 中间的四个点的布局

【源码】

 1     <!-- 让内部点的控件水平居中 -->
 2     <LinearLayout 
 3         android:gravity="center_horizontal"
 4         android:layout_width="match_parent"
 5         android:layout_height="wrap_content">
 6         <ImageView 
 7             android:background="@android:drawable/presence_online"
 8             android:layout_width="wrap_content"
 9             android:layout_height="wrap_content"/>
10         <ImageView 
11             android:background="@android:drawable/presence_invisible"
12             android:layout_width="wrap_content"
13             android:layout_height="wrap_content"/>
14         <ImageView 
15             android:background="@android:drawable/presence_invisible"
16             android:layout_width="wrap_content"
17             android:layout_height="wrap_content"/>
18         <ImageView 
19             android:background="@android:drawable/presence_invisible"
20             android:layout_width="wrap_content"
21             android:layout_height="wrap_content"/>
22     </LinearLayout>

【效果】

 

5.3 右下角的下一页按钮的布局

【点击按钮的效果】

【说明】在下一页的按钮上，点击和未点击存在差异；

点击之后的颜色效果比较深，原理是两张不同的效果的图片的切换；

【使用的技术】使用图片的选择器

5.3.1 文档的查询

5.3.2 源码的编写

【布局源码】





 1 <RelativeLayout 
 2         android:layout_width="match_parent"
 3         android:layout_height="match_parent">
 4         <ImageView
 5             android:background="@drawable/setup1"
 6             android:layout_centerInParent="true"
 7             android:layout_width="wrap_content"
 8             android:layout_height="wrap_content"/>
 9         <!-- 图片选择器,在选中和未选中的过程中,切换展示图片 -->
10            <Button
11                android:text="下一页"
12                android:onClick="nextPage"
13                android:layout_alignParentRight="true"
14                android:layout_alignParentBottom="true"
15                android:drawableRight="@drawable/next"               
                  android:background="@drawable/selector_next_btn_bg"
16                android:layout_width="wrap_content"
17                android:layout_height="wrap_content"/> 
18 </RelativeLayout>








6.【.9图片】




6.1拖拽区域


 


 6.2 【.9图片】文字所在区域


 【文字拉伸图片】




6.3 使用工具画一张【.9图片】








【可编辑区域】红色斜杠+黑色遮盖是可编辑区域








7. 接导航界面的源码书写


7.1 按钮的点击事件


【样式的抽取】【style.xml】




 1    <!-- <Button
 2                android:text="下一页"
 3                android:onClick="nextPage"
 4                android:layout_alignParentRight="true"
 5                android:layout_alignParentBottom="true"
 6                android:drawableRight="@drawable/next"
 7                android:background="@drawable/selector_next_btn_bg"
 8                android:layout_width="wrap_content"
 9                android:layout_height="wrap_content"/> -->
10     <style    name="preBtn">
11         <item name="android:text">上一页</item>
12         <item name="android:onClick">prePage</item>
13         <item name="android:layout_alignParentLeft">true</item>
14         <item name="android:layout_alignParentBottom">true</item>
15         <item name="android:drawableLeft">@drawable/previous</item>
16         <item name="android:background">@drawable/selector_next_btn_bg</item>
17         <item name="android:layout_width">wrap_content</item>
18         <item name="android:layout_height">wrap_content</item>
19     </style>
20     <style    name="nextBtn">
21         <item name="android:text">下一页</item>
22         <item name="android:onClick">nextPage</item>
23         <item name="android:layout_alignParentRight">true</item>
24         <item name="android:layout_alignParentBottom">true</item>
25         <item name="android:drawableRight">@drawable/next</item>
26         <item name="android:background">@drawable/selector_next_btn_bg</item>
27         <item name="android:layout_width">wrap_content</item>
28         <item name="android:layout_height">wrap_content</item>
29     </style>






7.2 点击事件的点击方法








7.3【第二个页面的类的创建】






7.4 第二界面的布局


【说明】与第一个界面是非常类似的；直接复制第一个界面的xml文件内容，然后直接粘贴进行修改；




【中间的自定义控件条目的添加】


【说明】直接复制之前的内容然后直接粘贴过来然后修改




【修改的结果】








【下半部部分的布局】源码




 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6     <TextView
 7         style="@style/TitleStyle"
 8         android:text="2,手机卡绑定"/>
 9     <TextView
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:textColor="#000"
13         android:textSize="18sp"
14         android:layout_margin="5dp"
15         android:text="通过绑定sim卡:\n下次重启手机如果发现sim卡变化,就会发送报警短信"/>
16     <!-- 自定义组合控件 -->
17     <com.itheima.mobilesafe74.view.SettingItemView 
18            xmlns:mobilesafe="http://schemas.android.com/apk/res/com.itheima.mobilesafe74"
19         android:id="@+id/siv_sim_bound"
20         android:layout_width="match_parent"
21         android:layout_height="wrap_content"
22         mobilesafe:destitle="点击绑定sim卡"
23         mobilesafe:desoff="sim卡未绑定"
24         mobilesafe:deson="sim卡已绑定">
25     </com.itheima.mobilesafe74.view.SettingItemView>
26     <!-- 让内部点的控件水平居中 -->
27     <LinearLayout 
28         android:gravity="center_horizontal"
29         android:layout_width="match_parent"
30         android:layout_height="wrap_content">
31         <ImageView 
32             android:background="@android:drawable/presence_invisible"
33             android:layout_width="wrap_content"
34             android:layout_height="wrap_content"/>
35          <ImageView 
36             android:background="@android:drawable/presence_online"  //中间的亮点
37             android:layout_width="wrap_content"
38             android:layout_height="wrap_content"/>
39         <ImageView 
40             android:background="@android:drawable/presence_invisible"
41             android:layout_width="wrap_content"
42             android:layout_height="wrap_content"/>
43         <ImageView 
44             android:background="@android:drawable/presence_invisible"
45             android:layout_width="wrap_content"
46             android:layout_height="wrap_content"/>
47     </LinearLayout>
48     <RelativeLayout 
49         android:layout_width="match_parent"
50         android:layout_height="match_parent">
51         <ImageView
52             android:background="@drawable/bind"
53             android:layout_centerInParent="true"
54             android:layout_width="wrap_content"
55             android:layout_height="wrap_content"/>
56         <!-- 图片选择器,在选中和未选中的过程中,切换展示图片 -->
57            <Button
58                style="@style/preBtn"/>  //前一页
59            <Button
60                style="@style/nextBtn"/>  //后一页
61     </RelativeLayout>
62 
63 </LinearLayout>




8.导航界面和功能列表界面跳转逻辑处理


【点击事件的处理】点击上一按钮跳转到第1个导航界面，点击下一页按钮的时候跳转到第3个导航界面；




8.1 跳转界面的源码框架




8.2【第三个导航页面的创建】








 8.3 第三个导航界面的布局








【选择联系人按钮的选择背景的改变】






【布局文件】






8.4   第三个导航页面上一页和下一页按钮的逻辑框架






8.5 第四个导航页面创建和布局












【第四个导航界面的布局源码】




 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6      <TextView
 7         style="@style/TitleStyle"
 8         android:text="4,恭喜您,设置完成"/>
 9      <CheckBox 
10          android:id="@+id/cb_box"
11          android:text="您没有开启防盗保护"
12          android:layout_width="wrap_content"
13          android:layout_height="wrap_content"/>
14      <!-- 让内部点的控件水平居中 -->
15     <LinearLayout 
16         android:gravity="center_horizontal"
17         android:layout_width="match_parent"
18         android:layout_height="wrap_content">
19         <ImageView 
20             android:background="@android:drawable/presence_invisible"
21             android:layout_width="wrap_content"
22             android:layout_height="wrap_content"/>
23         
24         <ImageView 
25             android:background="@android:drawable/presence_invisible"
26             android:layout_width="wrap_content"
27             android:layout_height="wrap_content"/>
28         <ImageView 
29             android:background="@android:drawable/presence_invisible"
30             android:layout_width="wrap_content"
31             android:layout_height="wrap_content"/>
32          <ImageView 
33             android:background="@android:drawable/presence_online"
34             android:layout_width="wrap_content"
35             android:layout_height="wrap_content"/>
36     </LinearLayout>
37     <RelativeLayout 
38         android:layout_width="match_parent"
39         android:layout_height="match_parent">
40         <ImageView
41             android:background="@drawable/phone"
42             android:layout_centerInParent="true"
43             android:layout_width="wrap_content"
44             android:layout_height="wrap_content"/>
45         <!-- 图片选择器,在选中和未选中的过程中,切换展示图片 -->
46            <Button
47                style="@style/preBtn"/>
48            <Button
49                style="@style/nextBtn"/>
50     </RelativeLayout>
51 </LinearLayout>




 【类的创建-逻辑代码】




8.6 所有的跳转界面的效果


【说明】在第四个页面跳转的时候直接返回到了第一个页面；


 因为在逻辑代码中就是具有分支定义的，此时的代码判断没有设置完成的标志，因此会直接返回到第一个界面；




8.7 设置完成的标志的写入




【现在的效果】在第四个导航界面之后会跳转到设置完成的界面；




9. 绑定sim卡序列号


【说明】在第2个导航界面中存在绑定sim卡的功能；


此控件是自定义控件；


设置的状态还需要进行回显；




【说明】首先需要将已有的状态进行回显读出；






【源码】




 1 package com.itheima.mobilesafe74.activity;
 2 
 3 import com.itheima.mobilesafe74.R;
 4 import com.itheima.mobilesafe74.utils.ConstantValue;
 5 import com.itheima.mobilesafe74.utils.SpUtil;
 6 import com.itheima.mobilesafe74.utils.ToastUtil;
 7 import com.itheima.mobilesafe74.view.SettingItemView;
 8 
 9 import android.app.Activity;
10 import android.content.Context;
11 import android.content.Intent;
12 import android.os.Bundle;
13 import android.telephony.TelephonyManager;
14 import android.text.TextUtils;
15 import android.view.View;
16 import android.view.View.OnClickListener;
17 
18 public class Setup2Activity extends Activity {
19     private SettingItemView siv_sim_bound;
20 
21     @Override
22     protected void onCreate(Bundle savedInstanceState) {
23         super.onCreate(savedInstanceState);
24         setContentView(R.layout.activity_setup2);
25         
26         initUI();
27     }
28     
29     private void initUI() {
30         siv_sim_bound = (SettingItemView) findViewById(R.id.siv_sim_bound);
31         //1,回显(读取已有的绑定状态,用作显示,sp中是否存储了sim卡的序列号)
32         String sim_number = SpUtil.getString(this, ConstantValue.SIM_NUMBER, "");
33         //2,判断是否序列卡号为""
34         if(TextUtils.isEmpty(sim_number)){
35             siv_sim_bound.setCheck(false);
36         }else{
37             siv_sim_bound.setCheck(true);
38         }
39         
40         siv_sim_bound.setOnClickListener(new OnClickListener() {
41             @Override
42             public void onClick(View v) {
43                 //3,获取原有的状态
44                 boolean isCheck = siv_sim_bound.isCheck();
45                 //4,将原有状态取反
46                 //5,状态设置给当前条目
47                 siv_sim_bound.setCheck(!isCheck);
48                 if(!isCheck){
49                     //6,存储(序列卡号)
50                         //6.1获取sim卡序列号TelephoneManager
51                         TelephonyManager manager = (TelephonyManager)
52                                 getSystemService(Context.TELEPHONY_SERVICE);
53                         //6.2获取sim卡的序列卡号
54                         String simSerialNumber = manager.getSimSerialNumber();
55                         //6.3存储
56                         SpUtil.putString(getApplicationContext(), ConstantValue.SIM_NUMBER, simSerialNumber);
57                 }else{
58                     //7,将存储序列卡号的节点,从sp中删除掉
59                     SpUtil.remove(getApplicationContext(), ConstantValue.SIM_NUMBER);
60                 }
61             }
62         });
63     }




【注册点击事件】




【存在的问题】缺少权限






【增加的权限】




【演示的效果】




【存储的sim卡的串口号】






【再次点击按钮之后会将绑定的sim卡账号删除】




【原来的存储的sim卡的串号的节点被删除了】




10.第二个导航界面跳转到第三个导航界面


【说明】点击下一页的按钮需要判断是否保存了sim卡的串号；


 


【效果】没有选中，则无法跳转到下一页；选中，则可以跳转到下一页；




11.联系人界面布局编写


11.1 功能的效果


【说明】点击选择联系人，然后会跳转到联系人的界面，然后将该联系人的号码复制到电话框内，然后可以点击下一页按钮；






11.2 class和布局文件的创建


【逻辑框架】




【新建跳转的联系人class】










【新建跳转的联系人布局】线性布局做为排列


 






12 联系人的获取


12.1 联系人数据的获取的准备工作




【框架】






【查看联系人的数据库】








 








【分析】关联查询需要分为两次：


第一次是： raw_contacts 和 data关联查询一次，生成结果r1；


第一次是： r1和mimetpes的关联查询；


但是：谷歌将 data 和 mimetpes 表生成了一个试图；


 


【表的访问方式】








【总结】




12.2 .获取联系人唯一性id


【注意的问题】


【1】查询属于耗时的操作，需要开辟子线程；






12.3 关联查询data表






12.4 数据封装分析


【说明】将数据显示到listView中需要将数据库中的数据读取出来放到集合中；


【原理】list中存放HashMap，list中存放很多个联系人数据；


              一个HashMap对应于一个联系人；






【说明】如果集合是成员变量的话，需要在每次存储数据之前进行清空操作，否则会出现数据重复的情况；




12.5 数据适配器的填充


【说明】对list的数据的添加是在子线程，但是适配器的数据填充是属于UI的数据，需要使用消息机制； 










【布局】






【数据填充的完成】


 


【效果】




12.5 点击条目，将联系人的数据返回给导航界面3




12.6 导航界面接收返回的联系人数据


【说明】过滤数据中的横杠










【效果及存在的问题】点击回退按钮会出现崩溃，原因是在回退的时候需要等待返回数据，但是返回按钮没有数据可以返回，需要进行判断是否为点击返回按钮的操作；




【源码修改】 




【说明】需要将选择之后的联系人的数据进行保存；






【说明】需要判断，现在填写的电话号码是选择的联系人还是输入的电话号码；


  如果是输入的电话号码则需要进行保存；




【效果】










12.7 联系人的回显


【问题】在点击上一页返回之后，密码框中的数据不存在了；理论上应该回显出来；






【效果】




13. 导航界面4的业务逻辑


【说明】首先需要拿到checkBox的选择框的状态，然后需要回显状态；


 


 




【修改之后的代码】










 


 




【下一页的按钮功能】




【效果】


 


14. 平滑动画分析


14.1【说明】在界面切换的时候具有平移的动画效果；




14.2 动画效果的四种方式












14.3 使用资源文件进行动画的创建 


【1】文件的创建














 14.4 动画的调用


【说明】动画是在点击上一页按钮和下一页按钮进行动画调用的；




【效果】




 






【效果】




 


 






            

            
posted @ 
2018-01-20 15:53 
OzTaking 
阅读(297) 
评论(0) 
 
收藏 
举报