9.0 UIScrollView+UIPageControl实现新特性的实现

需求:

1. 启动程序后,有个介绍app新特性的界面

思路:

1. 新特性界面,其实就多个图片组合在一起,展示出来而已!
2. 使用UIScrollView,实现滚动动画
3. 新特性视图,有个分页功能,方便直观的展现用户内容!(UIPageControl)
4. UIPageControl和UIScrollView实现联动!(遵循代理,成为代理类,实现滑动改变分页控件方法)
5. 在最后一页,显示"进入微博"按钮,注意它是背景图片按钮!currentBackgroundImage(当前按钮的背景图片) setBackgroundImage (设置背景图片)

#import "WBNewFeatureViewController.h"
#import "UIButton+Extension.h"

@interface WBNewFeatureViewController ()<UIScrollViewDelegate>
@property (nonatomic,weak)UIPageControl *pageControl;
@end

@implementation WBNewFeatureViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    //创建scrollView
    UIScrollView *scrollView  = [[UIScrollView alloc]initWithFrame: self.view.bounds];
    
    //开启分页
    scrollView.pagingEnabled = YES;
    //去除水平方向滚动条
    scrollView.showsHorizontalScrollIndicator = NO;
    
    //监听滑动-->成为代理
    scrollView.delegate = self;
    
    //动画图片个数
    NSInteger count= 4;
    
    for (int i=0; i<count; i++) {
        
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"new_feature_%d",i+1]];
        
        UIImageView *imgView = [[UIImageView alloc]initWithImage:img];
        //设置imageView的大小
        imgView.size = scrollView.size;
        imgView.x = i*scrollView.width;
        [scrollView addSubview:imgView];
        
        if (i == count-1) {
            //最后一页
            [self setupLastPageWithView:imgView];
        }
        
    }
    //设置scrollView的内容大小
    [scrollView setContentSize:CGSizeMake(count * scrollView.width, 0)];
    [self.view addSubview:scrollView];
    
    
    /*
     添加分页控件
     1. 创建分页控件
        1. 分页控件的位置
        2. 分页控件选中与默认颜色(如没有,则显示为白色)
     2. 分页控件和UIScrollView关联
        1. 遵循代理
        2. 设置当前为代理类(滑动时,分页控件改变)
        3. 实现代理方法(滑动时,改变分页控件)
     */
    
    UIPageControl * pageControl = [[UIPageControl alloc]init];
    //设置显示几页
    pageControl.numberOfPages = count;
    //设置选中的颜色与默认的颜色
    pageControl.pageIndicatorTintColor = [UIColor grayColor];
    pageControl.currentPageIndicatorTintColor = [UIColor orangeColor];
    
    
    //设置位置
    pageControl.centerX = self.view.width*0.5;
    pageControl.y = self.view.height - 100;
    self.pageControl = pageControl;
    [self.view addSubview:pageControl];
    
}

//设置最后页视图
- (void)setupLastPageWithView:(UIImageView *)imageView{
    
    imageView.userInteractionEnabled = YES;
    
    //'进入微博'按钮(背景图片按钮)
    UIButton *enterButton = [[UIButton alloc]init];
    //正常状态图片按钮
    [enterButton setBackgroundImage:[UIImage imageNamed:@"new_feature_finish_button"]forState:UIControlStateNormal];
    //高亮状态图片按钮
    [enterButton setBackgroundImage:[UIImage imageNamed:@"new_feature_finish_button_highlighted"] forState:UIControlStateHighlighted];
    
    //设置按钮大小(currentBackgroundImage - 背景图片)
    enterButton.size = enterButton.currentBackgroundImage.size;
    //设置按钮位置
    enterButton.centerX = imageView.width * 0.5;
    enterButton.y = imageView.height - 150;
    //设置标题
    [enterButton setTitle:@"进入微博" forState:UIControlStateNormal];
    
    //成为imageView的子类
    [imageView addSubview:enterButton];
    

    
    
    //分享按钮
    UIButton *shareBtn = [[UIButton alloc] init];
    [shareBtn setTitle:@"分享到微博" forState:UIControlStateNormal];
    //设置不同状态的图片
    [shareBtn setImage:[UIImage imageNamed:@"new_feature_share_false"] forState:UIControlStateNormal];
    [shareBtn setImage:[UIImage imageNamed:@"new_feature_share_true"] forState:UIControlStateSelected];
    
    [shareBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    
    [shareBtn addTarget:self action:@selector(shareBtnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    //自适应内容大小
    [shareBtn sizeToFit];
    
    shareBtn.centerX = enterButton.centerX;
    shareBtn.y = enterButton.y - 40;
    
    
    [imageView addSubview:shareBtn];

}
//"进入微博"按钮点击事件
-(void)shareBtnClick:(UIButton*)button{
    button.selected = !button.selected;
    NSLog(@"%s",__func__);
}
// 已经滑动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //contentOffset 偏移量
    double page = scrollView.contentOffset.x /scrollView.width;
    //指定当前页所展示的当前页面(滑动到一半位置,则显示下一页)
    self.pageControl.currentPage = (int)(page+0.5);
}
@end

效果图