第一个完整的iOS小demo:引导

摘要:
我断断续续地熟悉一些常用控件的动态创建方法,即使用纯代码来创建,而不使用InterfaceBuilder来拖放控件,我也已经逐一实现了它们。1-viewDidLoad{2[superviewDidLoad];3//加载视图后加载其他附加设置。45[selfinitScrollView];67//处理低分辨率图像的大小,并滚动视图8CGFhatlight=?320:ScreenWidth;1011//展开图像并将其添加到{1314UIImageView*guideImage=[UUIImageViewalloc]initWithFrame:CGRectMake]的滚动视图12;15NSString*img=[[NSStringalloc]init WithFormat:@“指南_%d”,i+1];16guideImage.image=[UIImageimageNamed:img];1718/如果未指定,其上的按钮无法响应事件19guideImage。userInteractionEnabled=是;2021[self.srollViewaddSubview:guideImage];222324/如果{26UIButton*btn=[UIButtonButtonWithType:UIButtonTypeCustom];2728NSIntegertnWidth=100;29CGFloatpaddingLeft=/2;30CGFloappaddingTop=?

断断续续地熟悉了一些常用的控件的动态创建方式,也就是用纯代码创建,不用Interface Builder来拖放控件,也动手一一去实现了。基础的东西熟悉之后还是觉得很迷惘,不知道可以做些啥,领导建议让我直接查看公司现有的App源码,让我把那个引导功能给仿出来~

有了目标,接下来就要分析怎么去实现了,不用第三方库,最简单的大概就是用UIScrollView来实现了,主要有这么几点:

  1. 4个页
  2. 每页上面都有一张大图
  3. 每页上面都有显示当前页的标识(页码)
  4. 最后一页应该有个跳过的按钮

先放上成品图,然后再放出下面的实现步骤。

第一个完整的iOS小demo:引导第1张

 

首先,声明必要的一些属性,连着委托也一并加上了

@interface GuideViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;

@property (nonatomic, strong) NSArray *images;

@property (nonatomic, strong) UIPageControl *pageControl;

@end

定义一个总页数的常量

// 定义总页数
static const NSInteger pages = 4;

定义屏幕的尺寸常量

#define ScreenHeight [[UIScreen mainScreen] bounds].size.height
#define ScreenWidth [[UIScreen mainScreen] bounds].size.width

创建一个UIScrollView,并将它添加到view中,这里需要注意的是UIScrollView的一些属性,下面代码中都有注释加以说明

// 初始化scrollview
- (void)initScrollView
{
    // scrollview的大小应该与屏幕大小相等
    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
    
    // scrollview的宽度应该是4p大
    self.scrollView.contentSize = CGSizeMake(ScreenWidth * pages, ScreenHeight);
    
    // 横向滚动
    self.scrollView.alwaysBounceHorizontal = YES;
    
    // 打开分页模式
    self.scrollView.pagingEnabled = YES;
    
    // 隐藏滚动条
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
    self.scrollView.delegate = self;
    
    [self.view addSubview:self.scrollView];
}

接下来就要在UIScrollView的每一页中填入内容,其实也就是一堆图片和按钮,还有用于显示页码的UIPageControl,动态创建UIImageView、UIButton、UIPageControl我觉得都还OK了,相对容易,问题出在给UIButton绑定点击事件这儿,写好的点击事件方法根本没响应,千万别忘记设置图片的“userInteractionEnabled”属性。

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     // Do any additional setup after loading the view.
 4     
 5     [self initScrollView];
 6     
 7     // 处理低分辨率下的图片与scrollview的尺寸
 8     CGFloat height = (ScreenHeight == 480) ? 568 : ScreenHeight;
 9     CGFloat width = (ScreenHeight == 480) ? 320 : ScreenWidth;
10     
11     // 铺开图片并添加到scrollview上
12     for (int i = 0; i < pages; i++) {
13 
14         UIImageView *guideImage = [[UIImageView alloc] initWithFrame:CGRectMake(width * i, 0, width, height)];
15         NSString *img = [[NSString alloc] initWithFormat:@"guide_%d", i+1];
16         guideImage.image = [UIImage imageNamed:img];
17         
18         // 如果不指定,在它上面的按钮响应不了事件
19         guideImage.userInteractionEnabled = YES;
20         
21         [self.scrollView addSubview:guideImage];
22         
23         
24         // 在最后一页上创建“进入”按钮
25         if (i == pages - 1) {
26             UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
27             
28             NSInteger btnWidth = 100;
29             CGFloat paddingLeft = (ScreenWidth - 100) / 2;
30             CGFloat paddingTop = (ScreenHeight > 480) ? (ScreenHeight - 90) : ScreenHeight;
31             btn.frame = CGRectMake(paddingLeft, paddingTop, btnWidth, 36);
32             btn.backgroundColor = [UIColor orangeColor];
33             btn.layer.cornerRadius = 18.0;
34             [btn addTarget:self action:@selector(onButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
35             [btn setTitle:@"立即体验" forState:UIControlStateNormal];
36             btn.layer.borderColor = [UIColor whiteColor].CGColor;
37             btn.layer.borderWidth = 2.0;
38             
39             [guideImage addSubview:btn];
40         }
41         
42 
43         if (ScreenHeight == 480 && i == 0) {
44             NSLog(@"为了让第一张图上面的文字与后面图片上的文字在同一水平线上对齐,y轴需要向上移动20点 %d", i);
45             guideImage.frame = CGRectMake(0, 20, width, height);
46         }
47     }
48     
49     // 将就图片,4、4s低分辨率向下移动scrollview的位置,尽量让图片内容显示完整
50     if (ScreenHeight == 480) {
51         self.scrollView.frame = CGRectMake(0, -64, width, height);
52     }
53     
54     
55     // 绘制分页标识
56     CGFloat pointPaddingTop = ScreenHeight > 480 ? ScreenHeight - 50 : ScreenHeight - 35;
57     self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, pointPaddingTop, ScreenWidth, 40)];
58     self.pageControl.numberOfPages = pages;
59     [self.pageControl addTarget: self action: @selector(pageControlClicked:) forControlEvents: UIControlEventValueChanged];
60     [self.view addSubview:self.pageControl];
61 }

最后再实现一下按钮和PageControl的点击响应方法、UIScrollView的委托方法scrollViewDidEndDecelerating。

 1 - (void)onButtonClicked:(UIButton *)sender{
 2     UIAlertView *msg = [[UIAlertView alloc] initWithTitle:nil message:@"引导页完成" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
 3     [msg show];
 4     NSLog(@"done.");
 5 }
 6 
 7 // 响应分页点击
 8 - (void)pageControlClicked:(UIPageControl *)thePageControl
 9 {
10     [_scrollView setContentOffset:CGPointMake(ScreenWidth*thePageControl.currentPage, _scrollView.contentOffset.y) animated:YES];
11 }
12 
13 #pragma mark - UIScrollViewDelegate
14 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
15 {
16     NSInteger page = scrollView.contentOffset.x / ScreenWidth;
17     self.pageControl.currentPage = page;
18 }

放上源码 :guide.zip

免责声明:文章转载自《第一个完整的iOS小demo:引导》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇《StackGAN》View绘制机制下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

IOS开发之内存管理--dealloc该写些什么

一句话:dealloc 就是释放当前类所持有的对象即可。不是当前类持有的对象,就不要去释放了。但是当前类持有的对象,一定要释放。 推荐以下视频,虽然简单,但是基本原理讲清楚了。 http://code4app.com/course/24-2904-3022 在非ARC开发环境中,dealloc是类释放前,清理内存的最后机会。到底那些变量和属性该释放呢,一些...

IOS UI-滚动视图(UIScrollView)

1 #import "ViewController.h" 2 /* 3 1.UIScrollView控件是什么? 4 (1)移动设备的屏幕⼤小是极其有限的,因此直接展示在⽤用户眼前的内容也相当有限 5 (2)当展⽰的内容较多,超出一个屏幕时,⽤用户可通过滚动手势来查看屏幕以外的内容 6 (3)普通的UIView不具备滚动功能,不能显示过多的内容...

网络文件下载(提供多种下载方式)

(1)使用 NSURLConnection 直接方式 (2)使用 NSURLConnection 代理方式 (3)使用 NSURLSession 直接方式 (4)使用 NSURLSession 代理方式 (5)使用 AFNetworking 方式 附加功能: (1)使用 AFNetworking 中的 AFNetworkReachabilityManage...

UIScrollView浏览一组图片,且图片与图片之间有间隔

---恢复内容开始--- UIScrollView是可以浏览一组view的,只要将其属性 pagingEnabled设置为true就可以了。具体过程是这样的, 1:将一组图片按照从左到右的顺序添加到UIScrollView里边, 2:pagingEnabled设置为true 只需要两步即可,非常方便 但是你会发现这些图片是一张接一张,是这种效果: 我们发...

iOS UIScrollview代理方法

方法&&属性:// 监控目前滚动的位置(默认CGPointZero) CGPoint contentOffset; - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; // 滚动范围的大小(默认CGSi...

iOS开发UI篇—屏幕适配autoResizing autoLayout和sizeClass图文详解

1. autoResizing autoresizing是苹果早期的ui布局适配的解决办法,iOS6之前完全可以胜任了,因为苹果手机只有3.5寸的屏幕,在加上手机app很少支持横屏,所以iOS开发者基本不用怎么适配布局,所有的ui控件只要相对父控件布局就可以了,没错autoResizing就是一个相对于父控件的布局解决方法;注意:它只能相对父控件布局;**...