iOS基于UIScrollView实现滑动引导页

上代码前,我们先来看下实现的效果图:

WelcomeViewController.h

#import <UIKit/UIKit.h> 

@interface WelcomeViewController : UIViewController 

@end

WelcomeViewController.m

#import "WelcomeViewController.h"
#define IMAGECOUNT 3 

@interface WelcomeViewController () <UIScrollViewDelegate>
@property (nonatomic, strong)UIPageControl *pageControl; 

@end 

@implementation WelcomeViewController 

- (void)viewDidLoad {
  [super viewDidLoad];
  //创建ScrollView
  UIScrollView *sv = [[UIScrollView alloc] init];
  sv.frame = self.view.bounds;
  //设置边缘不弹跳
  sv.bounces = NO;
  //整页滚动
  sv.pagingEnabled = YES;
  sv.showsHorizontalScrollIndicator = NO; 

  //加入多个子视图(ImageView)
  for(NSInteger i=0; i<IMAGECOUNT; i++){
    NSString *imgName = [NSString stringWithFormat:@"%ld", i+1];
    UIImage *image = [UIImage imageNamed:imgName];
    UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
    CGRect frame = CGRectZero;
    frame.origin.x = i * sv.frame.size.width;
    frame.size = sv.frame.size;
    imageView.frame = frame;
    [sv addSubview:imageView]; 

    if(i==IMAGECOUNT-1){
      //开启图片的用户点击功能
      imageView.userInteractionEnabled = YES;
      //加个按钮
      UIButton *button = [[UIButton alloc]init]; 

      button.frame = CGRectMake((imageView.frame.size.width-150)/2, imageView.frame.size.height*0.8, 150, 40);
      button.backgroundColor = [UIColor orangeColor];
      [button setTitle:@"立即体验" forState:UIControlStateNormal];
      button.titleLabel.font = [UIFont boldSystemFontOfSize:16];
      [imageView addSubview:button];
      [button addTarget:self action:@selector(enter) forControlEvents:UIControlEventTouchUpInside];    }
  } 

  sv.contentSize = CGSizeMake(IMAGECOUNT * sv.frame.size.width, sv.frame.size.height); 

  [self.view addSubview:sv]; 

  //加入页面指示控件PageControl
  UIPageControl *pageControl = [[UIPageControl alloc]init];
  self.pageControl = pageControl;
  //设置frame
  pageControl.frame = CGRectMake(0, self.view.frame.size.height - 40, self.view.frame.size.width, 20);
  //分页面的数量
  pageControl.numberOfPages = IMAGECOUNT;
  //设置小圆点渲染颜色
  pageControl.pageIndicatorTintColor = [UIColor whiteColor];
  //设置当前选中小圆点的渲染颜色
  pageControl.currentPageIndicatorTintColor = [UIColor redColor];
  //关闭用户点击交互
  pageControl.userInteractionEnabled = NO; 

  [self.view addSubview:pageControl]; 

  sv.delegate = self; 

}
- (void)enter
{
  NSLog(@"进入应用");
} 

//UIScrollViewDelegate方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  CGPoint offset = scrollView.contentOffset;
  if(offset.x<=0){
    offset.x = 0;
    scrollView.contentOffset = offset;
  }
  NSUInteger index = round(offset.x / scrollView.frame.size.width);
  self.pageControl.currentPage = index;
} 

- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
} 

@end 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS应用开发中UIScrollView滚动视图的基本用法总结

    在项目开发时遇到一个问题,我在UIViewController上面直接创建了一个UIScrollerView,把UIScrollerView作为一个子视图添加到了UIViewController, 又再UIScrollerView中添加了一个UISlider的组件,在手势滑动的过程中,很难滑动到UISlider这个控件,经常是滑动的时候UIScrollerView进行了滚动, 而UISlider这个控件没有滑动,让人很抓狂. 上网具体去了解了一下UIScrollerView的详解,终于彻底明白了

  • iOS利用UIScrollView实现无限滚动效果

    前言 众所周知UIScrollView 的无限滚动主要应用在图片轮播器.欢迎界面等场景.它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象.网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究. 实现步骤 1.根据需求准备几张图片,在网上找了5张图片,分别命名为 img

  • iOS开发中使用UIScrollView实现无限循环的图片浏览器

    一.概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件都介绍一遍确实没有必要,所谓授人以鱼不如授人以渔,这里会尽可能让大家明白其中的原理,找一些典型的控件进行说明,这样一来大家就可以触类旁通.今天我们主要来看一下UIScrollView的内容: UIView UIScrollView 实战--图片浏览器 二.UIView 在熟悉UIScrollView之前很有必要说一下UIView的内容.

  • iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

    我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

  • iOS自定义UIScrollView的滚动条实例代码

    UIScrollView有自己默认的滚动条,可设置隐藏和显示,但是有时候这个默认的滚动条没办法满足我们的需求,那这时候只能通过自定义来实现了. 实现自定义滚动条需要解决的主要问题是: 在scrollview滚动的过程中如何改变滚动条的位置,进而确保滚动条和scrollView在相同时间内走完自己的位移,只要把这个问题解决好了,那我们就可以优雅的自定义滚动条了. 那如何解决这个滚动条的当前滚动位移呢?我们知道,UIScrollView有一个滚动范围,滚动条也有一个滚动范围,也就是说两者的最大的滚动

  • 通过UIKit坐标系来全面掌握iOS中的UIScrollView组件

    感谢UIKit的坐标系统特性,使我们之花了30几行代码就能重现UIScrollView的精华,当然真正的UIScrollView要比我们所做的复杂的多,反弹效果,动量滚动,放大试图,还有代理方法,这些特性我们没有在这里涉及到. 首先,让我们先来了解一下UIKit中的坐标系是怎么工作的.如果你只对滚动试图的代码实现感兴趣可以放心跳过下一小节.UIKit坐标系每一个View都定义了他自己的坐标系统.如下图所示,x轴指向右方,y轴指向下方: 注意这个逻辑坐标系并不关注包含在其中View的宽度和高度.整

  • iOS应用开发中使用UIScrollView控件来实现图片缩放

    一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 2.UIScrollV

  • iOS开发中使用UIScrollView实现图片轮播和点击加载

    UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 复制代码 代码如下: #import "YYViewController.h" @interface YYViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; /**  *  页码  */ @pro

  • iOS开发之UIScrollView详解

    介绍:UIScrollView用于在一个小范围里显示很大的内容的控件.通过用户平滑.手捏手势,在这个小区域里查看不同内容.是UITableView和UITextView的父类.它是视图,但是比较特殊,可以看成把它看成2层的结构.上面是它的frame层,跟一般试图一样,是它的可见区域,下面层是contentView,可以滑动. 父类UIView方法 复制代码 代码如下: // autoresizingMask - 现在基本弃用,改用autoLayout typedef NS_OPTIONS(NSU

  • iOS开发之UIScrollView控件详解

    一.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 二.UIScrollView的简单使用 (

随机推荐