UIIVewに穴をあける

ひさびさの投稿になりました 最近は, iOSとサーバーサイドの仕事にほぼ集中するような状態です 今回はUIViewに穴をつくり, 下のViewを表示するというViewをつくります Original English version is here.

早速ですが例です

結果から先に表示すると,
このような形になります. "Touch me!"というのは, UIButtonで, UIViewControllerの上に乗っています その上に, 青い薄い色のUIViewを重ねています. 通常ですと, この薄い色がボタンに重なるはずですが, ホールを作っているので下がくっきり見えています.

このUIの実現方法

上に重ねるViewに対して, UIRectFillを使って描画します. 色は, 透明を使います.

HoleView.h

#import 
@interface HoleInViewController : UIViewController
@end

HoleView.m

#import "HoleView.h"
 
@implementation HoleView
 
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}
 
- (void)drawRect:(CGRect)rect
{
    // Drawing code
    CGRect hole = CGRectMake(100, 100, 100, 40);
    [[UIColor clearColor] setFill];
    UIRectFill(hole);
}

このViewの使い方

ヘッダーは省略します

#import "HoleInViewController.h"
#import "HoleView.h"
 
@interface HoleInViewController ()
 
@property (nonatomic)UIButton *button;
@property (nonatomic)HoleView *holeView;
 
@end
 
@implementation HoleInViewController
 
- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
     
    self.button = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.button setTitle:@"Touch me!" forState:UIControlStateNormal];
    [self.button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
     
    self.view.backgroundColor = [UIColor whiteColor];
     
    self.holeView = [[HoleView alloc] init];
    self.holeView.backgroundColor = [UIColor colorWithRed:0.0 green:0.1 blue:1.0 alpha:0.3];
     
    [self.view addSubview:self.button];
    [self.view addSubview:self.holeView];
}
 
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
-(void)viewWillLayoutSubviews {
     
    self.button.frame = CGRectMake(100, 100, 100, 40);
    self.holeView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
}
@end

これで先ほど見せた例は完成です. さて次回は円のホールの作り方です