九宫格项目二

九宫格项目

功能介绍

1.点击某圆圈后，在该圆圈的中心添加一个实行的小圆 
2.页面滑动出现一条跟随的线 
3.滑动到另一个圆圈时，产生一条连接的直线 
4.选择的圆圈点数大于等于4个后，手指抬起，就会保存密码。 

涉及到的知识点

· 本示例使用的是自定义的View来绘制九宫格，并保存图像

· 这里的九个点分别代表的是九个数值，获取到对应的数值证明绘制了那个点

· 程序中使用到的知识：

· 1、图像的描绘，圆和点的描绘，线的描绘

· 2、位置的判断，判断用户点的位置是否在某一个圆内

· 3、保存数据和相关判断是否保存密码。

最近正在制作第一个Android开发菜单项目，最开始我在设计首页的时候采用的是最原始的Layout布局方式，重复的写了很多的布局代码，显得尤为臃肿和繁琐。这显然和Android UI设计讲求简洁的特性不符合，也让我对重复的代码很是不感冒。

然后想起冯君老师曾经讲过类似的问题，可以使用GridVIew表格布局来设计九宫格，使UI的首页设计更加简洁大方。

第一步编辑mian.xml

这是九宫格的整体布局显示，设计我想设计的九宫格的行和列。如果你认为九宫格就是只有3x3格局，这是错误的。

在设计的过程中，我将numColumns的值设计为"3"，因为每行显示3个图标感觉是最好看的。如果numColumns的值设计为auto_fit,在行未满的时候，会自动的帮你填充行。

第二步，编辑item.xml

   编辑item.xml时我采用了相对布局的方式，表示的是九宫格里的每一个小格的布局特性，用迭代的方法可以重复的将单个小格填充到九宫格的中体布局中区。

   imageView控件，表示小格的图片显示信息，包括图片的长、宽、名字、ID等。TextView控件管理文字信息，text的值会在UI界面上显示。

第三步实现九宫格布局

   实现九宫格的布局显示，这里会使用到Java语言，不会Java的话，那你的Android开发路程就算完了。

需要设置适配器Adapter，用来对每个单元格实现一一对应的图片和文字说明。我在这里先使用了两个数组，分别对单元格的图片和文字定义。然后就是九宫格具体显示问题编写imageAdapter类。

 这里我只是对项目的首页UI布局进行了一个简要的总结，因为是第一次做项目，难免会又不足。

前言：随着社会的快速发展，金融行业也迅速发展。对于金融行业开发的App或者其他软件安全要求都比较高。为此，开发商为了提高App的安全性进行再App里面添加锁屏界面，为用户的安全，大大的增加可靠性。

第一：控件的结构 控件是有 导航、原点、状态提示三部分组成。

1.导航是系统导航；

2.原点可以有好多中创建方法（比如：UIButton/UIview/UIImageView等等），本控件选择Button。

3.状态提示为UIlabel，并添加基础动画。

第二：控件涉及到的知识点。

1.判断一个点是否在一个区域里面，使用函数CGRectContainsPoint。（这里，留下一个问题，自己做实验，如果该区域被裁减了，然后使用函数，取裁减区域的点，是否是在区域里面？）。

2. 如何巧妙的给一个父类的相同子类，添加标记，并区分子类。

3.对UIView的一些方法的从写。比如-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event、-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event、-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event。

4.如何获取手势点击的坐标点。使用方法：locationInView。是UItouch 的方法。

5.数组里面可以存储什么类型的对象？

6.结构体转为对象，对象转为结构体。本列是 CGpoint /NSValue 的转化。

7.从数组中获取信息，转化为字符串。

8.基础动画CABasicAnimation的使用。本例是动画的抖动。如何让动画再次开启动画？

9. Quartz2D的绘制。

10.数据密码的存储。

第三：控件设计过程中的难点。

       1.控件中的原点，如何选择哪一个控件。

       2.第一次点击获取坐标，不是原点区域不进行绘制。

       3.获取点是原点的时候，原点进行颜色变换。

       4.在绘制路线的时候，进行手势跟踪绘制。

       5.在绘制完成的时候，路线毛边的祛除。

       6.绘制完的路线，如何清除绘制的路线。

       7.绘制点的排重复。

第四：控件的效果。

       

第五：控件的调用方法。

       控件调用非常简单，只要两行代码就可以。

    GesturespasswordView * GesturesView = [[GesturespasswordView alloc]initWithFrame:self.view.frame];

    [[UIApplication sharedApplication].keyWindow addSubview:GesturesView];

我在细说一下我的代码：

[java]  view plain   copy

1.   

最后一个参数为接口,

[java]  view plain   copy

1. <pre name="code" class="java">public class CircleCanvas extends ListView {  
2.     private Context mct;  
3.     private Paint mpaint;                      //画笔  
4.     private Paint hollowPaint;  
5.     private Paint linePaint;  
6.     private int width;                         //view  宽，高  
7.     private int height;  
8.     private int startRangeWidth;               //起点坐标（x,y）  
9.     private int startRangeHeight;  
10.     private int endRangeWidth;                 //终点坐标（X,Y）两个坐标构成滑动区域。  
11.     private int endRangeHeight;  
12.     private int spotIntervalWidth;             //每个点之间的间隔  
13.     private int spotIntervalHeight;    
14.     private List<SpotXY> spot;                 //存放9个点的坐标  
15.     private List<SpotXY> delSpot;              //作用方面显示画的结果  
16.     private List<SpotXY> storeSpot;            //储存选中的空心圆的坐标  即spot  
17.     private List<Segment> segment;             //储存画出的线段     
18.     private int i=0;  
19.     private float r=100.0f;                    //大圆半径  
20.     private SpotXY xy;                         //一个点  
21.     private SpotXY xyTwo;  
22.     private int tclWay=0;  
23.     private boolean isspot=true;  
24.     private static int countId=1;                     //每个点的id编号  
25.     private String pwd;                        //密码  
26.     private OnCircleCanvasOver oncirclecanvasover；  

这个参数在储存画的线段的时候会用的，判断不要重复储存一样的线段

[java]  view plain   copy

1. private static int countId=1;                     //每个点的id编号  

初始化操作，

[java]  view plain   copy

1. public