15

我正在尝试开发电子书阅读器类型的 android 应用程序。我需要根据可用的屏幕空间将长 html 字符串（由服务器在运行时发送）动态拆分为页面。Html 内容是一篇可以包含文本、图像、视频等的文章。我使用 WebView 来显示 html。

谁能给我指导如何实现这一目标。

提前致谢。

4

2 回答 2

8

我认为，进行任何类型的 HTML/DOM 解析都会让你陷入困境，这意味着你正在有效地开始开发自己的 HTML 布局引擎。

使用 CSS3 列函数是一个更好的主意。基本上，让您的内容在固定的宽度和高度列中呈现。这将成为您的页面。然后将您的内容位置向左移动以在页面之间移动，并将其包装在将隐藏溢出元素的容器中。

我们的 HTML 基本上是：

<body>
    <div id="container">
        <div id="content">

            CONTENT GOES HERE

            <span id="endMarker"></span>
        </div>
    </div>
    <div>
        <button id="previous">Previous</button>
        <span id="page">Page N of M</span>
        <button id="next">Next</button>
    </div>
</body>

我们的基本 CSS 是：

#container {
    width: 240px;
    overflow: hidden;
    background-color: yellow;
}
#content {
    position: relative;
    height: 30em;

    -moz-column-width: 240px;
    -webkit-column-width: 240px;
    column-width: 240px;

    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
}

现在我们将设置left#content 的CSS 属性以在页面之间切换，以-250px 的倍数。

我们只需要计算出我们的内容占用了多少列，就可以进行分页了。How to get css3 multi-column in Javascript给出了一个提示：我们要从#endMarker.

这是一个工作示例http://lateral.co.za/pages.html，其中包含 Moby Dick 的第一章。它适用于 Chrome 和 Android，但不适用于 Firefox - 我认为是因为 CSS 列实现的差异。由于我们这里对Android感兴趣，所以代码很好。

重要的部分是：

  1. CSS 设置如上。
  2. 在内容之后添加一个<span id="endMarker"></span>（但在#contentdiv 内）
  3. 添加一个#previous和#next按钮，以及一个#page跨度，都在#container.

  4. jQuery加载后的这个javascript：

    var _column = 0;
var _columnCount = 0;
var _columnWidth = 240;
var _columnGap = 10;
$(function() {
    _columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap));

    setColumn = function(i) {
        _column = i;
        document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap);
        $('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1));
    }
    $('#next').click(function() {
        if (_column==_columnCount) return;
        setColumn(_column+1);
    });
    $('#previous').click(function() {
        if (0==_column) return;
        setColumn(_column-1);
    });
    setColumn(0);
});

而已。

有工作的空间。有人可能想考虑一下列数的计算，我有点从引用的 SO 帖子中吸取了它，但实际上并没有仔细考虑过......容器的宽度似乎会影响内容的列宽，这对我来说并不完全有意义。

但至少在 Chrome 和 Android 上，至少在不需要进行任何 HTML 解析和自己的布局的情况下，一切似乎都可以正常工作。

于 2014-08-11T10:53:53.093 回答
0

您必须解析 HTML，最好是使用一些库，您可以在其中访问 DOM，就像在 JavaScript 中一样。然后，您可以为解析的内容创建自定义布局。WebView 是否支持 JavaScript？这将是一个很好的尝试。

显然，您不能在 HTML 文件的任意位置拆分，您必须考虑 HTML-Tags。修改 DOM 或拆分 html 后，您可以为内容提供自定义 CSS 文件，以您喜欢的方式显示它，并使用您的库或 JavaScript 添加一些分页。

使用<span style="display:none"></span>可以帮助您隐藏网站中的内容。然后你不必在物理上拆分（无论如何加载页面后它都在内存中）。

希望能有所帮助。你不会在这里得到一个完整的解决方案，但也许你有一些想法。如果您发现更具体的问题，则更容易提出更具体的问题。

于 2012-04-04T08:06:01.893 回答