您好,登錄后才能下訂單哦!
前言
最近公司的項(xiàng)目中需要用到弧形菜單,起初自定義UICollectionView的layout,但實(shí)現(xiàn)出的效果并不符合項(xiàng)目中要求按鈕始終垂直于界面、界面始終保持幾個(gè)按鈕等一系列需求(是我水平不夠),后來(lái)索性用UIView寫(xiě)了一個(gè)弧形可滑動(dòng)菜單。
效果如下:
實(shí)現(xiàn)思路:
1、根據(jù)思路可以自己確定到半徑與圓心的每個(gè)按鈕所在的x點(diǎn),可根據(jù)數(shù)學(xué)公式求得y點(diǎn)
2、給按鈕添加拖動(dòng)手勢(shì)UIPanGestureRecognizer,根據(jù)偏移量x計(jì)算出對(duì)應(yīng)偏移弧線的距離,根據(jù)圓的運(yùn)動(dòng)軌跡賦值給按鈕的x 并更新 y
3、結(jié)束拖動(dòng)手勢(shì)的時(shí)候計(jì)算偏移距離、根據(jù)是否劃到下一個(gè)按鈕的一半的width來(lái)實(shí)施動(dòng)畫(huà)更新按鈕的center
實(shí)現(xiàn)細(xì)節(jié):
已知圓心、半徑與x值求y值:(x-a)^2 + (y - b)^ 2 = r2。
用到的UIPanGestureRecognizer的三種狀態(tài):UIGestureRecognizerStateBegan\UIGestureRecognizerStateChanged\UIGestureRecognizerStateEnded
用UIPanGestureRecognizer的locationInView方法來(lái)確定當(dāng)前點(diǎn)的位置
if(pgr.state==UIGestureRecognizerStateBegan){ self.endMove = NO; self.beginPoint=[pgr locationInView:self]; }else if (pgr.state==UIGestureRecognizerStateChanged){ self.movePoint= [pgr locationInView:self]; self.moveX = sqrt(fabs(self.movePoint.x - self.beginPoint.x) * fabs(self.movePoint.x - self.beginPoint.x) + fabs(self.movePoint.y - self.beginPoint.y) * fabs(self.movePoint.y - self.beginPoint.y)); }
計(jì)算出偏移的x點(diǎn)后要根據(jù)起始點(diǎn)來(lái)判斷用戶(hù)是向左滑動(dòng)還是向右滑動(dòng)
if (self.movePoint.x>self.beginPoint.x) { self.moveNum += self.moveX; } else{ self.moveNum -= self.moveX; }
之后判斷判斷是否超過(guò)了所有按鈕所在的范圍并賦值
if (self.moveNum > 0) { self.moveNum = 0; } if (self.moveNum < -((SCREEN_WIDTH - 20 - subViewW)/(self.showBtnCount - 1)) * (self.subViewArray.count - self.showBtnCount)) { self.moveNum = -((SCREEN_WIDTH - 20 - subViewW)/(self.showBtnCount - 1)) * (self.subViewArray.count - self.showBtnCount); }
將偏移量賦值給x并更新y值
///中心點(diǎn) CGFloat yy = 0.0; CGFloat xx = 0.0; CGFloat margin = 0.0; ///子視圖x中點(diǎn) UIView *view = self.subViewArray[0]; CGFloat subCenterX = view.frame.size.width / 2; for (NSInteger i=0; i<self.subViewArray.count ;i++) {// 178,245 margin = i * ((SCREEN_WIDTH - 20 - view.frame.size.width)/(self.showBtnCount - 1)); xx = 10 + subCenterX + fabs(self.subViewX) + margin + self.moveNum; yy = sqrt((self.radius - self.circleMargin / 2) * (self.radius - self.circleMargin / 2) - (xx - self.radius) * (xx - self.radius)) + self.radius; if (xx >= self.radius - (self.radius - self.circleMargin / 2) && xx <= self.radius + (self.radius - self.circleMargin / 2)) { UIButton *button=[self.subViewArray objectAtIndex:i]; NSLog(@"~~~~~~~%@",button); if (self.isEndMove) { [UIView animateWithDuration:0.3 animations:^{ button.center=CGPointMake(xx , yy); }]; } else{ button.center=CGPointMake(xx , yy); } } NSLog(@"xx:%f---------yy:%f",xx,yy); }
原理大概就是這些
然后把項(xiàng)目中的效果直接做了簡(jiǎn)單的封裝傳了個(gè)demo
Github地址:https://github.com/xuuhan/HXCamberMenu
本地下載地址:http://xiazai.jb51.net/201705/yuanma/HXCamberMenu(jb51.net).rar
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,實(shí)現(xiàn)的效果和功能可能還有著明顯的限制,希望同學(xué)們多多指教,同時(shí)也希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。