UIScrollView实现分页
1. 只要将UIScrollView的pageEnabled属性设置为YES,UIScrollView会被分割成多个独立页面,里面的内容就能进行分页展示
2. 一般会配合UIPageControl增强分页效果,UIPageControl常用属性如下:
一共有多少页
@property(nonatomic) NSInteger numberOfPages;
当前显示的页码
@property(nonatomic) NSInteger currentPage;
只有一页时,是否需要隐藏页码指示器
@property(nonatomic) BOOL hidesForSinglePage;
其他页码指示器的颜色
@property(nonatomic,retain) UIColor *pageIndicatorTintColor;
当前页码指示器的颜色
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;
3. 代码示例:
@interface ViewController ()
@end
@implementation ViewController
// 控制器中代码:
- (void)viewDidLoad {
[super viewDidLoad];
ZZFPageView *pageView = [ZZFPageView pageView];
pageView.frame = CGRectMake(37, 50, 250, 200);
pageView.imageNames = @[@"img_00", @"img_01", @"img_02"];
pageView.otherColor = [UIColor grayColor];
pageView.currentColor = [UIColor orangeColor];
pageView.currentColor = [UIColor blueColor];
[self.view addSubview:pageView];
pageView.imageNames = @[@"img_00", @"img_01", @"img_02", @"img_03", @"img_04"];
//pageView.imageNames = @[@"img_00"];
// pageView.frame = CGRectMake(0, 0, 100, 100); 这些代码测试LayoutsubViews方法什么时候调用
}
@end
//封装View
@interface ZZFPageView : UIView
+ (instancetype)pageView;
/** 图片名字 */
@property (nonatomic, strong) NSArray *imageNames;
/** 其他圆点颜色 */
@property (nonatomic, strong) UIColor *otherColor;
/** 当前圆点颜色 */
@property (nonatomic, strong) UIColor *currentColor;
@end
@interface XMGPageView() <UIScrollViewDelegate>
//xib中的控件 在xib中设置了scrollView的代理是封装的View 代理的对象是id类型,可以不是控制器
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@end
@implementation XMGPageView
+ (instancetype)pageView
{
return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
}
- (void)layoutSubviews
{
[super layoutSubviews];
// 设置scrollView的frame
self.scrollView.frame = self.bounds;
// 获得scrollview的尺寸
CGFloat scrollW = self.scrollView.frame.size.width;
CGFloat scrollH = self.scrollView.frame.size.height;
// 设置pageControl
CGFloat pageW = 100;
CGFloat pageH = 20;
CGFloat pageX = scrollW - pageW;
CGFloat pageY = scrollH - pageH;
self.pageControl.frame = CGRectMake(pageX, pageY, pageW, pageH);
// 设置内容大小
self.scrollView.contentSize = CGSizeMake(self.imageNames.count * scrollW, 0);
// 设置所有imageView的frame
for (int i = 0; i<self.scrollView.subviews.count; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
imageView.frame = CGRectMake(i * scrollW, 0, scrollW, scrollH);
}
}
#pragma mark - setter方法的重写
- (void)setImageNames:(NSArray *)imageNames
{
_imageNames = imageNames;
// 移除之前的所有imageView
// 让subviews数组中的所有对象都执行removeFromSuperview方法
[self.scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
// 根据图片名创建对应个数的imageView
for (int i = 0; i<imageNames.count; i++) {
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:imageNames[i]];
[self.scrollView addSubview:imageView];
}
// 设置总页数
self.pageControl.numberOfPages = imageNames.count;
// if (imageNames.count <= 1) {
// self.pageControl.hidden = YES;
// } else {
// self.pageControl.hidden = NO;
// }
// self.pageControl.hidden = imageNames.count <= 1;
// self.pageControl.hidesForSinglePage = YES;
}
- (void)setCurrentColor:(UIColor *)currentColor
{
_currentColor = currentColor;
self.pageControl.currentPageIndicatorTintColor = currentColor;
}
- (void)setOtherColor:(UIColor *)otherColor
{
_otherColor = otherColor;
self.pageControl.pageIndicatorTintColor = otherColor;
}
//代理方法可以在封装的view中
#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
self.pageControl.currentPage = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
}
@end
4. 补充
1. 注意:代理一般是控制器,因为他管理所有的控件,但是也可以不是 代理是没有限制的,封装的时候,代理很多都不是控制器
2. 只有set方法才能监听别人传过来的值【为什么set赋值就能重新赋值】
3. 封装:xib和纯代码是一样的, frame设置最好在LayoutsubViews方法中
4. set方法重新赋值是:注意刷新或者重新传值得时候就会创建,
5. 在layout中计算frame是原来的写法
6.重点:过期代码的设置【过期是不建议使用,不能把原来的代码删除了】
LayoutsubViews什么时候调用:利用runloop 收集frame的上所有的修改,runloop释放前调用。
封装view中:if shop.icon等于nil ; uisocrollView也可以重用吗
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
ZZFLabel *label = [[ZZFLabel alloc] init];
label.frame = CGRectMake(0, 100, 100, 20);
label.text = @"原价:998¥";
[self.view addSubview:label];
ZZFPageView *pageView = [ZZFPageView pageView];
pageView.frame = CGRectMake(37, 50, 250, 200);
pageView.imageNames = @[@"img_00", @"img_01", @"img_02"];
pageView.otherColor = [UIColor grayColor];
pageView.currentColor = [UIColor orangeColor];
[self.view addSubview:pageView];
self.pageView = pageView;
}
//1. 消息循环\运行循环
@end
// 框架:
// 1.苹果官方的框架:UIKit
// 2.自定义框架
// 3.第三方框架:流媒体
#import "XMGPageView.h"
@interface XMGPageView() <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@end
@implementation XMGPageView
/** 讲的顺序
* 1. 当控件通过代码创建时,就会调用这个方法
* 当控件通过代码创建时,想做一些初始化操作。应该在这个方法中执行
*/
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self setup];
// 添加子控件代码
}
return self;
}
/**
* 初始化代码
*/
- (void)setup
{
self.scrollView.backgroundColor = [UIColor redColor];
}
/**
* 2. 当控件是通过xib\storyboard创建时,会调用这个方法来初始化控件
注意;xib加载的不会去init,因为去init就会去initframe
*/
- (id)initWithCoder:(NSCoder *)aDecoder
{
if (self = [super initWithCoder:aDecoder]) {
}
//这个里面能监听到控件的加载,但是不是完整的加载,因为这个方法运行完,有的xib中的控件没有加载到,例如scrollView 他就没有加载 打印一下就知道了
return self;
}
/**
* 当控件从xib\storyboard中创建完毕时,就会调用这个方法
* 当控件从xib\storyboard中创建完毕后的初始化操作。应该在这个方法中执行
*/
- (void)awakeFromNib
{
//xib中的控件就已经加载完了,连线已经完成,就会调用这个方法
[self setup];
}
+ (instancetype)pageView
{
return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
}
/**
* 当控件的尺寸发生改变的时候,会自动调用这个方法
*/
- (void)layoutSubviews
{
[super layoutSubviews];
// 设置scrollView的frame
self.scrollView.frame = self.bounds;
// 获得scrollview的尺寸
CGFloat scrollW = self.scrollView.frame.size.width;
CGFloat scrollH = self.scrollView.frame.size.height;
// 设置pageControl
CGFloat pageW = 100;
CGFloat pageH = 20;
CGFloat pageX = scrollW - pageW;
CGFloat pageY = scrollH - pageH;
self.pageControl.frame = CGRectMake(pageX, pageY, pageW, pageH);
// 设置内容大小
self.scrollView.contentSize = CGSizeMake(self.imageNames.count * scrollW, 0);
// 设置所有imageView的frame
for (int i = 0; i<self.scrollView.subviews.count; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
imageView.frame = CGRectMake(i * scrollW, 0, scrollW, scrollH);
}
}
#pragma mark - setter方法的重写
- (void)setImageNames:(NSArray *)imageNames
{
_imageNames = imageNames;
// 移除之前的所有imageView
// 让subviews数组中的所有对象都执行removeFromSuperview方法
[self.scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
// 根据图片名创建对应个数的imageView
for (int i = 0; i<imageNames.count; i++) {
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:imageNames[i]];
[self.scrollView addSubview:imageView];
}
// 设置总页数
self.pageControl.numberOfPages = imageNames.count;
// if (imageNames.count <= 1) {
// self.pageControl.hidden = YES;
// } else {
// self.pageControl.hidden = NO;
// }
// self.pageControl.hidden = imageNames.count <= 1;
// self.pageControl.hidesForSinglePage = YES;
}
- (void)setCurrentColor:(UIColor *)currentColor
{
_currentColor = currentColor;
self.pageControl.currentPageIndicatorTintColor = currentColor;
}
- (void)setOtherColor:(UIColor *)otherColor
{
_otherColor = otherColor;
self.pageControl.pageIndicatorTintColor = otherColor;
}
#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
self.pageControl.currentPage = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
}
@end
#import <UIKit/UIKit.h>
@interface XMGPageView : UIView
+ (instancetype)pageView;
/** 图片名字 */
@property (nonatomic, strong) NSArray *imageNames;
/** 其他圆点颜色 */ 设置过期的代码
@property (nonatomic, strong) UIColor *otherColor NS_DEPRECATED_IOS(2_0, 2_0, "建议使用nbColor");
/** 当前圆点颜色 */
@property (nonatomic, strong) UIColor *currentColor;
@end
7. 封装的思想:既支持纯代码也支持xib的框架:
@interface ZZFLabel : UILabel
@end
@implementation ZZFLabel
// 1. 纯代码调用
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self setup];
}
return self;
}
// 2. 加载xib的时候调用 加载xib的时候如果不写这个方法,控件的属性不会被设置
- (void)awakeFromNib
{
[self setup];
}
- (void)setup
{
self.textColor = [UIColor redColor];
self.textAlignment = NSTextAlignmentCenter;
}
//绘画
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
[self.textColor set];
CGFloat w = rect.size.width;
CGFloat h = rect.size.height;
UIRectFill(CGRectMake(0, h * 0.3, w, 1));
}
@end
快捷方法
- 模拟器缩放: 按住option,单击就可以了
- 如果出现中文,后面的就不会提示了