モンスターの口から覗き見るWebブラウザ
(XcodeのiOS6 iPhone Simulatorで試しています。)
概要
iPhoneケースでモンスターのやつとか、
耳がついているやつをみかけるので、
ディスプレイに目と口をつけて、
口からコンテンツを覗くようにしたらどうだろうと思い作成。
あと、スクロールで歯をのばすような動きを付け、
見やすさの低下を犠牲に、意味のない主張を増やした。
ポイント
・上にかぶせる顔はBlendModeを使って口を透明しておく
・WebViewにコントロールが行くように顔はuserInterfaceEnable=NO
・WebViewでgestureが使えるように、UIGestureRecognizerDelegateを使う
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
// face with clear mouth hole.
@interface Face : UIView
@property (nonatomic, assign) CGRect mouthRect;
@end
@implementation Face
@synthesize mouthRect;
– (void)drawRect:(CGRect)rect
{
UIRectFill(rect);
// face
[[UIColor colorWithRed:0 green:1 blue:0 alpha:1.0] setFill];
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddRect(ctx, self.bounds);
CGContextDrawPath(ctx, kCGPathFill);
// mouth
UIBezierPath *strokePath =[UIBezierPath bezierPathWithRoundedRect:mouthRect cornerRadius:30];
strokePath.lineWidth = 10.0;
[strokePath stroke];
CGContextSetBlendMode(ctx, kCGBlendModeDestinationOut);
[[UIBezierPath bezierPathWithRoundedRect:mouthRect cornerRadius:30] fill];
CGContextSetBlendMode(ctx, kCGBlendModeNormal);
}
@end
@interface ViewController () <UIGestureRecognizerDelegate>{
UIView *mouth;
UIWebView *webView;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
[self createWebView];
[self createFace];
}
– (void)createWebView
{
NSString *address = @”http://google.com”;
NSURL *url = [NSURL URLWithString:address];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[webView loadRequest:requestObj];
[self.view addSubview:webView];
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
pan.delegate = self;
[webView addGestureRecognizer:pan];
}
– (void)pan:(UIGestureRecognizer*)gr
{
for (UIView *v in self.view.subviews) {
if (v.tag == 1) {
v.frame = CGRectMake(v.frame.origin.x, v.frame.origin.y, v.frame.size.width, v.frame.size.height + 3);
}
}
if (gr.state == UIGestureRecognizerStateEnded) {
for (UIView *v in self.view.subviews) {
if (v.tag == 1) {
[UIView animateWithDuration:0.5 animations:^{
v.frame = CGRectMake(v.frame.origin.x, v.frame.origin.y, v.frame.size.width, 40);
}];
}
}
}
}
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
return YES;
}
– (void)createFace
{
Face *face = [[Face alloc] initWithFrame:self.view.bounds];
face.backgroundColor = [UIColor clearColor];
face.mouthRect = CGRectMake(10, 100, 300, 350);
// important!
// pass throw touch event. to web view
face.userInteractionEnabled = NO;
[self.view addSubview:face];
UIView *eyeR = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 30)];
eyeR.backgroundColor = [UIColor whiteColor];
eyeR.layer.cornerRadius = 15;
eyeR.center = CGPointMake(60, 30);
[face addSubview:eyeR];
UIView *eyeRB = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 16, 16)];
eyeRB.backgroundColor = [UIColor blackColor];
eyeRB.layer.cornerRadius = 8;
eyeRB.center = CGPointMake(48, 30);
[face addSubview:eyeRB];
UIView *eyeL = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
eyeL.backgroundColor = [UIColor whiteColor];
eyeL.layer.cornerRadius = 20;
eyeL.center = CGPointMake(260, 60);
[face addSubview:eyeL];
UIView *eyeLB = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 16, 16)];
eyeLB.layer.cornerRadius = 8;
eyeLB.backgroundColor = [UIColor blackColor];
eyeLB.center = CGPointMake(262, 61);
[face addSubview:eyeLB];
for (int i=0; i<8; i++) {
UIView *t = [[UIView alloc] initWithFrame:CGRectMake(i*32 + 30, 98, 28, 40)];
t.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.7];
t.layer.borderColor = [UIColor blackColor].CGColor;
t.layer.borderWidth = 2.0;
t.layer.cornerRadius = 3.0;
t.tag = 1;
[self.view addSubview:t];
}
for (int i=0; i<8; i++) {
UIView *t = [[UIView alloc] initWithFrame:CGRectMake(i*32 + 30, 412, 28, 40)];
t.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.7];
t.layer.borderColor = [UIColor blackColor].CGColor;
t.layer.borderWidth = 2.0;
t.layer.cornerRadius = 3.0;
[self.view addSubview:t];
}
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end