iOS開發基礎-九宮格座標(3)之Xib

　　延續iOS開發基礎-九宮格座標(2)的內容，對其進行部分修改。

　　本部分採用 Xib 文件來建立用於顯示圖片的 UIView 對象。

1、簡單介紹

　　 Xib 和 storyboard 的比較：

　　1） Xib 是輕量級的，用來描述局部的UI界面；

　　2） storyboard 是重量級的，用來描述整個軟件的多個界面，而且能演示多個界面之間的鏈接關係。

2、 Xib 的簡單使用

　　按照 Command + N ----> User Interface ----> Empty 新建一個 Xib 文件，並命名爲 appxib ，其後綴名爲 .xib 。

　　將 UIView 對象拖到 appxib.xib 文件的畫布中，設置其屬性爲：

             

　　向 UIView 中拖入 UIImageView 對象，設置其屬性爲：

     

 

　　向 UIView 中拖入 UILabel 對象，設置其屬性爲：

     

　　向 UIView 中拖入 UIButton 對象，設置其屬性爲：

     

　　 爲了使UIButton 對象爲圓角矩形，在 Identity Inspector 的 User Defined Runtime Attributes 中添加 layer.cornerRadius 屬性，以下所示：

      

　　最後，將 UIImageView 、 UILabel 和 UIButton 的 tag 屬性分別設置爲1，2，3。

　　效果圖以下所示：

      

3、代碼實現

　　修改 viewDidLoad 方法以下所示：

 1 //ViewController.m
 2 - (void)viewDidLoad {
 3     [super viewDidLoad];
 4     
 5     int totalColumn = 3;        //3列
 6     CGFloat margin = (self.view.frame.size.width - totalColumn*appViewWidth) / (totalColumn + 1);
 7     int count = self.apps.count;
 8     NSLog(@"%d", count);
 9     
10     for (int i = 0; i < count; i++) {
11         int row = i/totalColumn;        //行號，從0開始
12         int column = i%totalColumn;     //列號，從0開始
13         CGFloat appViewX = margin + (margin + appViewWidth) * column;       //子視圖的X座標
14         CGFloat appViewY = margin + (margin + appViewHeight) * row;      //子視圖的Y座標
15         WJQAppInfo *appInfo = self.apps[i];
16         
17         //加載xib文件，並建立UIView控件
18         NSArray *appArray = [[NSBundle mainBundle] loadNibNamed:@"appxib" owner:nil options:nil];
19         UIView *appView = [appArray firstObject];
20         appView.frame = CGRectMake(appViewX, appViewY, appViewWidth, appViewHeight);
21         //建立上述UIView控件的子視圖，建立圖像信息
22         UIImageView *appImageView = (UIImageView *)[appView viewWithTag:1];
23         appImageView.image = appInfo.image;      //設置圖片
24         //建立上述UIView控件的子視圖，建立UILabel信息描述標籤
25         UILabel *appLabel = (UILabel *)[appView viewWithTag:2];
26         appLabel.text = appInfo.desc;
27         //建立下載按鈕
28         UIButton *appButton = (UIButton *)[appView viewWithTag:3];
29         [appButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
30         appButton.tag = i;
31         
32         [self.view addSubview:appView];
33     }
34 }

 

參考博客：iOS開發UI篇—xib的簡單使用

實例代碼：http://pan.baidu.com/s/1eQKIqki