ios开发——平铺导航(基于分屏视图)

由两个控件完成:UIPageControl和UIScrollView

示例代码如下

#import "ViewController.h"
//定义屏幕宽度宏
#define S_WIDTH [[UIScreen mainScreen] bounds].size.width
//定义屏幕高度宏
#define S_HEIGH [[UIScreen mainScreen] bounds].size.height

@interface ViewController ()<UIScrollViewDelegate>
- (IBAction)changePage:(id)sender;
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (strong,nonatomic) UIImageView *imageView1;
@property (strong,nonatomic) UIImageView *imageView2;
@property (strong,nonatomic) UIImageView *imageView3;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //设置ScrollView的委托对象为self(当前视图控制器)
    self.scrollView.delegate = self;
    //设置屏幕滚动视图中内容视图的大小
    self.scrollView.contentSize = CGSizeMake(S_WIDTH * 3,S_HEIGH);
    //设置屏幕滚动视图为当前屏幕的大小(self.view.frame)
    self.scrollView.frame = self.view.frame;
    
    self.imageView1 = [[UIImageView alloc]initWithFrame:CGRectMake(0.0F, 0.0F, S_WIDTH, S_HEIGH)];
    self.imageView1.image = [UIImage imageNamed:@"达芬奇-蒙娜丽莎.png"];
    self.imageView2 = [[UIImageView alloc]initWithFrame:CGRectMake(S_WIDTH, 0.0F, S_WIDTH, S_HEIGH)];
    self.imageView2.image = [UIImage imageNamed:@"罗丹-思想者.png"];
    self.imageView3 = [[UIImageView alloc]initWithFrame:CGRectMake(2*S_WIDTH, 0.0F, S_WIDTH, S_HEIGH)];
    self.imageView3.image = [UIImage imageNamed:@"保罗克利-肖像.png"];
    [self.scrollView addSubview:self.imageView1];
    [self.scrollView addSubview:self.imageView2];
    [self.scrollView addSubview:self.imageView3];
    
    //self.scrollView.contentInset.top,这个属性用于在内容视图周围添加边框
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}

#pragma mark --  实现UIScrollViewDelegate委托协议
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //CGPoint结构体有x和y两个成员,contentOffset就是内容视图相对于滚动视图的偏移量
    CGPoint offset = scrollView.contentOffset;
    //offset.x就是偏移量x坐标的值,S_WIDTH屏幕的宽度,他们的商就是当前页标号
    self.pageControl.currentPage = offset.x / S_WIDTH;
}


#pragma mark --  实现UIPageControl事件处理
- (IBAction)changePage:(id)sender {
    //为了让屏幕产生动画效果,我们使用UIView中的animateWithDuration来改变控件的偏移量
    [UIView animateWithDuration:0.3f animations:^{
        //根据上面的委托协议得到的现在的页面编号
        NSInteger whichPage = self.pageControl.currentPage;
        //滚动视屏的内容偏移量为x上的S_WIDTH * whichPage
        self.scrollView.contentOffset = CGPointMake(S_WIDTH * whichPage,0.0f);
    }];
}
@end

猜你喜欢

转载自blog.csdn.net/sndongcheng/article/details/81119634