iPhoneアプリ開発 芳名帳アプリ作成(3) -名前を書けるようにする-

公開日: : iPhone, IT


 今までの流れ

 画面構成

今回の芳名帳アプリは以下の画面で構成しています。

  • メイン画面(MainViewController)
  • 設定画面(SettingViewController)
  • 記帳画面(GuestBookViewController)

 記帳画面で名前を書く

利用するのは前回追加した以下の3つのメソッドです。

 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 }
 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
 }
 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
 }

 線を書く

利用するメソッドは以下の時に呼ばれます。

  • touchesBegan:画面にタッチした時
  • touchesMoved:画面にタッチした状態で指が移動している間
  • touchesEnded:画面から指が離れた時

以下の様な方法で、上記の各メソッドが呼ばれた時のタッチ位置が取得出来ます。

 UITouch *touch      = [touches anyObject];
 CGPoint *touchPoint = [touch locationInView:self.view];
[1] タッチした場所を保存
 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    touchPoint     = [touch locationInView:self.nameSpace];
 }

UIImageViewであるnameSpaceに線を書くためlocationInViewの対象はself.nameSpaceにしています。

[2] 移動時に移動分の線を書く
 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch       = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self.nameSpace];
    [self draw:touchPoint endPoint:currentPoint];
    touchPoint = currentPoint;
 }

最初にタッチした場所と移動時の場所を利用して線を書きます。

線を書くのは以下の様な感じで書けます。

 - (void)draw:(CGPoint)startPoint endPoint:(CGPoint)endPoint {
	CGRect rect = CGRectMake(0,
                             0,
                             self.nameSpace.frame.size.width,
                             self.nameSpace.frame.size.height);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    //今までの画像を描画
    [self.nameSpace.image drawInRect:rect];
    //線の形
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextDrawPath(context, kCGPathFillStroke);
    //線の色
    CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
    //線の太さ
    CGContextSetLineWidth(context, 5.0f);
    CGContextMoveToPoint(context, startPoint.x, startPoint.y);
    CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
    CGContextStrokePath(context);
    //画像化
    UIImage *line = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    self.nameSpace.contentMode = UIViewContentModeScaleAspectFill;
    self.nameSpace.image       = line;
    UIGraphicsEndImageContext();
 }

線を書いて画像化して、UIImageViewに置きます。
これにより瞬間の線を書けますが、その都度画像化しているだけでは、今までの履歴がありません。
そこで、最初にdrawInRectで今までの画像を表示することにより、線になります。
これで。名前を書くことが出来るようになりました。

 枠線を表示させる

今のままだと書ける範囲がわかりません。
そこで枠線を表示させます。

以下をimportします。

#import "QuartzCore/CALayer.h"

次に、最初に以下を設定することで枠線を表示させることができます。

    CALayer *layer = [self.nameSpace layer];
    [layer setMasksToBounds:YES];
    [layer setBorderWidth: 3.0f];
    [layer setBorderColor:[ [UIColor blackColor] CGColor] ];

 設定周り

今回実装した部分で以下はカスタマイズできる方が便利です。

  • ペンの太さ・色
  • 枠線の太さ・色

特に枠線の箇所については、太さや色よりも様々な背景画像を用意した方がいいかもしれません。

広告

関連記事

iPhoneアプリ開発 芳名帳アプリ作成(2) -記帳画面作成-

* 今までの流れ - * 画面構成 今回の芳名帳アプリは以下の画面で構成しています。 -

記事を読む

Jenkins + iPhoneアプリ(3) -ipaファイルをTestFlightにアップロード-

* これまで - -[http://pplace.jp/2013/01/1192/:title=

記事を読む

no image

Capistranoで簡単デプロイ -開発用サーバー編-

cakePHPを使って開発しているサービス()で、リリース周りを楽にしたいなと思いCapistran

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(5) -ペンサイズと入力エリア数の設定-

* 今までの流れ - -[http://pplace.jp/2013/06/1531/:titl

記事を読む

input

CakePHP2系でTwigを利用 -書き方のメモ-

CakePHP2系でTwigをどのように記述するかのメモ。 数パターンしか載せてないですが、だいた

記事を読む

datebox-date

jQueryMobileでカレンダー表示 -DateBoxプラグインの利用-

スマートフォン対応をしているとカレンダーの表示の仕方をスマートフォンらしくしたいことがあると思います

記事を読む

no image

Objective-cで悩んでいたこと −アクセサのことについて−

* 疑問 以前書いたiPhoneアプリを開発していて(Objective-Cを触っていて)疑問に思

記事を読む

no image

PhoneGapを触ってみた(2) -実機でテスト編-

* 今までの流れ - * 自分の端末で動かしてみよう 今回は、PhoneGapで作成したアプリを実

記事を読む

no image

CakePHP1.3でテストコード(3) -ENUM型が使えない-

cakePHP1.3でのSimpleTestを使ったテストケースの第3回目。 今回は、テーブル構成で

記事を読む

no image

iPhoneアプリ開発 -WebViewで表示しているページで特定のリンククリック時の動作を変える-

* やりたいこと UIWebViewでWebページを表示し、特定のリンクをクリックした際には別処理を

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑