iOS UIButton之改變有效點選區域(改變熱區)

QiShare發表於2018-08-17

級別:★☆☆☆☆
標籤:「UIButton」「熱區」
作者: WYW
審校: Xs·H

大家好,今天小編將會帶大家瞭解一下UIButtonframe不變的情況下,如何改變有效點選區域(也就是我們所說的改變熱區)。

先睹為快,讓我們看一下demo效果圖:

iOS UIButton之改變有效點選區域(改變熱區)

  • Demo解讀
    • 1.上邊的較大灰色按鈕topGrayReduceClickAreaContainerButton, 在其上放置了一個可以穿透事件的黃色子檢視yellowTopRealClickAreaView, 改變了topGrayReduceClickAreaContainerButton的有效點選區域為yellowTopRealClickAreaView範圍。
    • 2.下邊的較大灰色檢視 是一個_bottomGrayContainerLabel, 在其上放置了一個可以接收互動的blueRealEffectiveClickAreaLabel, 在blueRealEffectiveClickAreaLabel上放置了一個很小的紅色按鈕redEnlargeClickAreaButton,改變了redEnlargeClickAreaButton的有效點選區域為blueRealEffectiveClickAreaLabel範圍。

應用場景

有時設計師給的某些可點選的控制元件的尺寸較小
按照設計師給的圖做出相應的視覺效果比較容易。
但可能出現一些問題:由於Button過小,不太容易點選到有效區域,所以使用者雖然在感官上點選了控制元件,卻並沒有得到反饋。

  • 官方: Make it easy for people to interact with content and controls by giving each interactive element ample spacing. Give tappable controls a hit target of about 44 x 44 points.
  • 解釋:為了便於使用者點選控制元件後有反應,需要設定足夠大小的互動控制元件,給可點選控制元件的大約44 x 44 點的點選區域

解決方案

通過重寫- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event; 以改變按鈕的有效點選區域

關鍵程式碼

QiChangeClickEffectiveAreaButton.h:

#import <UIKit/UIKit.h>

@interface QiChangeClickEffectiveAreaButton : UIButton

//! 點選範圍的縮小值 此值目前只是為了演示 把較大按鈕的點選範圍變小
@property (nonatomic,assign) CGFloat qi_clickAreaReduceValue;

@end

複製程式碼

QiChangeClickEffectiveAreaButton.m:

#import "QiChangeClickEffectiveAreaButton.h"

@implementation QiChangeClickEffectiveAreaButton

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    
    if (_qi_clickAreaReduceValue > 0) {
        if (_qi_clickAreaReduceValue >= CGRectGetWidth(self.bounds) / 2) {
            _qi_clickAreaReduceValue = CGRectGetWidth(self.bounds) / 2;
        }
        
        CGRect bounds = CGRectInset(self.bounds, _qi_clickAreaReduceValue, _qi_clickAreaReduceValue);
        return CGRectContainsPoint(bounds, point);
    }
    
    //獲取bounds 實際大小
    CGRect bounds = self.bounds;
    
    //若熱區小於 44 * 44 則放大熱區 否則保持原大小不變
    CGFloat widthDelta = MAX(44.0 - bounds.size.width, .0);
    CGFloat heightDelta = MAX(44.0 - bounds.size.height, .0);
    //擴大bounds
    bounds = CGRectInset(bounds, -0.5 * widthDelta, -0.5 * heightDelta);
    //點選的點在新的bounds 中 就會返回YES
    return CGRectContainsPoint(bounds, point);
}

@end
複製程式碼

程式碼GitHub地址

參考學習地址

關注我們的途徑有:
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章:
iOS UIButton之UIControlEvents介紹
奇舞週刊第 271 期:寫給設計師的機器學習指南

相關文章