自定義button的點擊區域

某些情況下我們需要按鈕有不規則的形狀,在這些形狀內點擊才有響應,例如下面的圖片中:

圖片中紅線圈出的兩處都是用按鈕做的,按鈕的實際布置是上面第二張圖所畫的那樣,所有按鈕都是矩形的,但是中間的按鈕和一圈的轉盤形狀都不可能用矩形,否則點擊的時候難免相互影響。

那么如何自定義按鈕點擊的有效區域呢,其實很簡單,只要重寫一個函數即可:

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event

系統發生觸摸事件的時候會從window到父控件到子控件一個個檢測觸摸點是否在其中,如果在其中,則返回YES,最后返回YES的子控件作為響應事件的控件。

我們只要重寫這個方法,在其中判斷,是否點擊了我們想要的區域,是的話就返回YES,否則返回NO,這樣就實現了自定義點擊的有效區域了。注意,這邊并沒有改變按鈕的形狀,按鈕還是矩形的按鈕,只是改變了按鈕中響應區域而已。

那么接下來的問題就是,怎么判斷一個點是否在一個不是矩形的區域中呢,這邊可以使用UIBezierPath的方法:

- (BOOL)containsPoint:(CGPoint)point;

我們可以先根據想要的形狀繪制一條path,然后判斷調用上面的方法去判斷即可。

例如,我自定義了上面圓盤中心的圓形按鈕,重寫了函數,實現只有點擊圓形區域按鈕才有用。

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event {

//首先調用父類的方法確定點擊的區域確實在按鈕的區域中

BOOLres = [superpointInside:pointwithEvent:event];

if(res) {

//繪制一個圓形path

UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:self.bounds];

if([pathcontainsPoint:point]) {

//如果在path區域內,返回YES

returnYES;

}

returnNO;

}

returnNO;

}

圓盤周圍的按鈕則比較復雜一些,我取巧的只畫了一個三角形,這樣效果幾乎跟弧形差不多。

//自定義圓盤周圍星座按鈕的點擊區域

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event {

BOOLres = [superpointInside:pointwithEvent:event];

if(res) {

//畫了一個三角形的path,形狀跟弧形接近,點擊效果幾乎沒什么區別

UIBezierPath*path = [UIBezierPathbezierPath];

[pathmoveToPoint:CGPointMake(self.bounds.size.width/2,self.bounds.size.height)];

[pathaddLineToPoint:CGPointMake(0,0)];

[pathaddLineToPoint:CGPointMake(self.bounds.size.width,0)];

[pathaddLineToPoint:CGPointMake(self.bounds.size.width/2,self.bounds.size.height)];

if([pathcontainsPoint:point]) {

returnYES;

}

returnNO;

}

returnNO;

}

最后,對自定義按鈕重寫以上方法后按鈕的有效區域就像下圖所示的用藍色和綠色框線標注出來的那樣,只有在這個區域內點擊才有效:

侵權刪 ?只為了保存自己看。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容