iOS入門-27圖片牆

概述

做一個圖片牆demo，分兩個頁面一個圖片聚合頁一個圖片展示頁。
涉及的知識點

• 屏幕尺寸獲取
• 導航欄高度獲取
• 控件尺寸，位置計算
• 視圖控制器之間傳值（注意三種傳值方式，代碼註釋的很清楚了）

示例

先看圖

示例代碼

關於如何配置UIWindow進行適配，參看iOS的UI-04-UIWindow
先看一下工程目錄結構

AppDelegate.h

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (retain,nonatomic) UIWindow* window;

@end

AppDelegate.m

#import "AppDelegate.h"
#import "VCRoot.h"

@interface AppDelegate ()
@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    
    VCRoot* vcR = [VCRoot new];
    
    UINavigationController* nvc = [[UINavigationController alloc] initWithRootViewController:vcR];
    
    self.window.rootViewController = nvc;
    
    [self.window makeKeyAndVisible];
    
    return YES;
}
@end

VCRoot.m

#import "VCRoot.h"
#import "VCImageShow.h"

@interface VCRoot ()

@end

@implementation VCRoot

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //導航欄不透明
    self.navigationController.navigationBar.translucent = NO;
    //視圖控制器title
    self.title = @"圖片牆";
    //初始化UIScrollView
    UIScrollView* sv = [UIScrollView new];
    //設置UIScrollView背景色爲白色
    sv.backgroundColor = [UIColor whiteColor];
    //豎向滾動條隱藏掉
    sv.showsVerticalScrollIndicator = NO;
    //橫向不滾動
    sv.alwaysBounceHorizontal = NO;
    //獲取屏幕寬，高參數
    UIScreen* screen = [UIScreen mainScreen];
    CGSize screenSize = screen.bounds.size;
    CGFloat sWidth = screenSize.width;
    CGFloat sHeight = screenSize.height;
    
    NSLog(@"width=%f;height=%f",sWidth,sHeight);
    //設置UIScrollView的視圖大小爲屏幕大小
    sv.frame = CGRectMake(0, 0, sWidth, sHeight);

    //計算每一張圖片的寬度（每一行有三張圖）
    CGFloat imageVWidth = (sWidth-40)/3;
    //計算每一張圖片的高度（視圖寬高比爲1:2）
    CGFloat imageVHeight = imageVWidth * 2;
    //設置UIScrollView的內容尺寸；（當導航欄不透明時，其下部的視圖會被擠壓下來）
    sv.contentSize = CGSizeMake(sWidth, (imageVHeight+10)*5+ [self getNavHeight]);
    //設置UIScrollView可以交互
    sv.userInteractionEnabled = YES;

    //創建圖片控件，並添加到UIScrollView中
    for (int i=0; i<15; i++) {
        //獲取圖片的名稱
        NSString* imgName = [NSString stringWithFormat:@"timg_%d.jpg",i+1];
        //初始化UIImage
        UIImage* image = [UIImage imageNamed:imgName];
        //初始化UIImageView
        UIImageView* iv = [[UIImageView alloc] initWithImage:image];
        //設置圖片的位置和大小（比較重要，涉及計算）
        iv.frame = CGRectMake(10+(i%3)*(imageVWidth+10), (i/3)*(imageVHeight+10), imageVWidth, imageVHeight);
        //將圖片控件添加到滾動控件中
        [sv addSubview:iv];
        
        //給每個圖片控件加個點擊事件
        //設置圖片控件可響應觸碰事件
        iv.userInteractionEnabled = YES;
        //初始化點擊事件接收器
        UITapGestureRecognizer* tapGS = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(selectImg:)];
        //設置點擊次數爲1次
        tapGS.numberOfTapsRequired = 1;
        //設置觸碰點爲1個
        tapGS.numberOfTouchesRequired = 1;
        //給圖片控件添加點擊事件監聽
        [iv addGestureRecognizer:tapGS];
        
        //給圖片控件設置tag（注意拼接方式）
        iv.tag = 101 + i;
    }

    [self.view addSubview:sv];
}

//第一種方式
//-(void) selectImg :(UITapGestureRecognizer*) tapGs{
//    NSLog(@"選中了一張圖片");
//
//    //點擊的圖片視圖對象
//    UIImageView* imgView = tapGs.view;
//    //創建顯示圖片的視圖控制器
//    VCImageShow* vcImgShow = [VCImageShow new];
//
//    //傳遞視圖對象（不可取）
//    vcImgShow.imgView = imgView;
//    //跳轉
//    [self.navigationController pushViewController:vcImgShow animated:YES];
//}


//第二種方式
//-(void) selectImg :(UITapGestureRecognizer*) tapGs{
//    NSLog(@"選中了一張圖片");
//
//    //點擊的圖片視圖對象
//    UIImageView* imgView = tapGs.view;
//    //創建顯示圖片的視圖控制器
//    VCImageShow* vcImgShow = [VCImageShow new];
//    //傳遞視圖內容對象（可取）
//    vcImgShow.image = imgView.image;
//    //跳轉
//    [self.navigationController pushViewController:vcImgShow animated:YES];
//}

//第三種方式
-(void) selectImg :(UITapGestureRecognizer*) tapGs{
    NSLog(@"選中了一張圖片");
    
    //點擊的圖片視圖對象
    UIImageView* imgView = tapGs.view;
    //創建顯示圖片的視圖控制器
    VCImageShow* vcImgShow = [VCImageShow new];
    //傳遞tag
    vcImgShow.imgTag = imgView.tag;
    //跳轉
    [self.navigationController pushViewController:vcImgShow animated:YES];
}

//獲取導航欄高度
-(CGFloat) getNavHeight{
    CGFloat h = self.navigationController.navigationBar.frame.size.height ;
    
    NSLog(@"navheight==%f",h);
    return h;
}

@end

VCImageShow.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface VCImageShow : UIViewController
//圖像視圖tag
@property (nonatomic,assign) NSUInteger imgTag;
//圖像視圖對象
@property (nonatomic,retain) UIImage* image;
//圖像視圖控件對象
@property (nonatomic,retain) UIImageView* imgView;

@end

NS_ASSUME_NONNULL_END

VCImageShow.m

#import "VCImageShow.h"

@interface VCImageShow ()

@end

@implementation VCImageShow

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.title = @"圖片展示";
    //獲取屏幕寬高尺寸
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    CGFloat height = [UIScreen mainScreen].bounds.size.height;
    
    //第一種方式（不可取）
//    //設置圖片視圖的大小爲屏幕大小（全屏）
//    _imgView.frame = CGRectMake(0, 0, width, height);
    
    //第二種方式（可取）
//    _imgView = [UIImageView new];
//    //設置圖片視圖的大小爲屏幕大小（全屏）
//    _imgView.frame = CGRectMake(0, 0, width, height);
//
//    //圖片控件實例添加圖片視圖對象
//    _imgView.image = _image;
    
    //第三種方式
    _imgView = [UIImageView new];
    //設置圖片視圖的大小爲屏幕大小（全屏）
    _imgView.frame = CGRectMake(0, 0, width, height);
    _imgView.image = [UIImage imageNamed:[NSString stringWithFormat:@"timg_%d.jpg",_imgTag-100]];
        
    //一個視圖對象只能有一個根視圖
    //當把視圖添加到新父視圖上之後舊的父視圖中就會刪除掉
    [self.view addSubview:_imgView];
}
@end