UIScrollView和UIPageControl
概要
对于同一个页面需要展示很多图片信息、子视图等的这样的需求,我们可以采用控件UIScrollVIew
,与之常常一起使用的控件是UIPageControl
,UIScrollVIew
里面可以存放多个子视图,通过设置页模式,以及子页面在UIScrollVIew
的content
位置,可以在滑动控件UIScrollVIew
的时候切换子视图。为了交互友好,常常和控件UIPageControl
一起使用,该控件是一组指示器,一般指示器个数对应于上述的子页面个数,通过改组指示器可以看到当前子页面的位置以及整个UIScrollVIew
的子视图情况。
结果展示
主要技术点
UIScrollVIew
是存放需要显示的界面的,UIPageControl
指示的是UIScrollVIew
的子视图信息,包括当前页、总页数要使得
UIScrollVIew
支持页模式需要将属性pagingEnabled
设为YES,这样滚动都是按页滚动的往
UIScrollVIew
添加页(子视图)的时候需要知道,因为该控件的分页和翻页是根据content区域构建的,所以每个页都有自己的页区域,而且这些也一般设为连续的,所以记得设置子页的frame
为content
的某区域,而且UIScrollVIew
的content
要刚好容纳子页。如果content
过大,导致子页翻完了,还能翻到空白区;小了,则部分视图不会显示了。一开始我通过重写方法
- (void) addSubview:(UIView *)view
添加子页的,不过发现UIScrollVIew
子页数不对,后来才发现有程序自动调用了该方法,导致子页数不对(好像多了两个子页)。所以后来修改方法为- (void) addSubview:(UIView *)view forCurrent:(BOOL)current
。-
为了能够手动设置控件
UIScrollVIew
显示的子页,需要使用方法scrollRectToVisible:animated:
,其中rect是指子页的位置,如CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height); /** 移到可视区 */
[self scrollRectToVisible:rect animated:animated]; -
为了更新控件
UIScrollVIew
和UIPageControl
,需要给他们分别设置代理和方法。给控件UIScrollVIew
设置代理,同时实现方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView
;给控件UIPageControl
添加方法- (void) onChangePage
,如:#pragma 实现协议UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSInteger page = scrollView.contentOffset.x / _pageView.pageSize.width; if(page != _pageController.currentPage)
{
_pageController.currentPage = page;
};
} - (void) onChangePage
{
[_pageView setCurrentPage:_pageController.currentPage animated:YES];
}
主要代码
自定义的UIScrollView
//
// PageView.m
// PageView 继承自 UIScrollView
//
// Created by arbboter on 14/12/24.
// Copyright (c) 2014年 arbboter. All rights reserved.
//
#import "PageView.h"
@interface PageView ()
@end
@implementation PageView
- (id) initWithFrame:(CGRect)frame
{
if(self=[super initWithFrame:frame])
{
/** 页模式 */
self.pagingEnabled = YES;
self.pageSize = frame.size;
}
return self;
}
/* 默认的addSubview:方法会被调用, 所以为了区分所需的添加照片,重载或者定义其他方法 */
- (void) addSubview:(UIView *)view forCurrent:(BOOL)current
{
NSInteger nPage = [self.subviews count];
/** 新添加的子页都对应content的某个区域 */
view.frame = CGRectMake(nPage*_pageSize.width, 0, _pageSize.width, _pageSize.height);
nPage++;
self.contentSize = CGSizeMake(nPage*_pageSize.width, _pageSize.height);
[super addSubview:view];
if(current)
{
[self setCurrentPage:nPage-1 animated:NO];
}
}
/** 设置页面page可见,需要把视图的content的对应部分移到可视区 */
- (void) setCurrentPage:(NSInteger)page animated:(BOOL)animated
{
if(page >= [self.subviews count])
{
return;
}
CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height);
/** 移到可视区 */
[self scrollRectToVisible:rect animated:animated];
}
@end
程序控制类
//
// ViewController.m
// PageView
//
// Created by arbboter on 14/12/24.
// Copyright (c) 2014年 arbboter. All rights reserved.
//
#import "ViewController.h"
#import "PageView.h"
@interface ViewController () <UIScrollViewDelegate>
@property (nonatomic, retain) PageView* pageView;
@property (nonatomic, retain) UIPageControl* pageController;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
CGRect frame = self.view.frame;
PageView* scrollView = [[PageView alloc] initWithFrame:frame];
self.pageView = scrollView;
/** 设置代理,使得视图滚动时更新其他控件 */
scrollView.delegate = self;
[self.view addSubview:scrollView];
[scrollView release];
frame.origin.y += frame.size.height*7/8;
frame.size.height = frame.size.height/8;
UIPageControl* pageCtrl = [[UIPageControl alloc] initWithFrame:frame];
self.pageController = pageCtrl;
/** 非当前页的指示器颜色 */
pageCtrl.pageIndicatorTintColor = [UIColor blueColor];
/** 当前页的指示器颜色 */
pageCtrl.currentPageIndicatorTintColor = [UIColor greenColor];
[self.view insertSubview:pageCtrl aboveSubview:self.pageView];
/** 页面指示器变化时,scroll更新 */
[pageCtrl addTarget:self action:@selector(onChangePage) forControlEvents:UIControlEventValueChanged];
[pageCtrl release];
/** 加载图片 */
int nImage = 8;
NSString* imageName = nil;
for (int i=0; i<nImage; i++)
{
imageName = [[NSString alloc] initWithFormat:@"%d.jpg", i+1];
UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.pageView.frame];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.image = [UIImage imageNamed:imageName];
imageView.backgroundColor = [UIColor colorWithRed:(arc4random()%30)/100 green:(arc4random()%30)/100 blue:(arc4random()%30)/100 alpha:1.0];
[self.pageView addSubview:imageView forCurrent:NO];
[imageView release];
[imageName release];
}
/** 设置页指示器总个数 */
self.pageController.numberOfPages = [self.pageView.subviews count];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma 实现协议UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSInteger page = scrollView.contentOffset.x / _pageView.pageSize.width;
if(page != _pageController.currentPage)
{
_pageController.currentPage = page;
};
}
- (void) onChangePage
{
[_pageView setCurrentPage:_pageController.currentPage animated:YES];
}
@end
项目工程
UIScrollView和UIPageControl学习使用的更多相关文章
-
UI:UIScrollView、UIPageControl
一.UIScrollView的常⽤用属性 二.UIScrollView的常⽤用代理方法 三.UIPageControl的使⽤用 四.UIPageControl与UIScrollView的结合使⽤用 U ...
-
使用UIScrollView和UIPageControl做一个能够用手势来切换图片的效果
利用UIScrollView的滚动效果来实现,先上图: 实现过程是:在viewController里先增加UIScrollView和UIPageControl: -(void) loadView { ...
-
iOS:UI系列之UIScrollview和UIPagecontrol
转眼间,又是一天,就这样忙忙碌碌的一天一天的过着, 不过还好,不是浑浑噩噩的,也算是小有所成,劳有所获吧,嘿嘿! 好了,到了总结的时间啦, 下面就为大家简单讲解下我今天学习的内容吧,希望对各位都有所帮 ...
-
iOS开发 首次启动显示用户引导,第二次启动直接进入App,UIScrollView,UIPageControl,NSUserDefaults
首先创建一个引导图的控制器类 UserGuideViewController.h和UserGuideViewController.m #import <UIKit/UIKit.h> #im ...
-
UIscrollView和UIPageControl的循环滚动
因为昨天在网上找了很久,很多只能实现向右滚动,而且一张图一个imageview ,感觉工作量很可怕啊 , 下面的例子就是不论你多少图 , 只和我代码里面的几个数值有关, 只需要修改分页和循环i的最 ...
-
iOS— UIScrollView和 UIPageControl之间的那些事
本代码主要实现在固定的位置滑动图片可以切换. 目录图如下: ViewController.h #import <UIKit/UIKit.h> // 通过宏定义定义宽和高 #define W ...
-
IOS 欢迎页(UIScrollView,UIPageControl)
本文介绍了app欢迎页的简单实现.只有第一次运行程序时才说会出现,其余时间不会出现.下面是效果图. 代码如下:(如有不明白的可以评论我,我会详细讲解) // // ViewController.m / ...
-
UIScrollView -2(UIScrollView 与 UIPageControl的使用): 分页查看图片
1.初始化UIScrollView 2.设置初始化出来的UIScrollView的contentSize: myscrollview.contentSize =CGSizeMake(CGRectGet ...
-
利用UIScrollView和UIPageControl实现多页图片欢迎页面
在.h文件当中实现UIScrollViewDelegate协议,让控制器充当代理: #import <UIKit/UIKit.h> @interface RPRootViewControl ...
随机推荐
-
js中用正则表达式 过滤特殊字符 ,校验所有输入域是否含有特殊符号
function stripscript(s) { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~ ...
-
sgu259 Printed PR 贪心
link:http://acm.sgu.ru/problem.php?contest=0&problem=259 思路就是贪心. 首先要读懂题目,输入的方式,把样例读懂. 第一,打印的总时间一 ...
-
Excel导入数据(97--2003版本)的ExcelHelper
首先确定excel的版本为97~2003版本 其次创建一个帮助类——ExcelHelper //单个sheet public static DataTable AnalysisExcel(string ...
-
WebService客户端添加SOAPHeader信息
通过JAXBContext创建Marshaller对头信息进行解析为dom,获取WSBindingProvider,使用Headers.creat()创建soap的Header元素: 另外就是:将us ...
-
写入Log错误日志
第一步创建ApplicationLog类 代码: using System;using System.Collections.Generic;using System.Linq;using Syste ...
-
SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页
SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页 **SpringBoot+Mybatis使用Pagehelper分页插件自动分页,非常好用,不用在自己去计算和组装了. ...
-
js中json对象数组按对象属性排序---1
转载:https://www.cnblogs.com/jasonwang2y60/p/6656103.html 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据js ...
-
leetcode — longest-common-prefix
/** * Source : https://oj.leetcode.com/problems/longest-common-prefix/ * * Created by lverpeng on 20 ...
-
jdbcTemplete(转)
文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供以下五类方法: execute方法:可以用于执行 ...
-
巧用CurrentThread.Name来统一标识日志记录(续)
▄︻┻┳═一Agenda: ▄︻┻┳═一巧用CurrentThread.Name来统一标识日志记录 ▄︻┻┳═一巧用CurrentThread.Name来统一标识日志记录(续) ▄︻┻┳═一巧用Cur ...