UIPageViewController制作小说翻页效果

demo:https://pan.baidu.com/s/1pL6Kvkn

??是下载地址

说下实现的一些细节:

其实UIPageViewController这个控件还是比较容易理解的主要是设置和实例化对象、然后设置代理并实现就可以了、UIPageViewController下面不会说的太多、主要说下小说章节的分页细节

创建好工程后、创建一个数组主要用于内容的存储

self.contentArray = @[].mutableCopy;  // 章节(测试5章)
    [self.contentArray addObject:[self textContent:@"事项"  ofType:@"txt"]];
    [self.contentArray addObject:[self textContent:@"事项1" ofType:@"txt"]];
    [self.contentArray addObject:[self textContent:@"事项2" ofType:@"txt"]];
    [self.contentArray addObject:[self textContent:@"事项3" ofType:@"txt"]];
    [self.contentArray addObject:[self textContent:@"事项4" ofType:@"txt"]];

    // 标题
    [self.titleChapter addObject:@"事项1"];
    [self.titleChapter addObject:@"事项2"];
    [self.titleChapter addObject:@"事项3"];
    [self.titleChapter addObject:@"事项4"];
    [self.titleChapter addObject:@"事项5"];

有了内容那么接下来就到章节比较重要的地方了、给每个章节进行分页

分页这里我用一个取巧的方式-----NSTextStorage

把章节内容封进NSTextStorage后利用

NSLayoutManager可以准确分页---而分页的数量是根据你设置frame的大小来计算的、基本是可控的

但是这玩意有个小缺点哦(通过测试发现的,如果你们发现别的缺点别喷)、用它来分页是有个临界点的,排版的时候如果单章内容太多,分页超过18页以上会有卡顿(一般小说单章也不会有那么多页的,基本符合大部分需求)

下面继续上分页部分代码

// 对内容进行排版
- (void)contentLayout {
    for (int i = 0; i < self.contentArray.count; i++) {
        [self createContentPagesChaper:self.contentArray[i]];// 初始化所有数据
    }

    // 记录标题章节  value -- 章节 key自增
    self.correspondingArray = @[].mutableCopy;
    [self.correspondingArray addObject:@"0"];
    NSInteger value = 0,key = 0;
    for (NSString *str in self.chaperArray) {
        value ++;
        key += [str integerValue];
        [self.correspondingArray addObject:[NSString stringWithFormat:@"%ld",(long)key]];
        for (NSInteger i = [self.correspondingArray[value-1] integerValue]; i < key; i ++) { // 章节的分页总数对应每一个章节
            [self.chaperOfNum setObject:[NSString stringWithFormat:@"%ld",value] forKey:[NSString stringWithFormat:@"%ld",(long)i]];
        }
    }

}

// 初始化所有数据并对内容进行排版
- (void)createContentPagesChaper:(NSString *)chaperStr {

    NSString *chaperContent = chaperStr;

    // 2.将字符串封装到TextStorage中
    NSTextStorage *storage = [[NSTextStorage alloc]initWithString:chaperStr];

    // 3.为TextStorag添加一个LayoutManager
    NSLayoutManager *layoutManager = [[NSLayoutManager alloc]init];
    [storage addLayoutManager:layoutManager];
    int i = 0;
    while ( YES )
    {
        // 4.将有准确矩形大小的TextContainer添加到LayoutManager上
        NSTextContainer *textContainer = [[NSTextContainer alloc]initWithSize:CGSizeMake(sWidth - 40, sHeight-90)];
        [layoutManager addTextContainer:textContainer];

        // 5.绑定TextContainer到TextView上
        self.textView = [[UITextView alloc]initWithFrame:CGRectMake(i * sWidth , 40, sWidth-40, sHeight-90) textContainer:textContainer];
        [self.textView setFont:[UIFont systemFontOfSize:self.wordFont]];
        self.textView.editable = NO;

        i ++;
        // 排版结束的判断
        NSRange range = [layoutManager glyphRangeForTextContainer:textContainer];  // 此方法用来获取当前TextContainer内的文本Range
        [self.paglengArray addObject:[NSString stringWithFormat:@"%ld",range.length]];
        if ( range.length + range.location == chaperStr.length )
            break;
    }
    int pag = i;
    [self.chaperArray addObject:[NSString stringWithFormat:@"%d",i]]; // 每章节的总页数

    for (int i = 0; i < pag; i++) { // 截取字段

        NSUInteger lengloc;
        if (i == 0) {
            lengloc = 0;
        }else{
            lengloc += [self lengPag:i-1];
        }
        NSString *temp = [chaperContent substringWithRange:NSMakeRange(lengloc, [self.paglengArray[i] integerValue])];
        [self.pageStrings addObject:temp];
    }

    self.pageContent = [[NSArray alloc] initWithArray:self.pageStrings];
    [self.paglengArray removeAllObjects];
}

- (NSUInteger)lengPag:(NSInteger)num {
    return [self.paglengArray[num] integerValue];
}

完成这一步基本完成百分80了??(剩下的需求看demo了,demo基本就是一个简单小说)

后面只需要创建一个textView来加载显示内容然后通过UIPageViewController代理来实现翻页

今天就说这么多了,,,具体大家自己看demo了 发现BUG的欢迎交流

时间: 2024-08-11 18:54:00

UIPageViewController制作小说翻页效果的相关文章

前端实现类似于iBooks的图书翻页效果的网络阅读软件(一)

昨天晚上在群里交流各种脑动大开的题目,我顺手也提了一个问题: JS如何做“字符分页“ 原意是源于我4年前公司项目,我负责开发1年的样子,后来各种原因就没有然后了… http://reader.appcarrier.com/     以上图片是手机上的截图,Metro风格当前可是风靡一时,软件本身是类似现在的”追书神器” 通过书名,在网络上搜索到对应的内容,之后保存到本地数据库.在通过JS获取数据再处理 自己装好测了下,貌似下载服务器已经挂了~ 程序采用PhoneGap打包的,数据采集是用底层完成

关于Page翻页效果, PageViewConrtoller

Page View Controllers你使用一个page view controller用page by page的方式来展示内容.一个page view controller管理一个self-contained视图架构.这个架构的父视图由page View controller管理,并且子视图由你提供的view Controllers管理. 一,解析Page View Controller一个page view controller有一个单独的视图,是你的内容的存放的地方.下图显示了pag

HTML5开发的翻页效果实例

简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20thingsilearned.com)的web app的宣传教育.这个项目最主要的思想是在传达,用web展现电子书的内容是最合适的选择.因为展现电子书的内容是前所未有的web技术,我们坚信以现在的技术完全可以用一个容器来展现这样的例子. 书籍的封面同时也是<20 Things I Learned Abou

android开发教程:android手势翻页效果

听麦子学院android开发老师说要实现手势翻页效果,主要用到ViewFlipper和GestureDetector.  ViewFlipper变化当前显示内容,GestureDetector监听手势.  用于多页的展示非常酷.  现在我就给大家简单说明下,  首先创建工程:TestFlip,创建主Activity:TestFlip.  在res/layout/main.xml中添加flipper信息,如下:  Java代码   1. <?xml version="1.0" en

turn.js 图书翻页效果

今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 两个地方要改动: 1.后台查出地址 注意的地方:1.地址要完全的 2.js要用json格式的数据 $more = M('File')->where(array('id'=>$id))->find(); $more1 = json_decode($more['more'],true); foreach($more1 as $k => $v){ /

微信里经常看到的滑动翻页效果,slide

上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大容器tranlateY(性能应该是最好的,但是如果增删一页的话对css影响很大,如果用sass或less除外) html: <!DOCTYPE html> <html> <head> <title></title> <meta name=&qu

微信翻页效果

今天闲得蛋疼,重构了之前写的微信翻页效果. 先上地址,觉得可以给颗星星,觉得有问题请大力吐槽. github:https://github.com/skyweaver213/slide 3个demo地址:http://skyweaver213.github.io/slide/widget/slide1/slide.htmlhttp://skyweaver213.github.io/slide/widget/slide2/slide.htmlhttp://skyweaver213.github.i

CSS3-----图片翻页效果的展示

在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般指向一个URL地址,也可以调用javascript,如href="javascript:xxx();",但是文档中推荐这样写<a href="http://www.111cn.net/zhongxing/U880/ javascript:void(0)" oncl

子数涵数&#183;PS ——翻页效果

一.首先在网络上下载一张图片,作为素材.这是我下载的素材,至于为什么选择这张照片呢,当然不是因为自己的一些羞羞的念头啦. 二.打开Photoshop,我使用的版本是CS3(因为CS3所占的磁盘空间较小,CS4与其就有天壤之别) 三.进入PS之后,打开之前下载好的素材,图如下: 四.复制一个图层,快捷键为Ctrl+J(在每次P图之前复制一个图层是一个好习惯) 五.然后将“背景”图层的可视取消(就是点击一下“背景”图层左边的那个小眼睛) 六.使用矩形选框工具,快捷键为M,在你所想要实现翻页效果的地方