/var/log/seiji

29 Nov 2008

UIViewの作成-CS193P

UIViewの作成と図形の描画

前回のHelloPolyプロジェクトを拡張します。今回はUIVIewのSubClassを作成し、図形を描画します。
CS193P - Cocoa Programming | Announcements.jpg
iPhone Application Programming

今迄、作成したソースはhttp://public.me.com/seijit/iPhone/CS193Pから

xcode.png UIViewのSubClass作成

UIView SubClassテンプレート作成

UIViewのSubClassを作成します。名前はMyUIViewとします。
2-1-1.jpg

2-2.jpg

MyUIViewController.hの変更

MyUIViewをPropertyに追加します。

IBOutlet MyUIView *myUIVIew;

picture.png UIViewとUIViewControllerの接続

MyUIViewController.hの変更

LibraryからUIViewを配置し、Identity InspectorでClassNameをMyViewとします。またMyUIViewControllerのOutletとの接続も行います。
2-3-1.jpg

xcode.png UIViewなどの実装

PolygonShape

資料にあったpointsForPolygonInRect:numberOfSides:を追加します。

PolygonShape.h
+ (NSArray *)pointsForPolygonInRect:(CGRect)rect numberOfSides:(int)numberOfSides;
PolygonShape.m
+ (NSArray *)pointsForPolygonInRect:(CGRect)rect numberOfSides:(int)numberOfSides {
    CGPoint center = CGPointMake(rect.size.width / 2.0, rect.size.height / 2.0);
    float radius = 0.9 * center.x;
    NSMutableArray *result = [NSMutableArray array];
    float angle = (2.0 * M_PI) / numberOfSides;
    float exteriorAngle = M_PI - angle;
    float rotationDelta = angle - (0.5 * exteriorAngle);
    for (int currentAngle = 0; currentAngle < numberOfSides; currentAngle++) {
        float newAngle = (angle * currentAngle) - rotationDelta;
        float curX = cos(newAngle) * radius;
        float curY = sin(newAngle) * radius;
        [result addObject:[NSValue valueWithCGPoint:CGPointMake(center.x + curX,
                                                                center.y + curY)]];
    }
    return result;
}

MyUIView

PolygonShape *をPropertyに追加します。retain,copyはしません。

MyUIView.h
#import <UIKit/UIKit.h>

@class PolygonShape;
@interface MyUIView : UIView {
    PolygonShape *polygon;
}
@property (nonatomic, assign) PolygonShape *polygon;

@end
MyUIView.m
#import "MyUIView.h"
#import "PolygonShape.h"

@implementation MyUIView
@synthesize polygon;

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // Initialization code
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect bounds = [self bounds];

    CGContextBeginPath(context);
    NSArray *pointsArray = [PolygonShape pointsForPolygonInRect:bounds numberOfSides:[polygon numberOfSides]];
    NSEnumerator *pointsEnu = [pointsArray objectEnumerator];
    // firstPoint
    CGPoint firstPoint = [[pointsEnu nextObject] CGPointValue];
    CGContextMoveToPoint (context, firstPoint.x, firstPoint.y);
    // otherPoint
    for (NSValue *points in pointsEnu ) {
        CGPoint thePoint = [points CGPointValue];
        CGContextAddLineToPoint (context, thePoint.x, thePoint.y);
    }
    CGContextClosePath (context);
    CGContextSetRGBFillColor(context, 0xff/255.0, 0xd7/255.0,0x00/255.0, 1);
    CGContextDrawPath (context, kCGPathFillStroke);
}

- (void)dealloc {
    [super dealloc];
}


@end

MyUIViewController

MyUIViewのPolygon*のセット、そしてPolygonの状態が変更された場合の再描画の支持のコードを追加します。

MyUIViewController.m
- (void)updateInterface {
    if ( [polygon numberOfSides] == [polygon minimumNumberOfSides]) {
        decreaseButton.enabled = NO;
    } else {
        decreaseButton.enabled = YES;
    }
    if ( [polygon numberOfSides] == [polygon maximumNumberOfSides]) {
        increaseButton.enabled = NO;
    } else {
        increaseButton.enabled = YES;
    }
    nameOfPolygon.text = [NSString stringWithFormat:@"aka a %@", [polygon name]];
    numberOfSidesLabel.text = [NSString stringWithFormat:@"%d", [polygon numberOfSides]];
    numberSlider.value = [polygon numberOfSides];
    [myUIView setNeedsDisplay];
}

- (void)viewDidLoad {
    [polygon setMinimumNumberOfSides:3];
    [polygon setMaximumNumberOfSides:12];
    [polygon setNumberOfSides:numberOfSidesLabel.text.integerValue];
    myUIView.polygon = polygon;
    [self updateInterface];
    NSLog (@"My polygon from viewDidLoad: %@", polygon);
    [super viewDidLoad];
}

これで図形の描画ができるようになりました。状態が変更された場合もその都度、再描画されます。
iPhone シミュレータ.jpg
今回作成したソースはhttp://public.me.com/seijit/iPhone/CS193P/Lecture3のHelloPoly3.tar.gzを。状態保存はまた別の機会に行います。

Comments

comments powered by Disqus