關於 UIView 的二三事

 

簡單說 UIView 就像是容器一般，裡面可以裝載任何元件，當然這其中也包括 UIView（主畫面本身自己就是一個 UIView），若是對 UIView 做改變色調、移動或是翻轉等動作，其內容物也都會有對應的一致行為。

以上圖為例使用 View-based 樣板建立專案，在 Interface Builder 中製作以下排版：

• 一個 Navigation Bar
• 三個 UIView
• 每個 UIView 中各自包含一個 UIButton 與三個 UIImageView

各元件彼此間的樹狀關係如下圖。

將這些元件的位置都安置好之後，則透過對 UIView 執行 Animation 的指令，讓 UIView 上所乘載的所有元件同時動作，就形成如同拖拉式選單的效果，請看以下程式碼片段。

//當按下UIView裡的按鈕時所觸發的動作
- (IBAction)onSkillButton:(id)sender {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDuration:0.8];
    [UIView setAnimationBeginsFromCurrentState:YES];

    if (skillView.center.x > 500) {
        skillView.center = CGPointMake(skillView.center.x - 300 , skillView.center.y);
    }
    else {
        skillView.center = CGPointMake(skillView.center.x + 300 , skillView.center.y);
    }

    [UIView commitAnimations];
}

最後，如果你的元件是動態產生的，再將元件置入 UIView 之前千萬要記得給予元件在 UIView 中的位置和他的大小，否則在呼叫 UIView 的 addSubview: 方法之後，元件不會正確的顯示於 View 中。

我們以同一個示範為例，使用程式碼的方式來產生 UIView 與它的內部元件，其程式碼如下。

//長條狀的UIView
skillView = [[UIView alloc]initWithFrame:CGRectMake(385, 180, 400, 80)];
skillView.backgroundColor = [UIColor clearColor];

//UIView的背景
UIImageView *bgImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"skillBG.png"]];
bgImageView.frame = CGRectMake(0, 0, 400, 80);
[skillView addSubview:bgImageView];
[bgImageView release];

//按鈕
UIButton *theButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
theButton.frame = CGRectMake(20, 10, 60, 60);
[theButton setImage:[UIImage imageNamed:@"Button Image.png"] forState:UIControlStateNormal];
[theButton addTarget:self action:@selector(onSkillButton:) forControlEvents:UIControlEventTouchUpInside];
[skillView addSubview:theButton];

//影像A
UIImageView *skillViewA = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"A.jpeg"]];
skillViewA.frame = CGRectMake(108, 8, 64 , 64);
[skillView addSubview:skillViewA];
[skillViewA release];

//影像B
UIImageView *skillViewB = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"B.jpeg"]];
skillViewB.frame = CGRectMake(180, 8, 64 , 64);
[skillView addSubview:skillViewB];
[skillViewB release];

//影像C
UIImageView *skillViewC = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"C.jpeg"]];
skillViewC.frame = CGRectMake(252, 8, 64 , 64);
[skillView addSubview:skillViewC];
[skillViewC release];

//影像D
UIImageView *skillViewD = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"D.jpeg"]];
skillViewD.frame = CGRectMake(324, 8, 64 , 64);
[skillView addSubview:skillViewD];
[skillViewD release];

//將UIView加入到主畫面
[self.view addSubview:skillView];
[skillView release];