15

私は、電子書籍リーダーの種類の Android アプリケーションを開発しようとしています。使用可能な画面スペースに基づいて、長い html 文字列 (実行時にサーバーから送信される) をその場でページに分割する必要があります。HTML コンテンツは、テキスト、画像、ビデオなどを含む記事です。HTML を表示するために WebView を使用しています。

これを達成する方法を教えてください。

前もって感謝します。

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;
}

次に、#contentの CSS プロパティを設定してleft、-250px の倍数でページを切り替えます。

コンテンツに必要な列数を計算するだけで、ページングができます。Javascript で css3 の複数列カウントを取得する方法は、ヒントを提供します#endMarker。

Moby Dick の最初の章を含むhttp://lateral.co.za/pages.htmlの実例を次に示します。Chrome と Android では動作しますが、Firefox では動作しません。CSS 列の実装が異なるためだと思います。ここでは Android に関心があるので、コードは適切です。

重要な部分は次のとおりです。

  1. CSSの設定は以上です。
  2. <span id="endMarker"></span>コンテンツの後 (ただし#contentdiv 内)の追加
  3. #previousand#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を解析する必要があります。JavaScriptのようにDOMにアクセスできるライブラリを使用するのが最善です。次に、解析されたコンテンツのカスタムレイアウトを作成できます。WebViewはJavaScriptをサポートしていますか？それは試してみるのに良いスタートです。

明らかに、HTMLファイルの任意の場所で分割することはできません。HTMLタグを考慮する必要があります。DOMを変更するか、HTMLを分割した後、コンテンツのカスタムCSSファイルを提供して、コンテンツを好きなように表示し、ライブラリまたはJavaScriptを使用してページ付けを追加できます。

を使用<span style="display:none"></span>すると、Webサイトのコンテンツを非表示にするのに役立ちます。次に、物理的に分割する必要はありません（とにかくページをロードした後、メモリ内にあります）。

それが少し役に立ったことを願っています。ここでは完全な解決策は得られませんが、いくつかのアイデアが得られた可能性があります。さらに具体的な問題を見つけた場合は、より具体的な質問をする方が簡単です。

于 2012-04-04T08:06:01.893 に答える