Image View

(Updated: )

在iPhone上要呈現圖需透過Image View這個元件來呈現，接著以簡單的範例來呈現。

該範例以簡單的Button事件來改變Image View呈現的圖片。

**Step 1.**建立SingleView專案，專案命名為Image View。

**Step 2.**編輯MainStoryboard.storyboard。

加入Image View、Round Rect Button兩個元件，元件的大小調整、Title這就不多做描述。

**Step 3.**加入圖片檔。

加入兩張圖片到該專案下(此範例僅使用兩張圖片作為範例)。

**Step 4.**編輯ViewController.h。

  1. imageView_是要用來顯示圖片。
  2. currentImage是用來判斷目前要顯示哪張圖片。
  3. switchImage為Button事件，用來改變圖片。
1
2
3
4
5
6
7
8
@interface ViewController : UIViewController
{
    UIImageView *imageView_;
    NSInteger currentImage;
}
@property (strong, nonatomic) IBOutlet UIImageView *imageView;
-(IBAction)switchImage:(id)sender;
@end

**Step 5.**編輯ViewController.m

  1. 將currentImage設為0。
  2. 並指定imageView的image為哪一個圖片檔(imageNamed)。
1
2
3
4
5
6
7
@synthesize imageView;
- (void)viewDidLoad
{
    [super viewDidLoad];  
    currentImage = 0;
    imageView.image = [UIImage imageNamed:@"t1.jpg"];
}

switchImage首先判斷currentImage是否為0(零)，條件成立時，將會改變currentImage，並且改變imageView的image，當下次在執行switchImage時，一樣會先判斷currentImage的值，並改變imageView的image。

1
2
3
4
5
6
7
8
9
10
11
-(IBAction)switchImage:(id)sender
{
    if(currentImage == 0){
        currentImage = 1;
        imageView.image = [UIImage imageNamed:@"t2.jpg"];
    }
    else {
        currentImage = 0;
        imageView.image = [UIImage imageNamed:@"t1.jpg"];
    }
}

**Step 6.**建立關連