【源代码】在iOS中实现Smartisan OS中首页的PageControll效果

昨晚开始,看到Smartisan OS中的首页PageControl,突发奇想,能不能自己在iOS中也实现这种很赞的效果,于是今天连忙写了出来,怀着激动的心情特此分享。

惯例,先上例子:

iOS首页的PageControl ————

Smartisan OS首页的PageControl ————

可以看到,Smartisan OS中的PageControl小点会跟着页面的移动跟着移动,而iOS中则是当滑到下一页的时候硬生生地跳到下一个空白圆点。不可否认,这一点确实是Smartisan OS中的效果做的好。那么我们有办法实现吗?答案是肯定的。下面介绍。

1.创建图层

为了便于复用,我们需要创建一个继承与UIView的类 PageControlView:UIView。定义一个初始化方法:

-(id)initWithOrigin:(CGPoint)pageOrigin PageNumber:(int)pageNumber;

实现:

#define PageHeight 10
#define PageWidth  10

-(id)initWithOrigin:(CGPoint)pageOrigin PageNumber:(int)pageNumber{
    self = [super init];
    if (self) {
        self.frame = CGRectMake(pageOrigin.x, pageOrigin.y, (PageWidth+20)*pageNumber, (PageHeight+20)); //1
        for (int i = 0; i<pageNumber; i++) {
            UIImageView *page = [[UIImageView alloc]initWithFrame:CGRectMake(20+i*PageWidth+i*5, (self.height - PageWidth)/2 + 5, PageWidth, PageHeight)];
            page.backgroundColor = [UIColor whiteColor];
            [self addSubview:page];
        } //2

    }
    self.backgroundColor = [UIColor clearColor];

    pageIndicator = [[UIView alloc]initWithFrame:CGRectMake(20,(self.height - PageWidth)/2 +5, PageWidth, PageHeight)];
    pageIndicator.backgroundColor = [UIColor redColor];
    [self addSubview:pageIndicator];//3
    return self;
}

pageNumber 是页数,需要在在初始化的时候传入。另一个参数是 pageOrigin,我们这个自定义控件的x\y坐标,为什么不用frame呢?因为大小我们需要根据页数算出来的。

//1,创建底下一个透明的view,也就是这个类 PageControlView本身。x/y坐标分别是传入参数的x/y,宽度是(小方点宽度+左右间隙)x 页数,这样就是底下那个view的宽度了,高度是(小方点高度+上下间隙)。

//2 在1中创建的视图上添加pageNumber个小方点,用循环添加。

//3 最上方添加当前页面的指示小方点

2.添加移动效果

这个核心我们用到的是UIScrollView的这个代理方法:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

这个代理方法的调用条件是:只要检测到某个ScrollView在滚动了就会不断实时调用,这正好能帮助我们去实时改变小方点的y坐标,达到跟手滑动的效果。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    double distance = self.ImageScrollView.contentOffset.x/ScreenWidth; //1

    if ([pageControlView respondsToSelector:@selector(moveThePage:)]) {
        [pageControlView moveThePage:distance];
    }//2
}

//1 获取图片视图/屏幕宽度的百分比 //2 如果pageControllView 有moveThePage: 这个方法,就把这个百分比distance传过去。

实现实时移动;

-(void)moveThePage:(double)distance{
    pageIndicator.frame = CGRectMake(20+distance*(PageWidth+5),(self.height - PageWidth)/2 +5  , PageWidth, PageHeight);
}

如此,其实已经完成了,为了更让程序更好一点,我们让图片实现自动轮播,实现起来也很简单。一个定时器,一个方法用来控制图片的滚动:

定时器 ——

[NSTimer scheduledTimerWithTimeInterval:5 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];

自动轮播 ——

-(void)nextImage{
    [UIView animateWithDuration:0.5 animations:^{
        if (self.ImageScrollView.contentOffset.x == ScreenWidth*2) {
            self.ImageScrollView.contentOffset = CGPointMake(0,0);
        }else if(self.ImageScrollView.contentOffset.x == ScreenWidth *1 ){
            self.ImageScrollView.contentOffset = CGPointMake(ScreenWidth*2,0);
        }else if(self.ImageScrollView.contentOffset.x == 0){
            self.ImageScrollView.contentOffset = CGPointMake(ScreenWidth,0);
        }
    }];
}

--

最后效果像这样:

你可以到这里下载源代码。


转载请注明出处,万分感谢!

上一篇

这将是你最后一次纠结position与anchorPoint!


下一篇

快速用Storyboard创建一个UICollectionView