分析界面,當(dāng)手指在上面移動(dòng)時(shí),當(dāng)移動(dòng)到一個(gè)按鈕范圍內(nèi)當(dāng)中, 它會(huì)把按鈕給成為選中的狀態(tài).
并且把第一個(gè)選中的按鈕當(dāng)做一個(gè)線的起點(diǎn),當(dāng)手指移動(dòng)到某個(gè)按鈕上時(shí),就會(huì)添加一根線到選中的那妞上.
當(dāng)手指松開(kāi)時(shí),所有按鈕取消選中.所有的線都清空.
實(shí)現(xiàn)思路:
先判斷點(diǎn)前手指在不在當(dāng)前的按鈕上.如果在按鈕上,就把當(dāng)前按鈕成為選中狀態(tài).
并且把當(dāng)前選中的按鈕添加到一個(gè)數(shù)組當(dāng)中.如果當(dāng)前按鈕已經(jīng)是選中狀態(tài),就不需要再添加到數(shù)組中了.
每次移動(dòng)時(shí),都讓它進(jìn)行重繪.
在繪圖當(dāng)中,遍歷出所有的選中的按鈕,
判斷數(shù)組當(dāng)中的第一個(gè)無(wú)素,如果是第一個(gè),那么就把它設(shè)為路徑的起點(diǎn).其它都在添加一根線到按鈕的圓心.
如果當(dāng)前點(diǎn)不在按鈕上.那么就記錄住當(dāng)前手指所在的點(diǎn).直接從起點(diǎn)添加一根線到當(dāng)前手指所在的點(diǎn).
實(shí)現(xiàn)步驟:
1.搭建界面
界面是一個(gè)九宮格的布局.九宮格實(shí)現(xiàn)思路.
先確定有多少列 cloum = 3;
計(jì)算出每列之間的距離
計(jì)算為: CGFloat margin = (當(dāng)前View的寬度 - 列數(shù) * 按鈕的寬度) / 總列數(shù) + 1
每一列的X的值與它當(dāng)前所在的行有關(guān)
當(dāng)前所在的列為:curColum = i % cloum
每一行的Y的值與它當(dāng)前所在的行有關(guān).
當(dāng)前所在的行為:curRow = i / cloum
每一個(gè)按鈕的X值為, margin + 當(dāng)前所在的列 * (按鈕的寬度+ 每個(gè)按鈕之間的間距)
每一個(gè)按鈕的Y值為 當(dāng)前所在的行 * (按鈕的寬度 + 每個(gè)按鈕之間的距離)
具體代碼為:
總列婁
int colum = 3;
每個(gè)按鈕的寬高
CGFloat btnWH = 74;
每個(gè)按鈕之間的距離
CGFloat margin = (self.bounds.size.width - colum * btnWH) / (colum + 1);
for(int i = 0; i < self.subviews.count; i++ ){
當(dāng)前所在的列
int curColum = i % colum;
當(dāng)前所在的行
int curRow = i / colum;
CGFloat x = margin + (btnWH + margin) * curColum;
CGFloat y = (btnWH + margin) * curRow;
取出所有的子控件
UIButton *btn = self.subviews[i];
btn.frame = CGRectMake(x, y, btnWH, btnWH);
}
2.監(jiān)聽(tīng)手指在上面的點(diǎn)擊,移動(dòng),松開(kāi)都需要做操作.
2.1在手指開(kāi)始點(diǎn)擊屏幕時(shí),如果當(dāng)前手指所在的點(diǎn)在按鈕上, 那就讓按鈕成為選中狀態(tài).
所以要遍歷出所有的按鈕,判斷當(dāng)前手指所在的點(diǎn)在不在按鈕上,
如何判斷當(dāng)前點(diǎn)在不在按鈕上?
當(dāng)前方法就是判斷一個(gè)點(diǎn)在不在某一個(gè)區(qū)域,如果在的話會(huì)返回Yes,不在的話,返回NO.
CGRectContainsPoint(btn.frame, point)
在手指點(diǎn)擊屏幕的時(shí)候,要做的事分別有
1.獲取當(dāng)前手指所在的點(diǎn).
UITouch *touch = [touches anyObject];
CGPoint curP = [touch locationInView:self];
2.判斷當(dāng)前點(diǎn)在不在按鈕上.
for (UIButton *btn in self.subviews) {
if (CGRectContainsPoint(btn.frame, point)) {
return btn;
}
}
3.如果當(dāng)前點(diǎn)在按鈕上,并且當(dāng)前按鈕不是選中的狀態(tài).
那么把當(dāng)前的按鈕成為選中狀態(tài).
并且把當(dāng)前的按鈕添加到數(shù)組當(dāng)中
2.2 當(dāng)手指在移動(dòng)的時(shí)也需要判斷.
判斷當(dāng)前點(diǎn)在按鈕上,并且當(dāng)前按鈕不是選中的狀態(tài).
那么把當(dāng)前的按鈕成為選中狀態(tài).
并且把當(dāng)前的按鈕添加到數(shù)組當(dāng)中.
在移動(dòng)的時(shí)候做重繪的工作.
2.3 當(dāng)手指離開(kāi)屏幕時(shí).
取出所有的選中按鈕,把所有選中按鈕取消選中狀態(tài).
清空選中按鈕的數(shù)組.
繪重繪的工作.
3. 在繪圖方法當(dāng)中.
創(chuàng)建路徑
遍歷出有的選中按鈕.如果是第一個(gè)按鈕,把第一個(gè)按鈕的中心點(diǎn)當(dāng)做是路徑的起點(diǎn).
其它按鈕都直接添加一條線,到該按鈕的中心.
遍歷完所有的選中按鈕后.
最后添加一條線到當(dāng)前手指所在的點(diǎn).