功能需求
實現一個圖片瀏覽器，點擊左右按鈕可以切換背景圖，且更新背景圖對應的索引頁和圖片描述內容。
分析：
- 實現一個UIView的子類即可，該子類包含多個按鈕。
實現步驟：
-
使用OC語言，故創建cocoa Touch類型文件。Xcode會創建.h文件和.m文件：PicBrowserDemo類。
-
圖片資源導入：注意圖片不要重名
注意各項的類型：Root是Array，其余是Dictionary
-
實現該類。
該類帶有多個控件，令其繼承UIView。
a. 聲明類的成員變量：在.h文件中定義：，類型是strong。
該圖片瀏覽器需要兩個可顯示文字內容但不可修改的Label、兩個前后圖片切換的按鈕以及承載圖片的視圖。
在.h 文件中：
@interface PicBrowserDemo : UIView
@property(strong, nonatomic) UIImageView *imageView;
@property(strong, nonatomic) UILabel *label1;
@property(strong, nonatomic) UILabel *label2;
@property(strong, nonatomic) UIButton *btn1;
@property(strong, nonatomic) UIButton *btn2;
@end
b. 創建plist類型文件，直接在項目下創建，plist文件屬于resource類型文件，在該欄目下可找到。
選擇root類型為Array，而每個元素設置為字典，因為每個字典中存圖片的名稱和title（描述）。
c. .m 文件：
// 1 plist:信息填寫
// 2 初始化各個組件，顯示的信息以第一張為基準
// 3 nxt
// 4 pre
// 5 降低冗余，合并：pre、nxt函數#import "PicBrowserDemo.h"// 寫私有屬性：在這里
@interface PicBrowserDemo()
// assign、strong的區別： asign表示基本類型的變量
@property(nonatomic, strong) NSArray *pic;
@property(nonatomic, assign) int index;@end// 從plist中讀取到的各圖片信息集合@implementation PicBrowserDemo
-(instancetype) initWithFrame:(CGRect)frame{self = [super initWithFrame:frame];if(self){// 初始化5個組件_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(80, 230, 150, 150)];// 圖片模式：放入如何顯示的 按比例縮放，不會拉伸變形_imageView.contentMode = UIViewContentModeScaleAspectFit;// 初始化為pic中第一張圖片NSDictionary *dict = self.pic[0];_imageView.image = [UIImage imageNamed:dict[@"icon"]];// 固定值寫法：//_imageView.image = [UIImage imageNamed:@"i1.png"];// label1：_label1 = [[UILabel alloc] initWithFrame:CGRectMake(80, 190, 150, 40)];_label2 = [[UILabel alloc] initWithFrame:CGRectMake(80, 380, 150, 40)];// text填內容_label1.text = [NSString stringWithFormat:@"%d/%ld", 1, self.pic.count];// 下面的label填入title_label2.text = dict[@"title"];// 填充方式fill_label1.textAlignment = NSTextAlignmentCenter;_label2.textAlignment = NSTextAlignmentCenter;// btn1_btn1 = [[UIButton alloc] initWithFrame:CGRectMake(30, 300, 50, 50)];_btn2 = [[UIButton alloc] initWithFrame:CGRectMake(230, 300, 50, 50)];// btn1[_btn1 setBackgroundImage:[UIImage imageNamed:@"zuo1.jpg"] forState:UIControlStateNormal];// btn2[_btn2 setBackgroundImage:[UIImage imageNamed:@"you1.png"] forState:UIControlStateNormal];// 綁定點擊向前和向后[_btn1 addTarget:self action:@selector(changePages:) forControlEvents:UIControlEventTouchUpInside];//[_btn2 addTarget:self action:@selector(changePages:) forControlEvents:UIControlEventTouchUpInside];// [_btn1 addTarget:self action:@selector(pre) forControlEvents:UIControlEventTouchUpInside];
// //
// [_btn2 addTarget:self action:@selector(nxt) forControlEvents:UIControlEventTouchUpInside];
// // 用tags區分該切換前一張還是后一張_btn1.tag = 1;_btn2.tag = 2;[self addSubview: _imageView];[self addSubview: _btn1];[self addSubview: _btn2];[self addSubview: _label1];[self addSubview: _label2];}return self;
}// 重寫屬性pic的get方法懶加載：
/* 第一次調用一定為空，加載即可*/
- (NSArray *) pic{if(_pic == nil){// 獲取plist的文件路徑// nsBundle：獲取手機上軟件的安裝路徑，而非項目路徑NSString *path = [[NSBundle mainBundle] pathForResource:@"pics" ofType:@"plist"];// 讀取文件NSArray *array = [NSArray arrayWithContentsOfFile:path];NSLog(@"count:%ld", array.count);_pic = array;}return _pic;
}// 不需要參數：
- (void) changePages:(UIButton *)sender{switch (sender.tag) {case 1:_index--;break;case 2:_index++;break;}NSDictionary *dict = self.pic[self.index];// 上面的label填入頁碼_label1.text = [NSString stringWithFormat:@"%d/%ld", self.index+1, self.pic.count];// 下面的label填入title_label2.text = dict[@"title"];// 圖片框填入圖片：_imageView.image = [UIImage imageNamed:dict[@"icon"]];// 如果已經到了最后一張，則按鈕切換為不允許點// 索引為末尾-1，則設置下一張按鈕為不可點擊// 沒必要通過圖片來設置，通過yes、no設置即可達到所需的灰色狀態// 兩條必須同時設置：否則會出現 翻到底再返回時，向右按鈕仍然灰色self.btn2.enabled = !(_pic.count -1 == _index);self.btn1.enabled = !(0 == _index);
}// 加索引:
- (void) nxt{_index++;NSDictionary *dict = self.pic[self.index];// 上面的label：填入序號_label1.text = [NSString stringWithFormat:@"%d/%ld", self.index+1, self.pic.count];// 下面的label：填入標題_label2.text = dict[@"title"];// 圖片框填入圖片：_imageView.image = [UIImage imageNamed:dict[@"icon"]];// 如果已經到了最后一張，則按鈕切換為不允許點// 索引為末尾-1，則設置下一張按鈕為不可點擊// 沒必要通過圖片來設置，通過yes、no設置即可達到所需的灰色狀態self.btn2.enabled = !(_pic.count -1 == _index);self.btn1.enabled = !(0 == _index);
}//
- (void) pre{_index--;NSDictionary *dict = self.pic[self.index];// 上面的label：填入序號_label1.text = [NSString stringWithFormat:@"%d/%ld", self.index+1, self.pic.count];// 下面的label：填入標題_label2.text = dict[@"title"];// 圖片框填入圖片：_imageView.image = [UIImage imageNamed:dict[@"icon"]];// 如果為0，則設置向左不可點擊且更換圖片self.btn1.enabled = !(0 == _index);self.btn2.enabled = !(_pic.count -1 == _index);
}
@end調用入口：
- (void)viewDidLoad {[super viewDidLoad];//[self test_Common_arrtibute];[self testPicBrowser];
}-(void) testPicBrowser{PicBrowserDemo *browserView = [[PicBrowserDemo alloc] initWithFrame:CGRectMake(50, 80, 300 ,700)];//[browserView setBackgroundColor: [UIColor blueColor]];[self.view addSubview:browserView];}
- 效果展示
- 首頁只可向右
- 尾頁只可向左
要注意的問題以及犯錯
- 關于懶加載：
設置變量同名的函數，實則為setter，判斷變量指向為空，則做初始化獲取操作，后續再利用都不需要，此為懶加載方式。
- 關于plist加載：
使用bundle接口，, 通過plist文件名即可，該底層原理是使用了安裝APP后的文件結構來獲取文件，而非運行工程的目錄結構。
- plist總是讀取為空
我的plist獲取方式是讀取Array接口，而我的plist中root設置為dictionary類型，因此接口不對應，獲取錯誤了。改root為array類型即可。
- 初始化index報錯
switch中，tag為2是向右點擊，所以應該index++。
- 圖片瀏覽器初始化：
按pic第一張的圖片和title初始化即可。
