关闭

Xcode_7 iOS_9 平铺导航_标签导航 Objective-C (16)

标签: iosobjective-c
444人阅读 评论(0) 收藏 举报
分类:

1、新建SingleViewApplication项目,先自己下载3张图片,最好是英文或数字命名,先在原有的view视图里拖拽两个控件:ScrollView和PageControl,然后将view的背景设为黑色,ScrollView的配置如下,然后调整pageControl的大小,这样两边可以点击翻页,这两个控件是并列关系存在于view视图上,并且pageControl在scrollView上面(在storyboard中手动将pageControl拖到scrollView的下方)然后两个控件分别作为输出口,其中pageControl还要设置一个事件,详细见代码:




2、再作三个独立的ViewController,包含view,并且在view视图中拖拽一个imageView控件,但是这里存在的问题是弱三个ViewController嵌套View和imageView就无法正常显示图片内容,这里的临时解决办法是把第三个ViewController的View视图控件去掉,直接拖拽imageView控件到ViewController上,这里每个ViewController的storyboard ID分别设置一下,为page1、page2、page3,然后把之前下载好的三张图片先导入到资源文件中,再分别配置到每个imageView的图片属性中,这样就可以不通过segue来连接视图控制器,也就不用为这三个独立的视图控制器添加自己的类(当然如果是要触发事件的话还是需要自己的类)。





3、代码如下,具体显示大小自己根据实际情况调整:

//
//  ViewController.h
//  TestProject
//
//  Created by 侯家奇 on 16/8/17.
//  Copyright © 2016年 侯家奇. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIScrollViewDelegate>

@property (strong, nonatomic) UIView *page1;
@property (strong, nonatomic) UIView *page2;
@property (strong, nonatomic) UIView *page3;

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

- (IBAction)changePage:(id)sender;

@end

//
//  ViewController.m
//  TestProject
//
//  Created by 侯家奇 on 16/8/17.
//  Copyright © 2016年 侯家奇. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib
    self.scrollView.delegate = self;
    
    self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 3, self.scrollView.frame.size.height);
    self.scrollView.frame = self.view.frame;
    
    UIStoryboard *mainStoryboard = self.storyboard;
    
    UIViewController *page1ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"];
    self.page1 = page1ViewController.view;
    self.page1.frame = CGRectMake(0.0f, 0.0f, 375.0f, 667.0f);
    
    UIViewController *page2ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page2"];
    self.page2 = page2ViewController.view;
    self.page2.frame = CGRectMake(375.0f, 0.0f, 375.0f, 667.0f);

    UIViewController *page3ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page3"];
    self.page3 = page3ViewController.view;
    self.page3.frame = CGRectMake(2 * 375.0f, 0.0f, 375.0f, 667.0f);
    
    self.scrollView.delegate = self;
    
    [self.scrollView addSubview:self.page1];
    [self.scrollView addSubview:self.page2];
    [self.scrollView addSubview:self.page3];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint offset = scrollView.contentOffset;
    self.pageControl.currentPage = offset.x /375.0f;

}

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

- (IBAction)changePage:(id)sender {
    [UIView animateWithDuration:0.3f animations:^{
        NSInteger whichPage = self.pageControl.currentPage;
        self.scrollView.contentOffset = CGPointMake(375.0f * whichPage, 0.0f);
    }];
}
@end



4、电子书翻页,根据上面的项目把第一个ViewController下面的View视图里的两个控件可以去掉了,其他的不变,然后修改代码:

//
//  ViewController.h
//  TestProject
//
//  Created by 侯家奇 on 16/8/17.
//  Copyright © 2016年 侯家奇. All rights reserved.
//

#import <UIKit/UIKit.h>

enum DirectionForward {
    ForwardBefore = 1 //向前
    ,ForwardAfter = 2 //向后
};

@interface ViewController : UIViewController <UIPageViewControllerDataSource, UIPageViewControllerDelegate>

@property (strong, nonatomic) UIPageViewController *pageViewController;

@end

//
//  ViewController.m
//  TestProject
//
//  Created by 侯家奇 on 16/8/17.
//  Copyright © 2016年 侯家奇. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController {
    //当前页面的索引
    int pageIndex;
    //翻页的方向
    int directionForward;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib
    //创建翻页实例 initWithTransitionStyle 是翻页效果,navigationOrientation 是翻页方向,
    self.pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
    
    self.pageViewController.delegate = self;
    self.pageViewController.dataSource = self;
    UIStoryboard *mainStoryboard = self.storyboard;
    UIViewController *pageViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"];
    
    //第一个视图
    NSArray *viewControllers = @[pageViewController];
    [self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:NULL];
    [self.view addSubview:self.pageViewController.view];
    pageIndex = 0;
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController {
    pageIndex --;
    if (pageIndex < 0) {
        pageIndex = 0;
        return nil;
    }
    
    directionForward = ForwardBefore;
    UIStoryboard *mainStoryboard = self.storyboard;
    NSString *pageId = [NSString stringWithFormat:@"page%i", pageIndex+1];
    UIViewController *pvController = [mainStoryboard instantiateViewControllerWithIdentifier:pageId];
    return pvController;
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController {
    pageIndex ++;
    if (pageIndex > 2) {
        pageIndex = 2;
        return nil;
    }
    
    directionForward = ForwardAfter;
    UIStoryboard *mainStoryboard = self.storyboard;
    NSString *pageId = [NSString stringWithFormat:@"page%i", pageIndex+1];
    UIViewController *pvController = [mainStoryboard instantiateViewControllerWithIdentifier:pageId];
    return pvController;
}

//动态设定书脊的位置
- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation {
    self.pageViewController.doubleSided = NO;
    return UIPageViewControllerSpineLocationMin;
}

//检查用户是否成功翻页
- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray<UIViewController *> *)previousViewControllers transitionCompleted:(BOOL)completed {
    if (!completed) {
        if (directionForward == ForwardAfter) {
            pageIndex --;
        }
        if (directionForward == ForwardBefore) {
            pageIndex ++;
        }
    }
}

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



5、这里介绍一下标签导航,用iOS的 Tabbed Application模版新建项目即可,通过主controller连接新添加ViewController的segue,然后新建cocoa touch class并且配置到新的ViewController上(其实还是很简单的,基弧不用代码)。

0
0
查看评论

Objective-C之平铺导航、标签导航、树形结构导航

盼秋风,徐徐而来,吹尽炎热,捎来些许凉意。 望秋水,秋雨来临,散尽暑气,带来一夜好眠。 来说一下导航控制器。导航一般分三种:平铺导航、标签导航、树形结构导航。 平时我们大家经常见的使用导航的样式如下: 平铺导航:应用界面(基于分屏导航),电子书(基于分页导航) ...
  • xiaoyaolala
  • xiaoyaolala
  • 2015-08-24 13:40
  • 1059

Xcode_7 iOS_9 树形结构导航 Objective-C (17)

Xcode_7 iOS_9 树形结构导航 Objective-C (17)
  • Dopamy_BusyMonkey
  • Dopamy_BusyMonkey
  • 2016-08-31 19:06
  • 641

ios-使用平铺导航模式

平铺导航: /*  平铺导航是非常重要的导航模式,一般用于简单的扁平化信息浏览,扁平化信息是指这些信息之间没有从属的层次关系  平铺导航有两种:分屏导航和分页导航  分屏导航:主要涉及的控件有分屏控件(UIPageControl)和滚动视图(UIScrollVi...
  • c201038795050
  • c201038795050
  • 2014-09-07 13:38
  • 1143

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

什么是平铺导航 定义: 显示的内容,使用分屏或者分页控制器来展示,只有一个主屏幕来展示。 1:分屏平铺图:(通常用在结构简单的软件(作为导航),或者是作为商城上方的图片展示栏出现(展示栏)) 2:分页导航通通常作为电子书的书页呈现(电子书)或者图片的展示来出现(类似幻灯片) 平铺导航:...
  • zhenggaoxing
  • zhenggaoxing
  • 2015-01-30 13:55
  • 1398

iOS开发那些事-平铺导航–基于分屏导航及案例实现

平铺导航模式是非常重要的导航模式。一般用于简单的扁平化信息浏览或任务。扁平化信息是指这些信息之间没有从属的层次关系,如中国的城市中北京、上 海和哈尔滨之间是扁平化信息,而哈尔滨市与黑龙江省之间的关系是从属的层次关系,层次关系信息可以采用标签导航和树形结构导航。从一个案例开始介绍平铺导航。如果我想为开...
  • tonny_guan
  • tonny_guan
  • 2013-03-07 10:58
  • 3985

Xcode_7 iOS_9 表视图 Objective-C (10)

Xcode_7 iOS_9 表视图 Objective-C (10)
  • Dopamy_BusyMonkey
  • Dopamy_BusyMonkey
  • 2016-08-24 11:55
  • 436

Xcode_7 iOS_9 模态视图 Objective-C (15)

Xcode_7 iOS_9 模态视图 Objective-C (15)
  • Dopamy_BusyMonkey
  • Dopamy_BusyMonkey
  • 2016-08-29 19:55
  • 399

iOS导航模式

在我们开发一款app时,我们都会在设计阶段把应用的导航确定下来。导航指导用户使用我们的应用,如果没有导航,我们的应用就会显得很混乱。 在iOS应用中,视图控制器处于重要地位。在UIKit中,视图控制器有很多种,有些负责显示视图,有些也同时兼顾导航。我们常见的视图控制器有以下几种: 1、UIVie...
  • u011993617
  • u011993617
  • 2013-12-19 20:03
  • 2943

Xcode_7 iOS_9 日期选择器 Objective-C (7)

Xcode_7 iOS_9 日期选择器 Objective-C (7)
  • Dopamy_BusyMonkey
  • Dopamy_BusyMonkey
  • 2016-08-19 16:32
  • 670

使用图片方式自定义iOS导航栏navig…

在做ViewControlller的navigationItem时,我们经常需要使用自定义的图片来替换系统默认的按钮样式,这点在对普通导航项,比如leftBarButtonItem或rightBarButtonItem来说还是比较简单的,通过UIBarButtonItem的setImage设置做好的...
  • Road_dongliang
  • Road_dongliang
  • 2016-03-18 09:30
  • 1355
    个人资料
    • 访问:300854次
    • 积分:5217
    • 等级:
    • 排名:第6247名
    • 原创:201篇
    • 转载:156篇
    • 译文:0篇
    • 评论:68条
    文章分类
    最新评论