需求:
- 启动程序后,有个介绍app新特性的界面
思路:
- 新特性界面,其实就多个图片组合在一起,展示出来而已!
- 使用UIScrollView,实现滚动动画
- 新特性视图,有个分页功能,方便直观的展现用户内容!(UIPageControl)
- UIPageControl和UIScrollView实现联动!(遵循代理,成为代理类,实现滑动改变分页控件方法)
- 在最后一页,显示"进入微博"按钮,注意它是背景图片按钮!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
效果图
