IOS開發學習筆記十 使用程式碼實現GridView的效果
阿新 • • 發佈:2018-11-13
效果圖:專案地址
把圖片素材放入專案中,併為專案建立plist檔案,存放一個字典陣列,每個字典裡面對應存放這圖片素材名稱和GridView子條目的對應的文字描述。
新增NSArray *app的變數,使用懶載入的方式來讀取並儲存plist檔案的內容
在ViewController裡面通過程式碼動態新增子條目,設定子條目的寬和高,並計算每個子條目應該擺放的具體位置,在子條目裡面再新增UIImageView,UIButton,UILabel控制元件
把從plist檔案中解析得到的app陣列資料依次賦值給對應的子條目的UIImageView,UIButton,UILabel控制元件上。
ViewController對應的具體程式碼如下:
#import "ViewController.h"
@interface ViewController ()
// 用來儲存所有應用的資料
@property (nonatomic, strong) NSArray *apps;
@end
@implementation ViewController
// 重寫apps屬性的get方法, 進行懶載入資料
- (NSArray *)apps
{
if (_apps == nil) {
// 載入資料
// 1. 獲取app.plist檔案在手機上的路徑
NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
// 2. 根據路徑載入資料
_apps = [NSArray arrayWithContentsOfFile:path];
}
return _apps;
}
- (void)viewDidLoad {
[super viewDidLoad];
// 假設每行的應用的個數
int columns = 3;
// 獲取控制器所管理的view的寬度
CGFloat viewWidth = self.view.frame.size.width;
// 每個應用的寬和高
CGFloat appW = 75;
CGFloat appH = 90;
CGFloat marginTop = 30; // 第一行距離頂部的距離
CGFloat marginX = (viewWidth - columns * appW) / (columns + 1);
CGFloat marginY = marginX; // 假設每行之間的間距與marginX相等
for (int i = 0; i < self.apps.count; i++) {
// 獲取當前這個應用的資料字典
NSDictionary *appDict = self.apps[i];
// 1. 建立每個應用(UIView)
UIView *appView = [[UIView alloc] init];
// 2. 設定appView的屬性
// 2.1 設定appView的背景色
//appView.backgroundColor = [UIColor blueColor];
// 2.2 設定appView的frame屬性
// 計算每個單元格所在的列的索引
int colIdx = i % columns;
// 計算每個單元格的行索引
int rowIdx = i / columns;
CGFloat appX = marginX + colIdx * (appW + marginX);
CGFloat appY = marginTop + rowIdx * (appH + marginY);
appView.frame = CGRectMake(appX, appY, appW, appH);
// 3. 將appView加到self.view(控制器所管理的那個view)
[self.view addSubview:appView];
// 4. 向UIView中增加子控制元件
// 4.1 增加一個圖片框
UIImageView *imgViewIcon = [[UIImageView alloc] init];
// 設定背景色
//imgViewIcon.backgroundColor = [UIColor yellowColor];
// 設定frame
CGFloat iconW = 45;
CGFloat iconH = 45;
CGFloat iconX = (appView.frame.size.width - iconW) * 0.5;
CGFloat iconY = 0;
imgViewIcon.frame = CGRectMake(iconX, iconY, iconW, iconH);
// 把圖片框新增到appView中
[appView addSubview:imgViewIcon];
// 設定圖片框的資料
imgViewIcon.image = [UIImage imageNamed:appDict[@"icon"]];
// 4.2 增加一個Label(標籤)
// 建立Label
UILabel *lblName = [[UILabel alloc] init];
// 設定背景色
//lblName.backgroundColor = [UIColor redColor];
// 設定frame
CGFloat nameW = appView.frame.size.width;
CGFloat nameH = 20;
CGFloat nameY = iconH;
CGFloat nameX = 0;
lblName.frame = CGRectMake(nameX, nameY, nameW, nameH);
// 新增到appView中
[appView addSubview:lblName];
// 設定lable的資料(標題)
lblName.text = appDict[@"name"];
// 設定lable的文字的字型大小
lblName.font = [UIFont systemFontOfSize:12];
// 設定文字居中對齊
lblName.textAlignment = NSTextAlignmentCenter;
// 4.3 增加一個按鈕(UIButton)
UIButton *btnDownload = [[UIButton alloc] init];
// 設定背景色
//btnDownload.backgroundColor = [UIColor greenColor];
// 設定frame
CGFloat btnW = iconW;
CGFloat btnH = 20;
CGFloat btnX = iconX;
//CGFloat btnY = nameY + nameH;
CGFloat btnY = CGRectGetMaxY(lblName.frame);
btnDownload.frame = CGRectMake(btnX, btnY, btnW, btnH);
// 新增到appView中
[appView addSubview:btnDownload];
// 補充:控制元件的最大的Y值 = 控制元件的Y值 + 控制元件的高度
// 控制元件的最大的X值 = 控制元件的X值 + 控制元件的寬度
// 設定按鈕的資料
// 1. 設定按鈕上的文字
[btnDownload setTitle:@"下載" forState:UIControlStateNormal];
[btnDownload setTitle:@"已安裝" forState:UIControlStateDisabled];
// 2. 設定按鈕的背景圖
[btnDownload setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
[btnDownload setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];
// 3. 設定按鈕的文字的大小
btnDownload.titleLabel.font = [UIFont systemFontOfSize:14];
// 為按鈕註冊一個單擊事件
[btnDownload addTarget:self action:@selector(btnDownloadClick) forControlEvents:UIControlEventTouchUpInside];
}
}
// 按鈕的單擊事件
- (void)btnDownloadClick
{
NSLog(@"下載按鈕被點選了。。。。");
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end