Facebook Twitter Google Maps RSS
Home iPadアプリ 【iOS】画像の指定した部分を引き延ばす方法!
formats

【iOS】画像の指定した部分を引き延ばす方法!

こんにちは!!

駆け出しプログラマーあんどう2です。

今回は画像の指定した部分を引き延ばす方法を紹介します!

画像の指定した部分を引き延ばすということにイメージが湧きにくいと思いますが、

例を挙げると皆さんも頻繁に使っていると思われるメッセージアプリの吹き出し部分です!

あの部分は文字の量に応じて大きさが変化しますよね?

コードで吹き出しの図形を描いて引き延ばすことも出来ますが、

今回は小さい画像を引き延ばしてみます!

でもそんなに難しくないですよね!画像を引き延ばすだけですもんね!

ちなみに、画像を用いる際、対象となる端末の画面スケールに合った画像を用意しなければなりません。

等倍の一種類だけを用意すると、他の画面スケールで表示させたときに意図した通りに引き伸ばされません。

[UIImage ImageNamed:] で読み込む場合は、ファイル名のサフィックスを判断して、

自動的にディスプレイの解像度に合わせた画像を読み分けてくれるので、

等倍のサイズの「balloon.png」と、2倍のサイズの「balloon@2x.png」、

3倍のサイズの「balloon@3x.png」を用意しましょう。

————————————————————————–

UIImage *balloonImg1 = [UIImage imageNamed:@"balloon.png"];

UIImageView *balloonImageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(30, 50, balloonImg1.size.width, balloonImg1.size.height)];

balloonImageView1.image = [UIImage imageNamed:@"balloon.png"];

[self.view addSubview:balloonImageView1];

————————————————————————–

この吹き出しを横に伸ばすだけですからね!!

ImageViewのサイズを変更して・・・

————————————————————————–

UIImage *balloonImg2 = [UIImage imageNamed:@"balloon.png"];

UIImageView *balloonImageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(30, 150, balloonImg2.size.width * 4, balloonImg2.size.height)];

balloonImageView2.image = balloonImg2;

[self.view addSubview:balloonImageView2];

————————————————————————–

実行〜!!

そうなりますよね。分かってましたよ。あえてやってみただけです。

どうしたものか・・・。

やはりコードで図を描画した方がいいのか。

でもせっかく画像あるし使ってやってみたい。

調べまくること数十分・・・

やっと見つけましたよ!

[UIImage stretchableImageWithLeftCapWidth: topCapHeight: ]

これを使えば画像の指定した部分のみを引き延ばせるみたいです。

やってみましょう!

————————————————————————–

UIImage *balloonImg3 = [UIImage imageNamed:@"balloon.png"];

UIImage *stretchImage3 = [balloonImg3 stretchableImageWithLeftCapWidth:balloonImg3.size.width / 2 topCapHeight:balloonImg3.size.height / 2];

UIImageView *balloonImageView3 = [[UIImageView alloc] initWithFrame:CGRectMake(30, 250, balloonImg3.size.width * 4, balloonImg3.size.height)];

balloonImageView3.image = stretchImage3;

[self.view addSubview:balloonImageView3];

————————————————————————–

実行〜!!

おおお!これこれ!

これがやりたかったんですよ!

詳しく説明しますと、

UIImage *stretchImage3 = [balloonImg3 stretchableImageWithLeftCapWidth:balloonImg3.size.width / 2 topCapHeight:balloonImg3.size.height / 2];

この部分で、balloonImg3の横幅の中心を可変に、縦幅の中心を可変にするという設定を行います。

UIImageView *balloonImageView3 = [[UIImageView alloc] initWithFrame:CGRectMake(30, 250, balloonImg3.size.width * 4, balloonImg3.size.height)];

あとは今まで通りImageViewの大きさを変更すれば、上記で設定した可変部分のみ引き延ばされるため、

綺麗な吹き出しができます!

縦幅の中心も可変部分にしているので、こうすると・・・

————————————————————————–

UIImage *balloonImg4 = [UIImage imageNamed:@"balloon.png"];

UIImage *stretchImage4 = [balloonImg4 stretchableImageWithLeftCapWidth:balloonImg4.size.width / 2 topCapHeight:balloonImg4.size.width / 2];

UIImageView *balloonImageView4 = [[UIImageView alloc] initWithFrame:CGRectMake(30, 350, balloonImg4.size.width * 4, balloonImg4.size.height * 2)];

balloonImageView4.image = stretchImage4;

[self.view addSubview:balloonImageView4];

————————————————————————–

皆さんも見慣れているような吹き出しが作れます!

メッセージアプリ以外でも応用が効くを思うので、

ぜひ参考にしてみてください〜!

それではまた!

——————————————–

iPhoneアプリ開発実績はこちら

http://www.system-i-enter.com/result/index-iPhone_iPad.php

コメントを残す

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

*


*

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