轻松搭建新特性界面、向导页(自适应各种屏幕尺寸)

Leave a reply

1、应用场景

新软件安装在第一次打开时都会有该软件或版本的介绍，在iOS中最经典的做法是搭建一个ScrollView分页展示
但考虑到iPhone4系统与iPhone5系统，屏幕适配如何更为科学简单是一门学问，以下提供一个参考

2、图片命名

一般是三图片，Retina屏之前屏幕一套、iPhone4(4S)一套、iPhone5(5C/5S)一套

1
2
3

  xxx_序号.png         // iPhone3GS及以前，可忽略
  xxx_序号@2x.png      // iPhone4及iPhone4S
  xxx_序号-568h@2x.png // iPhone5及iPhone5C、iPhone5S

如：

1
2
3
4
5
6
7
8
9

  new_feature_1.png
  new_feature_1@2x.png
  new_feature_1-568h@2x.png
  new_feature_2.png
  new_feature_2@2x.png
  new_feature_2-568h@2x.png
  new_feature_3.png
  new_feature_3@2x.png 
  new_feature_3-568h@2x.png

3、文件名自动识别

3.1、增加两个Category
NSString+SA

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

//
//  NSString+SA.m
//  SianWeibo
//
//  Created by yusian on 14-4-12.
//  Copyright (c) 2014年 小龙虾论坛. All rights reserved.
//  自定义字符串拼接方法
 
#import "NSString+SA.h"
 
@implementation NSString (SA)
 
- (NSString *)fileAppend:(NSString *)string
{
    // 1、获取文件扩展名
    NSString *ext = [self pathExtension];
 
    // 2、去掉文件扩展名
    NSString *str = [self stringByDeletingPathExtension];
 
    // 3、拼接新加字符串
    str = [str stringByAppendingString:string];
 
    // 4、拼接扩展名
    str = [str stringByAppendingPathExtension:ext];
 
    return str;
 
}
 
@end

UIImage+SA

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

//
//  UIImage+SA.m
//  SianWeibo
//
//  Created by yusian on 14-4-11.
//  Copyright (c) 2014年 小龙虾论坛. All rights reserved.
//  
 
// 判断是否为iphone5的宏
#define isIPhone5 ([UIScreen mainScreen].bounds.size.height == 568)
#import "UIImage+SA.h"
#import "NSString+SA.h"
 
@implementation UIImage (SA)
 
+ (UIImage *)fullScreenImage:(NSString *)string
{
    // 根据屏幕高度判断iphone5
    if (isIPhone5) {
 
        string = [string fileAppend:@"-568h@2x"];
 
    }
    return [self imageNamed:string];
}
 
// 自动拉伸图片
+ (UIImage *)resizeImage:(NSString *)imageName
{
    UIImage *image = [UIImage imageNamed:imageName];
    return [image stretchableImageWithLeftCapWidth:5 topCapHeight:5];
}
 
@end

4、创建ScrollView（关键代码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#pragma mark 2.1、添加scrollView控件
- (UIScrollView *)creatScrollView       // 控件的创建单独抽象成方法
{
    // 创建scrollView设置尺寸位置及相关属性
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.frame = self.view.bounds;
    scrollView.contentSize = CGSizeMake(_size.width * kPicCount, 0);
    scrollView.pagingEnabled = YES;
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.delegate = self;
 
    //  创建新特性图片设置尺寸位置并添加到scrollView
    for (int i = 0; i < kPicCount; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        [scrollView addSubview:imageView];
        NSString *imageName = [NSString stringWithFormat:@"new_feature_%d.png", i + 1];
        imageView.image = [UIImage fullScreenImage:imageName];
        imageView.frame = CGRectMake(_size.width * i, 0, _size.width, _size.height);
    }
    return scrollView;
}

Leave a Reply