UIScrolView-UIPageControl视图

UIScroView
常见属性：scrollEnabled:决定是否可以滚动
contentSize：内容的大小
showsHorizontalScrollIndicator：水平滚动条
showsVerticalScrollIndicator：垂直滚动条
pagingEnabled：自动滚动、控制是否分页翻动

常用方法：

- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;  ：设置滚动点

UIPageControl
常见属性：currentPage :当前页
pageIndicatorTintColor :没选中点颜色
currentPageIndicatorTintColor :选中点颜色

常用方法：

- (CGSize)sizeForNumberOfPages:(NSInteger)pageCount; ：设置点大小 

开始创建一个广告的滚动窗口

创建一个单视图项目.png

设置首页Label的位置

这是设置字体风格的位置(加粗).png

三个UIButton的位置适配

可以脱拽的图片图层放置

这是设置拖拽的起始值的位置.png

pageControl的设置

以上是Storyboard的方式来创建一个电商首页的视图

接下来是代码设置首页的滚动广告窗口

@interface ViewController ()
//设置属性
@property(nonatomic,strong)UIScrollView *scrollView;//滚动视图
@property(nonatomic,strong)UIPageControl *pageControl;//页码器
@end

接下来代码实现各个视图控件的创建
在此之前先定义一个屏幕宽度的宏

//屏幕宽度
#define SCREEN_W [UIScreen mainScreen].bounds.size.width 

- (void)viewDidLoad
{
    [super viewDidLoad];
    //创建并初始化滚动视图
    self.scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 104, SCREEN_W, 160)];
    //滚动视图的内容尺寸
    self.scrollView.contentSize=CGSizeMake(4*SCREEN_W, 0);
    //循环创建4张图片视图
    for (int i=0; i<4; i++)
    {
        UIImageView *imgV=[[UIImageView alloc]initWithFrame:CGRectMake(i*SCREEN_W, 0, SCREEN_W, self.scrollView.frame.size.height)];
        //创建图片名称
        NSString *imgName=[NSString stringWithFormat:@"%d.jpg",i+1];
        //把图片添加都视图中
        UIImage *img=[UIImage imageNamed:imgName];
        //添加图片
        imgV.image=img;
        //添加图片视图到滚动视图上
        [self.scrollView addSubview:imgV];
    }
    
    //把滚动视图添加到本页视图中
     [self.view addSubview:self.scrollView];
    //设置单页滚动
    self.scrollView.pagingEnabled=YES;
    //关闭滚动到顶端的属性
    self.scrollView.scrollsToTop=NO;
    //关闭反弹
    self.scrollView.bounces=NO;
    //关闭滚动
    self.scrollView.scrollEnabled=YES;
    //隐藏水平滚动条
//    self.scrollView.showsHorizontalScrollIndicator=NO;
    
    //设置水平滚动条风格
    self.scrollView.indicatorStyle=UIScrollViewIndicatorStyleWhite;
}

---

现在对上面代码进行精简重构,并添加另外一个页码器的UI构件

---

最开始拖4张图片到创建的项目中

首先先定义两个属性

@interface ViewController ()
//设置属性
@property(nonatomic,strong)UIScrollView *scrollView;//滚动视图
@property(nonatomic,strong)UIPageControl *pageControl;//页码器
@end

把UIScroView封装进方法中

/**
 *  创建滚动视图器
 */
-(void)createScrollView
{
    //创建并初始化滚动视图
    self.scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 104, SCREEN_W, 160)];
    //滚动视图的内容尺寸
    self.scrollView.contentSize=CGSizeMake(4*SCREEN_W, 0);
    //循环创建4张图片视图
    for (int i=0; i<4; i++)
    {
        UIImageView *imgV=[[UIImageView alloc]initWithFrame:CGRectMake(i*SCREEN_W, 0, SCREEN_W, self.scrollView.frame.size.height)];
        //创建图片名称
        NSString *imgName=[NSString stringWithFormat:@"%d.jpg",i+1];
        //把图片添加都视图中
        UIImage *img=[UIImage imageNamed:imgName];
        //添加图片
        imgV.image=img;
        //添加图片视图到滚动视图上
        [self.scrollView addSubview:imgV];
    }
    //把滚动视图添加到本页视图中
    [self.view addSubview:self.scrollView];
    //设置单页滚动
    self.scrollView.pagingEnabled=YES;
    //关闭滚动到顶端的属性
    self.scrollView.scrollsToTop=NO;
    //关闭反弹
    self.scrollView.bounces=NO;
    //关闭滚动
    self.scrollView.scrollEnabled=YES;
    //隐藏水平滚动条
    //    self.scrollView.showsHorizontalScrollIndicator=NO;
    //设置水平滚动条风格
    self.scrollView.indicatorStyle=UIScrollViewIndicatorStyleWhite;
}

接下来创建UIPageControl视图

/**
 *  创建页码器
 */
-(void)createPageControl
{
    //初始化
    self.pageControl =[[UIPageControl alloc]initWithFrame:CGRectMake(0, 224, SCREEN_W, 40)];
    //设置页码数
    self.pageControl.numberOfPages=4;
    //设置起始页
    self.pageControl.currentPage=0;
    //设置当前页颜色
    self.pageControl.currentPageIndicatorTintColor=[UIColor redColor];
    //设置其他点颜色
    self.pageControl.pageIndicatorTintColor=[UIColor blueColor];
    //添加到本页视图中
    [self.view addSubview:self.pageControl];
    
    //设置用户交互
    self.pageControl.userInteractionEnabled=NO;//no不使用用户交互
}

下一步,创建计时器,并在计时器中对分页的跳动方法进行设置

/**
 *  创建定时器
 */
-(void)changeImage:(NSTimer *)sender
{
    //获取当前滚动视图的当前页的页码   contentOffset可以获取滚动的x和y的数据
    int page=self.scrollView.contentOffset.x/SCREEN_W;//用中的x的值除去当前页面的宽度,得到当前的页码
    //设置滚动点到下一页     (page+1)滚动到下一页,就是页码加一,到下一页中去,%4是要去的循环的页码,都是1,2,3,4,1,2,3,4这样的数
    self.scrollView.contentOffset=CGPointMake((page+1)%4*SCREEN_W, 0);
    //页码器要跟着滚动视图滚动到下一页中 pageControl.currentPage为当前页的页码
    self.pageControl.currentPage=self.scrollView.contentOffset.x/SCREEN_W;//这个写法一样 (page+1)%4
}

最终在主程序中调用我们创建的视图

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //调用滚动视图方法
    [self createScrollView];
    
    //调用分页视图点
    [self createPageControl];
    
    //创建定时器
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(changeImage:) userInfo:nil repeats:YES];
}