自定義button的點擊區域
阿新 • • 發佈:2017-07-13
而已 bin lin mod mark bool 三角形 -s 父控件
某些情況下我們需要按鈕有不規則的形狀,在這些形狀內點擊才有響應,例如下面的圖片中:
圖片中紅線圈出的兩處都是用按鈕做的,按鈕的實際布置是上面第二張圖所畫的那樣,所有按鈕都是矩形的,但是中間的按鈕和一圈的轉盤形狀都不可能用矩形,否則點擊的時候難免相互影響。
那麽如何自定義按鈕點擊的有效區域呢,其實很簡單,只要重寫一個函數即可:
- (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 {
//首先調用父類的方法確定點擊的區域確實在按鈕的區域中
BOOL res = [super pointInside:point withEvent:event];
if (res) {
//繪制一個圓形path
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
if ([path containsPoint:point]) {
//如果在path區域內,返回YES
returnYES;
}
returnNO;
}
returnNO; } 圓盤周圍的按鈕則比較復雜一些,我取巧的只畫了一個三角形,這樣效果幾乎跟弧形差不多。 //自定義圓盤周圍星座按鈕的點擊區域
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
BOOL res = [super pointInside:point withEvent:event];
if (res) {
//畫了一個三角形的path,形狀跟弧形接近,點擊效果幾乎沒什麽區別
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(self.bounds.size.width/2,self.bounds.size.height)];
[path addLineToPoint:CGPointMake(0,0)];
[path addLineToPoint:CGPointMake(self.bounds.size.width,0)];
[path addLineToPoint:CGPointMake(self.bounds.size.width/2,self.bounds.size.height)];
if ([path containsPoint:point]) {
returnYES;
}
returnNO;
}
returnNO; } 最後,對自定義按鈕重寫以上方法後按鈕的有效區域就像下圖所示的用藍色和綠色框線標註出來的那樣,只有在這個區域內點擊才有效:
//首先調用父類的方法確定點擊的區域確實在按鈕的區域中
BOOL res = [super pointInside:point withEvent:event];
if (res) {
//繪制一個圓形path
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
if ([path containsPoint:point]) {
//如果在path區域內,返回YES
returnYES;
}
returnNO;
}
returnNO; } 圓盤周圍的按鈕則比較復雜一些,我取巧的只畫了一個三角形,這樣效果幾乎跟弧形差不多。 //自定義圓盤周圍星座按鈕的點擊區域
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
BOOL res = [super pointInside:point withEvent:event];
if (res) {
//畫了一個三角形的path,形狀跟弧形接近,點擊效果幾乎沒什麽區別
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(self.bounds.size.width/2,self.bounds.size.height)];
[path addLineToPoint:CGPointMake(0,0)];
[path addLineToPoint:CGPointMake(self.bounds.size.width,0)];
[path addLineToPoint:CGPointMake(self.bounds.size.width/2,self.bounds.size.height)];
if ([path containsPoint:point]) {
returnYES;
}
returnNO;
}
returnNO; } 最後,對自定義按鈕重寫以上方法後按鈕的有效區域就像下圖所示的用藍色和綠色框線標註出來的那樣,只有在這個區域內點擊才有效:
自定義button的點擊區域