教你设置一位数密码解锁iPhone
来源：爱思助手
隐私的保护越来越重要，大家应该都有给自己的手机设定了密码，不过大多数都是简单密码，即4位数字。但这真的安全吗？未必！四个数字总共只能产生10000种组合，对暴力破解来说并非难事。而且在实际生活中，一些组合总是更受到人们的喜爱，比如、、8888等等。国外研究显示，第一次就猜中别人4位数字生成的密码几率高达10%。另一方面，四位密码意味着，在滑动解锁之后至少需要按4个键才能进入主屏幕。总之，四位密码使用起来有时候会很麻烦，也容易被猜透。如何设置一个既简单又不易猜透的密码呢？答案就是——设置只有一个字符的字母密码，甚至可以是……一个空格其实苹果提供了两种密码形式：简单密码和复杂密码，后者对使用的符号和位数均不做限定。这就产生了一个“漏洞”，密码的位数可以是1位。在这种情况下，你只需要2下（密码+完成）就能解锁屏幕了！设置方法很简单，打开设置，进入“Touch ID与密码”，输入旧密码（如果有的话），将“简单密码”选项关闭，之后输入您的新密码就可以了。最重要的是，一位的复杂密码比简单密码也更安全。因为别人根本想不到你会只用一位密码，何况那么多键，试错的成本都高了很多有木有！当然，你也可以非常机（变）智（态）地将特殊字符，如á、§这些作为密码。在设置密码时长按键盘上某个字符就可以，如长按a就可以输入āáǎà等一系列字符。话不多说，先上动图第一种第二种序言：这两天老大给了个任务，说是做一个仿ios的数字锁屏界面，心想着这种东西网上应该有挺多的，然后就先百度了一把，谁知道案例好像少的可怜，然后带着怀疑的心态去下载了千辛万苦找到的“源码”，看里面写的，然后自己有点眉目了，就自己借着“源码”的思路自己实现了一把，见上图。思路：这里我们可以看成两部分，一部分是上面的输入的，另一部分是底部的按键。先来看上面那部分，我们可以看成是TextView，然后响应下面按键的动作。下面这部分，图中的每个按钮都需要自己画出来，难点就是根据第一个按键的坐标(第一个坐标我们初始化)算出每个按键的坐标，然后根据手指的触摸屏事件来判断点击的是哪个按键接下来我们来看核心代码：输入框部分：public&class&PasswordTextView&extends&TextView{
&&&&private&final&String&sing&=&&*&;//密文显示的内容
&&&&private&String&content&=&&&;//显示的内容
&&&&//文本改变事件回调接口
&&&&private&OnTextChangedListener&onTextChangedL
&&&&&*&Handler线程对象,用来更新密码框的显示内容
&&&&&*&实现将输入的内容显示为密文
&&&&private&Handler&handler&=&new&Handler(){
&&&&&&&&public&void&handleMessage(android.os.Message&msg)&{
&&&&&&&&&&&&//密文显示
&&&&&&&&&&&&PasswordTextView.this.setText(sing);
&&&&&&&&&&&&//回调改变事件接口
&&&&&&&&&&&&if(onTextChangedListener&!=&null){
&&&&&&&&&&&&&&&&onTextChangedListener.textChanged(content);
&&&&&&&&&&&&}
&&&&&&&&};
&&&&&*&构造方法
&&&&&*&@param&context
&&&&&*&@param&attrs
&&&&public&PasswordTextView(Context&context,&AttributeSet&attrs)&{
&&&&&&&&super(context,&attrs);
&&&&&*&设置文本改变事件监听
&&&&&*&@param&onTextChangedListener
&&&&public&void&setOnTextChangedListener(OnTextChangedListener&onTextChangedListener){
&&&&&&&&this.onTextChangedListener&=&onTextChangedL
&&&&&*&设置密码框显示的内容
&&&&&*&@param&text
&&&&public&void&setTextContent(String&text){
&&&&&&&&//获得输入的内容
&&&&&&&&this.content&=&
&&&&&&&&if(!TextUtils.isEmpty(text)){
&&&&&&&&&&&&handler.sendEmptyMessage(0);//向Handler发送消息
&&&&&&&&}else{
&&&&&&&&&&&&this.setText(&&);
&&&&&*&获取显示的内容
&&&&&*&@return
&&&&public&String&getTextContent(){
&&&&&&&&return&
&&&&&*&文本改变事件接口
&&&&public&interface&OnTextChangedListener{
&&&&&&&&/**
&&&&&&&&&*&密码框文本改变时调用
&&&&&&&&&*&@param&content
&&&&&&&&&*/
&&&&&&&&public&void&textChanged(String&content);
}下面按键部分public&class&NumericK&&&&eyboard&extends&View&{
&&&&private&int&screen_width&=&0;//&屏幕的宽度
&&&&private&float&first_x&=&0;//&绘制1的x坐标
&&&&private&float&first_y&=&0;//&绘制1的y坐标
&&&&private&float[]&xs&=&new&float[3];//声明数组保存每一列的圆心横坐标
&&&&private&float[]&ys&=&new&float[4];//声明数组保存每一排的圆心纵坐标
&&&&private&float&circle_x,&circle_y;//点击处的圆心坐标
&&&&private&int&number&=&-1;//点击的数字
&&&&private&OnNumberClick&onNumberC//数字点击事件
&&&&&*&判断刷新数据
&&&&&*&-1&不进行数据刷新
&&&&&*&0&&按下刷新
&&&&&*&1&&弹起刷新
&&&&private&int&type&=&-1;
&&&&&*&构造方法
&&&&&*&@param&context
&&&&public&NumericKeyboard(Context&context)&{
&&&&&&&&super(context);
&&&&&&&&initData(context);//&初始化数据
&&&&public&NumericKeyboard(Context&context,&AttributeSet&attrs)&{
&&&&&&&&super(context,&attrs);
&&&&&&&&initData(context);//&初始化数据
&&&&&*&设置数字点击事件
&&&&&*&@param&onNumberClick
&&&&public&void&setOnNumberClick(OnNumberClick&onNumberClick)&{
&&&&&&&&this.onNumberClick&=&onNumberC
&&&&//&初始化数据
&&&&private&void&initData(Context&context)&{
&&&&&&&&//&获取屏幕的宽度
&&&&&&&&screen_width&=&SystemUtils.getSystemDisplay(context)[0];
&&&&&&&&//&获取绘制1的x坐标
&&&&&&&&first_x&=&screen_width&/&4;
&&&&&&&&//&获取绘制1的y坐标
&&&&&&&&first_y&=&(SystemUtils.getSystemDisplay(context)[1]&-&SystemUtils.getSystemDisplay(context)[1]&/&3)&/&4;
&&&&&&&&//添加每一排的横坐标
&&&&&&&&xs[0]&=&first_x&+&10;
&&&&&&&&xs[1]&=&first_x&*&2&+&10;
&&&&&&&&xs[2]&=&first_x&*&3&+&10;
&&&&&&&&//添加每一列的纵坐标
&&&&&&&&ys[0]&=&40&+&first_y&-&15;
&&&&&&&&ys[1]&=&40&+&first_y&+&first_x&-&15;
&&&&&&&&ys[2]&=&40&+&first_y&+&first_x&*&2&-&15;
&&&&&&&&ys[3]&=&40&+&first_y&+&first_x&*&3&-&15;
&&&&@Override
&&&&protected&void&onDraw(Canvas&canvas)&{
&&&&&&&&super.onDraw(canvas);
&&&&&&&&//&创建画笔对象
&&&&&&&&Paint&paint&=&new&Paint();
&&&&&&&&paint.setColor(Color.BLACK);//&设置画笔颜色
&&&&&&&&paint.setTextSize(40);//&设置字体大小
&&&&&&&&paint.setStrokeWidth(2);
&&&&&&&&//&绘制文本,注意是从坐标开始往上绘制
&&&&&&&&//&这里较难的就是算坐标
&&&&&&&&//&绘制第一排1,2,3
&&&&&&&&canvas.drawText(&1&,&first_x,&40&+&first_y,&paint);
&&&&&&&&canvas.drawText(&2&,&first_x&*&2,&40&+&first_y,&paint);
&&&&&&&&canvas.drawText(&3&,&first_x&*&3,&40&+&first_y,&paint);
&&&&&&&&//&绘制第2排4,5,6
&&&&&&&&canvas.drawText(&4&,&first_x,&40&+&first_y&+&first_x,&paint);
&&&&&&&&canvas.drawText(&5&,&first_x&*&2,&40&+&first_y&+&first_x,&paint);
&&&&&&&&canvas.drawText(&6&,&first_x&*&3,&40&+&first_y&+&first_x,&paint);
&&&&&&&&//&绘制第3排7,8,9
&&&&&&&&canvas.drawText(&7&,&first_x,&40&+&first_y&+&first_x&*&2,&paint);
&&&&&&&&canvas.drawText(&8&,&first_x&*&2,&40&+&first_y&+&first_x&*&2,&paint);
&&&&&&&&canvas.drawText(&9&,&first_x&*&3,&40&+&first_y&+&first_x&*&2,&paint);
&&&&&&&&//&绘制第4排0
&&&&&&&&canvas.drawText(&0&,&first_x&*&2,&40&+&first_y&+&first_x&*&3,&paint);
&&&&&&&&//为每一个数字绘制一个圆
&&&&&&&&paint.setColor(Color.WHITE);//设置画笔颜色
&&&&&&&&paint.setAntiAlias(true);//设置抗锯齿
&&&&&&&&//设置绘制空心圆
&&&&&&&&paint.setStyle(Paint.Style.STROKE);
&&&&&&&&//依次绘制第一排的圆
&&&&&&&&canvas.drawCircle(first_x&+&10,&40&+&first_y&-&15,&70,&paint);
&&&&&&&&canvas.drawCircle(first_x&*&2&+&10,&40&+&first_y&-&15,&70,&paint);
&&&&&&&&canvas.drawCircle(first_x&*&3&+&10,&40&+&first_y&-&15,&70,&paint);
&&&&&&&&//依次绘制第2排的圆
&&&&&&&&canvas.drawCircle(first_x&+&10,&40&+&first_y&+&first_x&-&15,&70,&paint);
&&&&&&&&canvas.drawCircle(first_x&*&2&+&10,&40&+&first_y&+&first_x&-&15,&70,&paint);
&&&&&&&&canvas.drawCircle(first_x&*&3&+&10,&40&+&first_y&+&first_x&-&15,&70,&paint);
&&&&&&&&//依次绘制第3排的圆
&&&&&&&&canvas.drawCircle(first_x&+&10,&40&+&first_y&+&first_x&*&2&-&15,&70,&paint);
&&&&&&&&canvas.drawCircle(first_x&*&2&+&10,&40&+&first_y&+&first_x&*&2&-&15,&70,&paint);
&&&&&&&&canvas.drawCircle(first_x&*&3&+&10,&40&+&first_y&+&first_x&*&2&-&15,&70,&paint);
&&&&&&&&//绘制最后一个圆
&&&&&&&&canvas.drawCircle(first_x&*&2&+&10,&40&+&first_y&+&first_x&*&3&-&15,&70,&paint);
&&&&&&&&//判断是否点击数字(点击数字产生的渐变效果)
&&&&&&&&if&(circle_x&&&0&&&&circle_y&&&0)&{
&&&&&&&&&&&&if&(type&==&0)&{//按下刷新
&&&&&&&&&&&&&&&&paint.setColor(Color.WHITE);//设置画笔颜色
&&&&&&&&&&&&&&&&paint.setStyle(Paint.Style.FILL_AND_STROKE);//按下的时候绘制实心圆
&&&&&&&&&&&&&&&&canvas.drawCircle(circle_x,&circle_y,&70,&paint);//绘制圆
&&&&&&&&&&&&}&else&if&(type&==&1)&{//弹起刷新
&&&&&&&&&&&&&&&&paint.setColor(Color.WHITE);//设置画笔颜色
&&&&&&&&&&&&&&&&paint.setStyle(Paint.Style.STROKE);//弹起的时候再绘制空心圆
&&&&&&&&&&&&&&&&canvas.drawCircle(circle_x,&circle_y,&70,&paint);//绘制圆
&&&&&&&&&&&&&&&&//绘制完成后,重置
&&&&&&&&&&&&&&&&circle_x&=&0;
&&&&&&&&&&&&&&&&circle_y&=&0;
&&&&&&&&&&&&}
&&&&&*&获取触摸点击事件
&&&&@Override
&&&&public&boolean&onTouchEvent(MotionEvent&event)&{
&&&&&&&&//事件判断
&&&&&&&&switch&(event.getAction())&{
&&&&&&&&&&&&case&MotionEvent.ACTION_DOWN://按下
&&&&&&&&&&&&&&&&//判断点击的坐标位置
&&&&&&&&&&&&&&&&float&x&=&event.getX();//按下时的X坐标
&&&&&&&&&&&&&&&&float&y&=&event.getY();//按下时的Y坐标
&&&&&&&&&&&&&&&&//判断点击的是哪一个数字圆
&&&&&&&&&&&&&&&&handleDown(x,&y);
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&case&MotionEvent.ACTION_UP://弹起
&&&&&&&&&&&&&&&&type&=&1;//弹起刷新
&&&&&&&&&&&&&&&&invalidate();//刷新界面
&&&&&&&&&&&&&&&&//返回点击的数字
&&&&&&&&&&&&&&&&if&(onNumberClick&!=&null&&&&number&!=&-1)&{
&&&&&&&&&&&&&&&&&&&&onNumberClick.onNumberReturn(number);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&setDefault();//恢复默认
&&&&&&&&&&&&&&&&//发送辅助事件
&&&&&&&&&&&&&&&&sendAccessEvent(R.string.numeric_keyboard_up);
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&case&MotionEvent.ACTION_CANCEL://取消
&&&&&&&&&&&&&&&&//恢复默认值
&&&&&&&&&&&&&&&&setDefault();
&&&&&&&&&&&&&&&&return&
&&&&&&&&return&
&&&&&*&恢复默认值
&&&&private&void&setDefault()&{
&&&&&&&&circle_x&=&0;
&&&&&&&&circle_y&=&0;
&&&&&&&&type&=&-1;
&&&&&&&&number&=&-1;
&&&&&&&&sendAccessEvent(R.string.numeric_keyboard_cancel);
&&&&&*&设置辅助功能描述
&&&&private&void&sendAccessEvent(int&resId)&{
&&&&&&&&//设置描述
&&&&&&&&setContentDescription(getContext().getString(resId));
&&&&&&&&//发送辅助事件
&&&&&&&&sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_SELECTED);
&&&&&&&&setContentDescription(null);
&&&&&*&判断点击的是哪一个数字圆
&&&&private&void&handleDown(float&x,&float&y)&{
&&&&&&&&//判断点击的是那一列的数据
&&&&&&&&if&(xs[0]&-&70&&=&x&&&&x&&=&xs[0]&+&70)&{//第一列
&&&&&&&&&&&&//获取点击处的圆心横坐标
&&&&&&&&&&&&circle_x&=&xs[0];
&&&&&&&&&&&&//判断点击的是哪一排
&&&&&&&&&&&&if&(ys[0]&-&70&&=&y&&&&ys[0]&+&70&&=&y)&{//第1排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[0];
&&&&&&&&&&&&&&&&number&=&1;//设置点击的数字
&&&&&&&&&&&&}&else&if&(ys[1]&-&70&&=&y&&&&ys[1]&+&70&&=&y)&{//第2排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[1];
&&&&&&&&&&&&&&&&number&=&4;//设置点击的数字
&&&&&&&&&&&&}&else&if&(ys[2]&-&70&&=&y&&&&ys[2]&+&70&&=&y)&{//第3排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[2];
&&&&&&&&&&&&&&&&number&=&7;//设置点击的数字
&&&&&&&&&&&&}
&&&&&&&&}&else&if&(xs[1]&-&70&&=&x&&&&x&&=&xs[1]&+&70)&{//第2列
&&&&&&&&&&&&//获取点击处的圆心横坐标
&&&&&&&&&&&&circle_x&=&xs[1];
&&&&&&&&&&&&//判断点击的是哪一排
&&&&&&&&&&&&if&(ys[0]&-&70&&=&y&&&&ys[0]&+&70&&=&y)&{//第1排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[0];
&&&&&&&&&&&&&&&&number&=&2;//设置点击的数字
&&&&&&&&&&&&}&else&if&(ys[1]&-&70&&=&y&&&&ys[1]&+&70&&=&y)&{//第2排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[1];
&&&&&&&&&&&&&&&&number&=&5;//设置点击的数字
&&&&&&&&&&&&}&else&if&(ys[2]&-&70&&=&y&&&&ys[2]&+&70&&=&y)&{//第3排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[2];
&&&&&&&&&&&&&&&&number&=&8;//设置点击的数字
&&&&&&&&&&&&}&else&if&(ys[3]&-&70&&=&y&&&&ys[3]&+&70&&=&y)&{//第4排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[3];
&&&&&&&&&&&&&&&&number&=&0;//设置点击的数字
&&&&&&&&&&&&}
&&&&&&&&}&else&if&(xs[2]&-&70&&=&x&&&&x&&=&xs[2]&+&70)&{//第3列
&&&&&&&&&&&&//获取点击处的圆心横坐标
&&&&&&&&&&&&circle_x&=&xs[2];
&&&&&&&&&&&&//判断点击的是哪一排
&&&&&&&&&&&&if&(ys[0]&-&70&&=&y&&&&ys[0]&+&70&&=&y)&{//第1排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[0];
&&&&&&&&&&&&&&&&number&=&3;//设置点击的数字
&&&&&&&&&&&&}&else&if&(ys[1]&-&70&&=&y&&&&ys[1]&+&70&&=&y)&{//第2排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[1];
&&&&&&&&&&&&&&&&number&=&6;//设置点击的数字
&&&&&&&&&&&&}&else&if&(ys[2]&-&70&&=&y&&&&ys[2]&+&70&&=&y)&{//第3排
&&&&&&&&&&&&&&&&//获取点击的数字圆的圆心纵坐标
&&&&&&&&&&&&&&&&circle_y&=&ys[2];
&&&&&&&&&&&&&&&&number&=&9;//设置点击的数字
&&&&&&&&&&&&}
&&&&&&&&sendAccessEvent(R.string.numeric_keyboard_down);
&&&&&&&&type&=&0;//按下刷新
&&&&&&&&//绘制点击时的背景圆
&&&&&&&&invalidate();
&&&&&*&数字点击事件
&&&&public&interface&OnNumberClick&{
&&&&&&&&/**
&&&&&&&&&*&返回点击的数字
&&&&&&&&&*
&&&&&&&&&*&@param&number
&&&&&&&&&*/
&&&&&&&&public&void&onNumberReturn(int&number);
}上面说了，难点在于计算按键的位置，在这里我是根据我下载的demo里面的计算方式相应的修改了，如果不明白android屏幕坐标系的同学请看下面的文章：参考：Github下载地址：作者：
评论内容：
全部组件分类
日历组件(calendar)
swipeback组件
筛选器(filter)
分享组件(share)
开关(switch)
载入视图(loader)
列表(listview)
图片(ImageView)
分段选择( segment)
选项卡(tab)
按钮(button)
单选按钮(RadioButton)
进度条(Progressbar)
对话框(dialog)
菜单(menu)
图案解锁(GustureLock)
布局(layout)
图表(chart)
指示器(Indicator)
通知(toast)
步骤控件(stepsView)
文本编辑框(edittext)
引导页( GuideView)
ViewPager(viewpager)
富文本编辑器(richeditor)
标签控件(tagview)
画廊控件(Gallery)
Material Design风格
涂鸦板(Graffiti board)
动画(Animation)
选择器(Picker)
手势交互(Gesture)
拖动条(SeekBar)
文本显示(TextView)
视图切换(View Transition)
水流波动效果(WaveView)
徽章控件(BadgeView)
下拉缩放(PullZoom)
浮动按钮(Floating Button)
显示gif图片(GifImageView)
星级评分控件(StarBar)
win8磁贴效果
自动搜索(SearchBox)
马赛克效果
广告轮播效果
时间轴(TimeLine)
表情控件(Emoji)
弹性、粘性效果
范围、定值选择器
浮动按钮、菜单
九宫格控件
导航栏停留
购物车动画
数据载入布局(DataLoadingLayout)
滑动验证码
应用更新库
图片查看器iOS-九宫格密码解锁 - IOS - 伯乐在线
& iOS-九宫格密码解锁
前言：看了几篇简书，九宫格密码解锁，看着不错，拿来学习一下。
一、实现效果
二、手势解锁实现过程
Objective-C
&span class="hljs-preprocessor"&#&span class="hljs-number"&1.&/span&监听手指在view上的移动，首先肯定需要自定义一个view，重写touch began,touch move等方法，&/span&
当手指移动到圈上时，让其变亮。可以通过button按钮来实现。
&span class="hljs-preprocessor"&#&span class="hljs-number"&2.&/span&界面搭建--【九宫格】代码的方式创建&span class="hljs-number"&9&/span&个按钮&/span&
&span class="hljs-number"&1&/span&).背景图片
&span class="hljs-number"&2&/span&).九个按钮
（把九个按钮作为一个整体，使用一个大的view来管理这些小的view,这些小的view就是&span class="hljs-number"&9&/span&个button)。
&span class="hljs-number"&3&/span&).新建一个类，对自定义的view进行管理，这个view是从storyboard创建出来的。
会调用aweakFrameNib方法和layoutSubviews方法，前者创造控件，后者，设置按钮frame。
&span class="hljs-number"&4&/span&).监听手指的移动。分析程序，应该监听手指的移动，而不是按钮的点击，当手指移动到按钮的范围内时，让按钮变亮。
（&span class="hljs-number"&1&/span&）重写touchesbegan...方法
&span class="hljs-number"&1.&/span&获取按下的点
&span class="hljs-number"&2.&/span&判断触摸的位置是否在按钮的范围内（使用&span class="hljs-keyword"&for&/span&循环）
提示： 一个判断点是否在指定范围内的方法——CGRectContainsPoint(,)；
(&span class="hljs-number"&2&/span&)重新touchesmoved...方法
说明：当手指移动到按钮上的时候，按钮变亮，因此需要重写touchesmoved方法。
&span class="hljs-number"&1.&/span&获取触摸的点
&span class="hljs-number"&2.&/span&判断触摸的点是否在按钮的范围内。
提示:可以把上面两个功能分别进行封装，在使用的时候直接调用即可。
&span class="hljs-preprocessor"&#&span class="hljs-number"&3&/span&绘制线段&/span&
思路:获取为选中状态的按钮，并把它们存到一个数组中，重写drawRect方法，从数组中取出所有的按钮，连接所有按钮的中点。
注意:数组中不能存空值，在存储之前需要先进行判断。
新的问题:已经被连过的按钮，不能再连线。（在存储按钮的时候判断，如果该按钮已经被连线，那么就不再添加到数组中）。
&span class="hljs-number"&1.&/span&获取上下文
&span class="hljs-number"&2.&/span&取出按钮（起点和终点）
&span class="hljs-number"&3.&/span&渲染
1234567891011121314151617181920212223242526
&span class="hljs-preprocessor"&#&span class="hljs-number"&1.&/span&监听手指在view上的移动，首先肯定需要自定义一个view，重写touch began,touch move等方法，&/span&&&当手指移动到圈上时，让其变亮。可以通过button按钮来实现。&span class="hljs-preprocessor"&#&span class="hljs-number"&2.&/span&界面搭建--【九宫格】代码的方式创建&span class="hljs-number"&9&/span&个按钮&/span&&&&&&&&& &span class="hljs-number"&1&/span&).背景图片&&&&&&&& &span class="hljs-number"&2&/span&).九个按钮&&&&&&&&&&&&（把九个按钮作为一个整体，使用一个大的view来管理这些小的view,这些小的view就是&span class="hljs-number"&9&/span&个button)。&&&&&&&& &span class="hljs-number"&3&/span&).新建一个类，对自定义的view进行管理，这个view是从storyboard创建出来的。&&&&&&&&&&会调用aweakFrameNib方法和layoutSubviews方法，前者创造控件，后者，设置按钮frame。&&&&&&&& &span class="hljs-number"&4&/span&).监听手指的移动。分析程序，应该监听手指的移动，而不是按钮的点击，当手指移动到按钮的范围内时，让按钮变亮。&&&&&&&&&& （&span class="hljs-number"&1&/span&）重写touchesbegan...方法&&&&&&&&&&&&&& &span class="hljs-number"&1.&/span&获取按下的点&&&&&&&&&&&&&& &span class="hljs-number"&2.&/span&判断触摸的位置是否在按钮的范围内（使用&span class="hljs-keyword"&for&/span&循环）&&&&&&&&&&&&&&&&提示： 一个判断点是否在指定范围内的方法——CGRectContainsPoint(,)；&&&&&&&&&&&& (&span class="hljs-number"&2&/span&)重新touchesmoved...方法&&&&&&&&&&&&&&&& 说明：当手指移动到按钮上的时候，按钮变亮，因此需要重写touchesmoved方法。&&&&&&&&&&&&&&&&&span class="hljs-number"&1.&/span&获取触摸的点&&&&&&&&&&&&&&&&&span class="hljs-number"&2.&/span&判断触摸的点是否在按钮的范围内。&&&&&&&&&&&&&&提示:可以把上面两个功能分别进行封装，在使用的时候直接调用即可。&span class="hljs-preprocessor"&#&span class="hljs-number"&3&/span&绘制线段&/span&&&思路:获取为选中状态的按钮，并把它们存到一个数组中，重写drawRect方法，从数组中取出所有的按钮，连接所有按钮的中点。&&注意:数组中不能存空值，在存储之前需要先进行判断。&&新的问题:已经被连过的按钮，不能再连线。（在存储按钮的时候判断，如果该按钮已经被连线，那么就不再添加到数组中）。&&绘制线段&&&&&&&& &span class="hljs-number"&1.&/span&获取上下文&&&&&&&& &span class="hljs-number"&2.&/span&取出按钮（起点和终点）&&&&&&&& &span class="hljs-number"&3.&/span&渲染
如图所示：
①设置控制器view背景图片
[解析]:拖入图片素材，并设置控制器View的背景图片
设置控制器view背景图片
②自定义view并与控制器中新拖入的view进行关联
自定义view并与控制器中新拖入的view进行关联
设置触摸点，实现两个代理
④创建存储选中按钮的数组，并把选中按钮添加其中，画线重绘
解决问题:已经被连过的按钮，不能再连线。
1.由于每次画线的时候，我们都会调用touchbegin和touchmove方法，如果每次选中的按钮都在你触摸的范围内，都会添加到选中按钮的数组中。这样，就会造成重复添加按钮。即第二次，触摸已经选中的按钮，同样也在你触摸的范围内，这是同样也会添加到选中按钮的数组中。为了解决这个问题，我们可以在touchbegin和touchmove的判断中加一个条件 !btn.highlighted。如代码，意思是当你第二次，重复触摸同一个按钮时，如果他在你触摸的范围内且按钮的状态不是高亮状态，即向下执行。
Objective-C
if (CGRectContainsPoint(btn.frame, loc)&& !btn.highlighted)
if (CGRectContainsPoint(btn.frame, loc)&& !btn.highlighted)
2.还有个问题就是，当你在连接按钮的过程中，在空白间隙停止触摸，这样，会产生多余的线。要解决这个问题，首先我们要声明一个多余线段的点CGpoint类型。其次，获取多余线段的点，多余线段的点就等于你所触摸获取的点，进行一下关联。然后，把多余的线段画出来。最后，在touchend这个方法内，也就是当触摸完毕之后，那个多余的点，就等于，选中按钮数组中最后一个按钮的中心点。在重绘一下，就OK。
避免重复添加按钮
多余线段的解决图1
多余线段的解决图2
多余线段的解决图3
④验证密码
[解析]：对与验证密码这块，基本的思路是根据选中按钮的tag值，来验证用户设置的手势密码是否与之对等。换句话来说，我们添加在自定义view的按钮,当每个按钮被触碰时，都会变成高亮状态，被添加到高亮状态的数组中。手势密码也就相当于（0~9）的密码串排序。手势密码验证是在，触摸结束后验证的。所以我们要想验证密码，必须在touchend方法里遍历高亮数组获取按钮的tag值。并存入可变字符串数组中，与自己设置的手势密码字符串进行对比。
设置按钮的tag值
密码验证正确:按钮高亮状态消失线消失
不正确：按钮红色，线消失：按钮状态消失
要想线消失
高亮状态消失线消失
代码展示：
Objective-C
//1.界面 ,九个按钮 , 设置frame
//2. 设置按钮的高亮状态
//4. 验证密码是否正确
//5. 正确: 按钮高亮状态消失, 线消失
//6.不正确: 按钮红色, 线消失: 按钮状态消失
//7. 多出来的一截线
#import "CZView.h"
@interface CZView ()
//选中按钮的数组
&#Description#&
@property (nonatomic,strong) NSMutableArray &UIButton *& *selectedA
//线条颜色的属性
@property(nonatomic,strong)UIColor *lineC
//接收 多余的点
@property(nonatomic,assign)CGPoint destdationP
@implementation CZView
- (UIColor *)lineColor
if (!_lineColor) {
_lineColor = [UIColor whiteColor];
return _lineC
- (NSMutableArray&UIButton *& *)selectedArray
if (!_selectedArray) {
_selectedArray = [NSMutableArray array];
return _selectedA
#pragma mark - 3.0画线
- (void)drawRect:(CGRect)rect {
//创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
for (NSInteger i = 0; i & self.selectedArray. i++) {
if (i == 0) {
[path moveToPoint:self.selectedArray[i].center];
[path addLineToPoint:self.selectedArray[i].center];
//画多出来的线
if (self.selectedArray.count & 0) {
[path addLineToPoint:self.destdationPoint];
//设置颜色
[self.lineColor set];
[path stroke];
#pragma mark - 2.0 设置按钮的高亮
//1. 触摸的位置
//2. 触摸的按钮 高亮
//3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮
- (void)touchesBegan:(NSSet&UITouch *& *)touches withEvent:(UIEvent *)event
//1. 触摸的位置
UITouch *touch = touches.anyO
CGPoint loc = [touch locationInView:touch.view];
self.destdationPoint =
//2. 触摸的按钮 高亮
//3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮
for (NSInteger i = 0; i & self.subviews. i++) {
UIButton *btn = self.subviews[i];
//&& !btn.highlighted 避免重复添加 已经高亮的按钮
if (CGRectContainsPoint(btn.frame, loc) && !btn.highlighted) {//如果是存在的
//设置高亮
btn.highlighted = YES;
//添加到选中按钮中
[self.selectedArray addObject:btn];
[self setNeedsDisplay];
- (void)touchesMoved:(NSSet&UITouch *& *)touches withEvent:(UIEvent *)event
//1. 触摸的位置
UITouch *touch = touches.anyO
CGPoint loc = [touch locationInView:touch.view];
//接收 多出来的点
self.destdationPoint =
//2. 触摸的按钮 高亮
//3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮
for (NSInteger i = 0; i & self.subviews. i++) {
UIButton *btn = self.subviews[i];
if (CGRectContainsPoint(btn.frame, loc)&& !btn.highlighted) {//如果是存在的
//设置高亮
btn.highlighted = YES;
//添加到选中按钮中
[self.selectedArray addObject:btn];
[self setNeedsDisplay];
#pragma mark - 4.0 验证密码
- (void)touchesEnded:(NSSet&UITouch *& *)touches withEvent:(UIEvent *)event
//设置 多出来的点 在 手指抬起的时候为 选中按钮集合的最后一个
self.destdationPoint = [[self.selectedArray lastObject] center];
//1.获取密码
NSMutableString *pwd = [NSMutableString string];
for(UIButton *btn in self.selectedArray){
//拼接密码
[pwd appendFormat:@"%@",@(btn.tag)];
if([pwd isEqualToString:@"012"]){//正确
// 正确: 按钮高亮状态消失, 线消失
[self clearPath];
//不正确: 按钮红色, 线消失: 按钮状态消失
for (UIButton *btn in self.selectedArray) {
//按钮的状态 不能同时存在
btn.highlighted = NO;
btn.selected = YES;
//设置 线条颜色 为红色
self.lineColor = [UIColor redColor];
[self setNeedsDisplay];
//关闭 交互
self.userInteractionEnabled = NO;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self clearPath];
//开启交互
self.userInteractionEnabled = YES;
//清空画线集合
- (void)clearPath
//将原先的红色 在设置为白色
self.lineColor = [UIColor whiteColor];
//取消按钮的高亮
for(UIButton *btn in self.selectedArray){
btn.highlighted = NO;
btn.selected = NO;
//清空 画线的集合
[self.selectedArray removeAllObjects];
[self setNeedsDisplay];
#pragma mark - 1.0添加9个按钮
//1. aweakformnib
//2. 懒加载
//创建9个按钮
- (void)awakeFromNib
for(NSInteger i = 0;i & 9;i++){
//创建按钮
UIButton *btn = [[UIButton alloc]init];
//设置tag 是为了验证密码
//关闭按钮的交互 是为了 触摸事件
btn.userInteractionEnabled = NO;
//设置背景图片
[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
//设置按钮的高亮图片
[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateHighlighted];
//设置按钮的选中状态
[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_error"] forState:UIControlStateSelected];
[self addSubview:btn];
//设置按钮的frame
- (void)layoutSubviews
[super layoutSubviews];
for (NSInteger i = 0; i & self.subviews. i++) {
//九宫格布局
CGFloat W = self.bounds.size.
CGFloat H = self.bounds.size.
CGFloat btnW = 74;
CGFloat btnH = 74;
//计算间隔
NSInteger columns = 3;
// 总宽度 - 3个按钮的宽度 / 2
CGFloat margW = (W - columns * btnW)/(columns - 1);
CGFloat margH = margW;
//列的索引
NSInteger col = i %
//行的索引
NSInteger row = i /
CGFloat btnX = col * (margW + btnW);
CGFloat btnY = row * (margH + btnH);
//设置按钮的frame
UIButton *btn = self.subviews[i];
btn.frame = CGRectMake(btnX, btnY, btnW, btnH);
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
//1.界面 ,九个按钮 , 设置frame//2. 设置按钮的高亮状态//3. 画线//4. 验证密码是否正确//5. 正确: 按钮高亮状态消失, 线消失//6.不正确: 按钮红色, 线消失: 按钮状态消失&//7. 多出来的一截线&#import "CZView.h"&@interface CZView ()&//选中按钮的数组/** *&&&#Description#& */@property (nonatomic,strong) NSMutableArray &UIButton *& *selectedArray;&//线条颜色的属性@property(nonatomic,strong)UIColor *lineColor;&//接收 多余的点@property(nonatomic,assign)CGPoint destdationPoint;&@end&@implementation CZView&- (UIColor *)lineColor {&&if (!_lineColor) {&&&_lineColor = [UIColor whiteColor]; }&&&return _lineColor;&}- (NSMutableArray&UIButton *& *)selectedArray&&{&&if (!_selectedArray) {&&&&& _selectedArray = [NSMutableArray array];}&return _selectedArray;}& #pragma mark - 3.0画线&&&&&//画线&& - (void)drawRect:(CGRect)rect {&&&&&//创建路径&&&&UIBezierPath *path = [UIBezierPath bezierPath];&&&&&&&&&&&&&&&for (NSInteger i = 0; i & self.selectedArray.count; i++) {&& //起点&&&& if (i == 0) {&&&&&&&[path moveToPoint:self.selectedArray[i].center];&&}else{&&&&&&&[path addLineToPoint:self.selectedArray[i].center];&&&&}&&&//终点&&&&}&&&//画多出来的线&& if (self.selectedArray.count & 0) {&&&&&[path addLineToPoint:self.destdationPoint];&&&}& //设置颜色&&[self.lineColor set];&&& //渲染&& [path stroke];& }& #pragma mark - 2.0 设置按钮的高亮&&//1. 触摸的位置&&//2. 触摸的按钮 高亮&&//3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮&&& - (void)touchesBegan:(NSSet&UITouch *& *)touches withEvent:(UIEvent *)event&&&&{&&&&&&&&//1. 触摸的位置&&&&&&&& UITouch *touch = touches.anyObject;&&&&&&&& CGPoint loc = [touch locationInView:touch.view];&&&&&&&& self.destdationPoint = loc;&&&&&//2. 触摸的按钮 高亮&&&&//3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮&&&&&&for (NSInteger i = 0; i & self.subviews.count; i++) {&&&&&&&UIButton *btn = self.subviews[i];&&&&&& //&& !btn.highlighted 避免重复添加 已经高亮的按钮&&&&&&&& if (CGRectContainsPoint(btn.frame, loc) && !btn.highlighted) {//如果是存在的&&&&&&&&&&& //设置高亮&&&&&&&&&&&&btn.highlighted = YES;&&&&&&&//添加到选中按钮中&&&&&&[self.selectedArray addObject:btn];&&&&&&& }&&&&&& }&&&&&&& //重绘&&&&&&[self setNeedsDisplay];&&&&&&}&&&&&- (void)touchesMoved:(NSSet&UITouch *& *)touches withEvent:(UIEvent *)event {&&&& //1. 触摸的位置&&&& UITouch *touch = touches.anyObject;&&&& CGPoint loc = [touch locationInView:touch.view];&&&&&&&//接收 多出来的点&&&&&& self.destdationPoint = loc;&&&&& //2. 触摸的按钮 高亮&&&&&&//3. 判断你触摸的点 是否在按钮的范围内: 如果是存在的 设置高亮&&&&&& for (NSInteger i = 0; i & self.subviews.count; i++) {&&&&& UIButton *btn = self.subviews[i];&&&& if (CGRectContainsPoint(btn.frame, loc)&& !btn.highlighted) {//如果是存在的&&&&&&&//设置高亮&&&&&&btn.highlighted = YES;&&&&&&&//添加到选中按钮中&&&&&&[self.selectedArray addObject:btn];&&&}&&}&&&&&//重绘&&&&[self setNeedsDisplay];&&}&&&&&#pragma mark - 4.0 验证密码&&&&& - (void)touchesEnded:(NSSet&UITouch *& *)touches withEvent:(UIEvent *)event&& {&&&&& //设置 多出来的点 在 手指抬起的时候为 选中按钮集合的最后一个&&&&&&self.destdationPoint = [[self.selectedArray lastObject] center];&&&&&//1.获取密码&&&&NSMutableString *pwd = [NSMutableString string];&&&& for(UIButton *btn in self.selectedArray){&&&&& //拼接密码&&&&&&[pwd appendFormat:@"%@",@(btn.tag)];&&&&&}&&& //2. 验证&&&if([pwd isEqualToString:@"012"]){//正确 // 正确: 按钮高亮状态消失, 线消失&&&&&[self clearPath];&}else{&&&&&//不正确: 按钮红色, 线消失: 按钮状态消失&&&&& for (UIButton *btn in self.selectedArray) {&&&&&&&&&//按钮的状态 不能同时存在&&&&&&&&btn.highlighted = NO;&&&&&&&&btn.selected = YES;&&&&&}&&&//设置 线条颜色 为红色&&self.lineColor = [UIColor redColor];&&&//重绘&&[self setNeedsDisplay];&&&&&//关闭 交互&&self.userInteractionEnabled = NO;&&&//延迟&&dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{&&&&&&&[self clearPath];&&&&& //开启交互&&&&&&self.userInteractionEnabled = YES;&&&});&&}&&&}& //清空画线集合 - (void)clearPath {& //将原先的红色 在设置为白色 self.lineColor = [UIColor whiteColor];& //取消按钮的高亮 for(UIButton *btn in self.selectedArray){&&&btn.highlighted = NO;&&btn.selected = NO;& }& //清空 画线的集合 [self.selectedArray removeAllObjects];& //重绘 [self setNeedsDisplay];& }&&&#pragma mark - 1.0添加9个按钮&&&//1. aweakformnib //2. 懒加载 //创建9个按钮 - (void)awakeFromNib {& for(NSInteger i = 0;i & 9;i++){&&&&& //创建按钮&&&& UIButton *btn = [[UIButton alloc]init];&&&&& //设置tag 是为了验证密码&&&& btn.tag = i;&&&&& //关闭按钮的交互 是为了 触摸事件&&&& btn.userInteractionEnabled = NO;&&&//设置背景图片&&[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];&&&//设置按钮的高亮图片&&[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateHighlighted];&&&//设置按钮的选中状态&&[btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_error"] forState:UIControlStateSelected];&&&//添加&&[self addSubview:btn]; }& }&&&//设置按钮的frame- (void)layoutSubviews { [super layoutSubviews];& for (NSInteger i = 0; i & self.subviews.count; i++) {&&&//九宫格布局&&CGFloat W = self.bounds.size.width;&&CGFloat H = self.bounds.size.height;&&&CGFloat btnW = 74;&&CGFloat btnH = 74;&&//计算间隔&&//列数&&NSInteger columns = 3;&&&&&&&&&&&&&&&&&&// 总宽度 - 3个按钮的宽度 / 2&&CGFloat margW = (W - columns * btnW)/(columns - 1);&&CGFloat margH = margW;&&&//列的索引&&NSInteger col = i % columns;&&//行的索引&&NSInteger row = i / columns;&&&CGFloat btnX = col * (margW + btnW);&&CGFloat btnY = row * (margH + btnH);&&&//设置按钮的frame&&UIButton *btn = self.subviews[i];&&&btn.frame = CGRectMake(btnX, btnY, btnW, btnH);& }}
知识点补充
1.九宫格实现原理
Objective-C
界面是一个九宫格的布局.九宫格实现思路.
&span class="hljs-number"&1.&/span&先确定有多少列 cloum = &span class="hljs-number"&3&/span&;
&span class="hljs-number"&2.&/span&计算出每列之间的距离
&span class="hljs-number"&2.1&/span&计算为: CGFloat margin = (当前View的宽度 - 列数 * 按钮的宽度) / (总列数 - &span class="hljs-number"&1&/span&)
&span class="hljs-number"&3.&/span&每一列的X的值与它当前所在的列有关
&span class="hljs-number"&3.1&/span&列号：curColum = i % cloum
&span class="hljs-number"&4.&/span&每一行的Y的值与它当前所在的行有关
&span class="hljs-number"&4.1&/span&行号:curRow = i / cloum
&span class="hljs-number"&5.&/span&每一个按钮的X值为, margin + 当前所在的列 * (按钮的宽度+ 每个按钮之间的间距)
&span class="hljs-number"&6.&/span&每一个按钮的Y值为 当前所在的行 * (按钮的宽度 + 每个按钮之间的距离)
12345678910
界面是一个九宫格的布局.九宫格实现思路.&&&&&span class="hljs-number"&1.&/span&先确定有多少列 cloum = &span class="hljs-number"&3&/span&;&&&&&span class="hljs-number"&2.&/span&计算出每列之间的距离&&&&&& &span class="hljs-number"&2.1&/span&计算为: CGFloat margin = (当前View的宽度 - 列数 * 按钮的宽度) / (总列数 - &span class="hljs-number"&1&/span&)&&&&&span class="hljs-number"&3.&/span&每一列的X的值与它当前所在的列有关&&&&&&&&&span class="hljs-number"&3.1&/span&列号：curColum = i % cloum&&&&&span class="hljs-number"&4.&/span&每一行的Y的值与它当前所在的行有关&&&&&&&&&span class="hljs-number"&4.1&/span&行号:curRow = i / cloum&&&&&span class="hljs-number"&5.&/span&每一个按钮的X值为, margin + 当前所在的列 * (按钮的宽度+ 每个按钮之间的间距)&&&&&span class="hljs-number"&6.&/span&每一个按钮的Y值为 当前所在的行 * (按钮的宽度 + 每个按钮之间的距离)
可能感兴趣的话题
关于iOS频道
iOS频道分享iOS和Swift开发，应用设计和推广，iOS相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线