UIPicker View 中同時置入圖片與文字的方法

 

延續前一篇 UIPicker View 中置入圖片的方法，本篇將延續其結尾示範如何使用 UILabel 讓文字與影像同時顯示於一個 UIPicker View 內，請看以下程式碼範例。

如上圖的 UIPicker View 被分成四個不同的項目，可以想像成每一個單獨的項目就是一個 UIView ，在 UIView 內加入了 圖片影像 ImageView 與 文字 UILabel，藉由 frame 來排版，讓  ImageView 與 UILabel 呈現於 UIView 中適當的位置。以第一個項目為例，其程式碼如下。

//設定相關物件的frame
CGRect objectRect = CGRectMake(0.0, 0.0, 250.0, 20.0);
CGRect nameRect = CGRectMake(100.0, 0.0, 120.0, 20.0);
CGRect imageRect = CGRectMake(50.0, 0.0, 20.0, 20.0);

//製作影像物件
UIImageView *image_1_View = [[UIImageView alloc] initWithFrame:imageRect];

//製作文字物件
UILabel *name_1_Label = [[UILabel alloc] initWithFrame:nameRect];
[image_1_View setImage:[UIImage imageNamed:@"red.png"]];
name_1_Label.text = @"紅色藥水 x3";
[name_1_Label setBackgroundColor:[UIColor colorWithWhite:0.0 alpha:0.0]];

//將影像與文字物件放入UIView中整合
UIView *object_1_View = [[UIView alloc] initWithFrame:objectRect];
[object_1_View addSubview:name_1_Label];
[object_1_View addSubview:image_1_View];

現在我們已經製作好第一個項目的 UIView，假設我們把所有項目的 UIView 都放置在一個名為 objectArray 的 NSArray 中，那麼只要在內建函式中鍵入以下程式碼，UIPicker View 就可以同時顯示圖片與文字了。

//內建函式印出圖片在Picker上
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {
    return [objectArray objectAtIndex:row];
}