IOS学习之——导航3 平铺导航1：实现基于分屏的平铺导航

最新推荐文章于 2024-05-12 12:26:00 发布

B9班的真高兴

最新推荐文章于 2024-05-12 12:26:00 发布

阅读量2.1k

点赞数 2

分类专栏：漫画IOS开发文章标签： IOS 导航分屏导航

本文链接：https://blog.csdn.net/zhenggaoxing/article/details/43306305

版权

漫画IOS开发专栏收录该内容

34 篇文章 1 订阅

订阅专栏

什么是平铺导航

定义：

显示的内容，使用分屏或者分页控制器来展示，只有一个主屏幕来展示。

1：分屏平铺图：(通常用在结构简单的软件（作为导航），或者是作为商城上方的图片展示栏出现（展示栏）)

2：分页导航通通常作为电子书的书页呈现（电子书）或者图片的展示来出现（类似幻灯片）

平铺导航：作为导航

平铺导航：作为商城展示

分页平铺：（作为电子书）

展示数据的组织形式

平铺导航把展示的数据组织成了一种线性结构：数据之间可以进行三种操作：

跳转到前一页面
跳转到后一页面
跳转到指定页面（这个仅限于基于分屏的平铺导航）

怎么样？是不是很像数据结构里面的线性表

这种导航适合展示线性结构的数据，比如：书页，系列图片，商城的导航。（当然你也可以展示没有任何结构的数据）

实现基于分屏的平铺导航

平铺导航界面的组件

平铺导航需要两个组件：

1 滚动视图：UIScrollView

2 页面控制器：UIPageControl

效果如下：图片的位置是UIScrollView的范围，下面三个圈是页面控制器

scrollView四个位置属性的详解

基于分屏的平铺导航，主力是UIScrollView,这个控件有四个位置属性（说起来都是泪啊，出过很多错，浪费了很多时间），下面来简单介绍一下：

1 frame 翻译：框架 CGRect类型

这个属性继承自UIView类，看一下文档对这个属性的描述
//The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.
翻译：这个矩形（长方形）框架，描述了这个视图在父视图坐标系统下的位置和大小。

简单的解释一下：在哪，多大

所以frame属性包含两个值：

1 origin：（x,y）坐标

2 size:（宽，长）多大

举个例子：如果父视图是一个2*2的正方形，要在加上的视图要占1/4 面积，同时要在右下角，只要设置 origin（1，1）size(1,1)就可以了

2 contentSize 类型：CGSize

这个属性是UIScrollView的属性，下面看看官方文档对这个属性的描述

The size of the content view.
这个很直白：就是内容视图的大小，那么什么是内容视图呢？比如吧，你去爬泰山，快要到南天门了，于是赶紧拍照，很显然镜头包括的内容是有限的，而景色远比内容要大，这里就可以把景色看成内容视图，把照相镜头看做frame

3 contentInset类型
文档描述：
//The distance that the content view is inset from the enclosing scroll view.
翻译：enclosing 闭合，围合内容视图到滚动视图的边界的距离

设置一下看看效果
 [self.scroller setContentInset:UIEdgeInsetsMake(200, 0, 0, 0)];
可以设置四个值，分别是上，左，下，右（看一下定义）：
 UIEdgeInsets UIEdgeInsetsMake(
 CGFloat top,
 CGFloat left,
 CGFloat botton,
 CGFloat right
 );
4 contentOffset（CGSize 类型）

这个属性定义在UIScrollView里面

文档定义：
//The point at which the origin of the content view is offset from the origin of the scroll view.
翻译：内容视图原点到滚动视图原点的偏移量

看起来很复杂的样子，其实很简单，设置一下：
 self.scroller.contentOffset=CGPointMake(200, 0);
看效果

设置scrollView代码：

先说一下思路：先设置frame，再设置内容视图，再将image添加为scrollview的子视图

- (void)viewDidLoad {
    [super viewDidLoad];
    self.automaticallyAdjustsScrollViewInsets=NO;
    
    //
    self.scroller.frame=CGRectMake(0, 0, WEIGHT, HEIGHT-150);

    
    // 重绘scrollview的 范围  三倍屏幕宽度  一倍自己宽度
    self.scroller.contentSize=CGSizeMake(WEIGHT*3, HEIGHT-150);
    self.scroller.contentOffset=CGPointMake(200, 0);

//    self.scroller.contentInset

    // 绘制三个图片
    self.page1=[[UIImageView alloc]initWithFrame:CGRectMake(0,0, self.scroller.frame.size.width, self.scroller.frame.size.height)];
    self.page1.image=[UIImage imageNamed:@"保罗克利-肖像.png"];
    
    self.page2=[[UIImageView alloc]initWithFrame:CGRectMake(WEIGHT, 0, WEIGHT, HEIGHT-150)];
    self.page2.image=[UIImage imageNamed:@"罗丹-思想者"];
    
    self.page3=[[UIImageView alloc]initWithFrame:CGRectMake(WEIGHT*2.0, 0, WEIGHT, HEIGHT-150)];
    self.page3.image=[UIImage imageNamed:@"达芬奇-蒙娜丽莎"];
    
    self.scroller.delegate=self;
    
    [self.scroller addSubview:self.page1];
    [self.scroller addSubview:self.page2];
    [self.scroller addSubview:self.page3];
    
}

实现scrollview和pagecontrol互动

实现内容很简单，图案变化，下面page也变化，page变化，图片变化，没有多复杂，直接上代码

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)changeValue:(id)sender {
    [UIView animateWithDuration:0.3f animations:^{
        NSInteger whichPage=self.pager.currentPage;
        self.scroller.contentOffset=CGPointMake(WEIGHT*whichPage, 0.0f);
    }];
}