iOS開發：純程式碼實現圖片瀏覽器

1

效果展示

2

#import "CKViewController.h"

#define imageX 70

#define imageY 76

#define imageW 180

#define imageH 180

#define IconKey @"icon"

#define DescKey @"desc"

@interface CKViewController ()

 // 當前圖片的索引

@property (nonatomic, assign) int index;

 // 圖片資料集合

@property (nonatomic, strong) NSArray *imageData;

 // 用於顯示索引的UILabel

@property (nonatomic, weak) UILabel *upLabel;

 // 用於顯示圖片描述資訊的UILabel

@property (nonatomic, weak) UILabel *descLabel;

 // 用於顯示中間圖片的UIImageView

@property (nonatomic, weak) UIImageView *image;

 // 點選上一張的按鈕

@property (nonatomic, weak) UIButton *previousBtn;

 // 點選下一張的按鈕

@property (nonatomic, weak) UIButton *nextBtn;

// 點選上一張按鈕需要響應的事件

- (void)previous;

// 點選下一張按鈕需要響應的事件

- (void)next;

 // 點選上一張或下一張按鈕時進行相應的操作

- (void)changeData;

@end

@implementation CKViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    /**

     *  建立顯示圖片標籤的label

     */

    UILabel *upLabel = [[UILabel alloc] init];

    // 把初始化的upLabel賦值給self的_upLabel

    self.upLabel = upLabel;

    [self.view addSubview:upLabel];

    upLabel.frame = CGRectMake(78, 36, 165, 20);

    // 讓文字居中

    upLabel.textAlignment = NSTextAlignmentCenter;

    /**

     *  建立顯示圖片的imageview

     */

    UIImageView *image = [[UIImageView alloc] init];

    // 把初始化的image賦值給self的_image

    self.image = image;

    [self.view addSubview:image];

    image.frame = CGRectMake(imageX, imageY, imageW, imageW);

    /**

     *  顯示詳細描述的文字標籤

     */

    UILabel *descLabel = [[UILabel alloc] init];

    // 把初始化的descLabel賦值給self的_descLabel

    self.descLabel = descLabel;

    [self.view addSubview:descLabel];

    descLabel.frame = CGRectMake(24, 270, 275, 90);

    descLabel.textAlignment = NSTextAlignmentCenter;

    /**

     *  上一張按鈕

     */

    UIButton *previousBtn = [[UIButton alloc] init];

    // 把初始化的previousBtn賦值給self的_previousBtn

    self.previousBtn = previousBtn;

    [self.view addSubview:previousBtn];

    previousBtn.frame = CGRectMake(9, 148, 35, 35);

     // 按鈕普通狀態下的圖片

    UIImage *preNormal = [UIImage imageNamed:@"left_normal"];

     // 按鈕高亮狀態下的圖片

    UIImage *preHigh = [UIImage imageNamed:@"left_highlighted"];

     // 按鈕失效狀態下的圖片

    UIImage *preDisa = [UIImage imageNamed:@"left_disable"];

    [previousBtn setBackgroundImage:preNormal forState:UIControlStateNormal];

    [previousBtn setBackgroundImage:preHigh forState:UIControlStateHighlighted];

    [previousBtn setBackgroundImage:preDisa forState:UIControlStateDisabled];

    // 監聽按鈕點選事件

    [previousBtn addTarget:self action:@selector(previous) forControlEvents:UIControlEventTouchUpInside];

    /**

     *  下一張按鈕

     */

    UIButton *nextBtn = [[UIButton alloc] init];

    // 把初始化的nextBtn賦值給self的_nextBtn

    self.nextBtn = nextBtn;

    [self.view addSubview:nextBtn];

    nextBtn.frame = CGRectMake(272, 148, 35, 35);

    UIImage *nextNormal = [UIImage imageNamed:@"right_normal"];

    UIImage *nextHigh = [UIImage imageNamed:@"right_highlighted"];

    UIImage *nextDisa = [UIImage imageNamed:@"right_disable"];

    [nextBtn setBackgroundImage:nextNormal forState:UIControlStateNormal];

    [nextBtn setBackgroundImage:nextHigh forState:UIControlStateHighlighted];

    [nextBtn setBackgroundImage:nextDisa forState:UIControlStateDisabled];

    // 監聽按鈕點選事件

    [nextBtn addTarget:self action:@selector(next) forControlEvents:UIControlEventTouchUpInside];

    // 初始化的時候讓圖片預設顯示第一張

    [self changeData];

}

#pragma mark 儲存字典的陣列

- (NSArray *)imageData

{

    // 判斷之前有沒有初始化

    if (_imageData == nil) {

        // 初始化資料

        NSMutableDictionary *image1 = [NSMutableDictionary dictionary];

        image1[IconKey] = @"one";

        image1[DescKey] = @"第1張圖片";

        NSMutableDictionary *image2 = [NSMutableDictionary dictionary];

        image2[IconKey] = @"two";

        image2[DescKey] = @"第2張圖片";

        NSMutableDictionary *image3 = [NSMutableDictionary dictionary];

        image3[IconKey] = @"three";

        image3[DescKey] = @"第3張圖片";

        NSMutableDictionary *image4 = [NSMutableDictionary dictionary];

        image4[IconKey] = @"four";

        image4[DescKey] = @"第4張圖片";

        NSMutableDictionary *image5 = [NSMutableDictionary dictionary];

        image5[IconKey] = @"five";

        image5[DescKey] = @"第5張圖片";

        _imageData = @[image1, image2, image3, image4, image5];

    }

    return _imageData;

}

#pragma mark 改變資料

- (void)changeData

{

    // 1.改變資料

    self.upLabel.text = [NSString stringWithFormat:@"%d/%d",self.index + 1, self.imageData.count];

    // 2.改變index對應的字典資料

    NSDictionary *imageDict = self.imageData[self.index];

    // 3.設定圖片

    self.image.image = [UIImage imageNamed:imageDict[IconKey]];

    // 4.設定描述

    self.descLabel.text = imageDict[DescKey];

    // 改變按鈕狀態

    self.previousBtn.enabled = (self.index != 0);

    self.nextBtn.enabled = (self.index != 4);

}

//點選上一張按鈕

- (void)previous{

    self.index--;

    [self changeData];

}

//點選下一張按鈕

- (void)next{

    self.index++;

    [self changeData];

}

@end

3

應用目錄結構