画像の基本をマスター:UIImageView

UIImageViewとは

画像を表示させる領域です。
1.単純に1つの画像を表示する
2.複数の画像をアニメーションさせる
ことができます。

上記2つをサンプルプログラムで試してみます。

UIImageViewの基本:画像の表示

ボタンをタップすると、画像を表示するアプリを作ってみます。
以下のようなイメージです(ボタンは3つ用意)。
imageview05

 

まずは、イメージビューとボタン×3をxibファイル(.xib)に配置します。
imageview01

今回は320×400のサンプル画像を使ってみます。
画像を用意するのが面倒な場合は、こちらからダウンロードして下さい。

サイズの変更はサイズインスペクタから行えます。
imageview02

 

次に、ヘッダーファイル(.h)に定義します。

#import 

@interface TestViewController : UIViewController
{
    UIImageView *iv;
}

@property (nonatomic, retain) IBOutlet UIImageView *iv;

- (IBAction)BtnPush1:(id)sender;
- (IBAction)BtnPush2:(id)sender;
- (IBAction)BtnPush3:(id)sender;

@end

そして、ソースファイルに追記します。

#import "TestViewController.h"

@interface TestViewController ()

@end

@implementation TestViewController

@synthesize iv;

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

- (IBAction)BtnPush1:(id)sender {
    
    NSLog(@"ボタン1が押されました");
    iv.image = [UIImage imageNamed:@"image01.png"];
}

- (IBAction)BtnPush2:(id)sender {
    
    NSLog(@"ボタン2が押されました");
    iv.image = [UIImage imageNamed:@"image02.png"];
}

- (IBAction)BtnPush3:(id)sender {
    
    NSLog(@"ボタン3が押されました");
    iv.image = [UIImage imageNamed:@"image03.png"];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

 

最後に、関連付けします。
まずは、イメージビューを『iv』へ紐付けます。
imageview03

次に、ボタンを『BtnPush1〜BtnPush3』にそれぞれ紐付けます。
ここでは、「Touch Up Inside」と紐付けておきましょう。イベントの種類はこちらで参照して下さい。
imageview04

以上です。
シミュレータを実行し、ボタンをタップしましょう。

imageview06 imageview07 imageview08


変数名.image = [UIImage imageNamed:@"画像ファイル名"];

例:iv.image = [UIImage imageNamed:@"test.png"];

※画像はあらかじめ準備して取り込んでおいて下さい。


長くなったので、アニメーションについては別記事にまとめます。

PS
アプリの背景を黒色にするだけで少しかっこよくなります。
imageview09

コメントを残す

サブコンテンツ

このページの先頭へ