私は電子ブックリーダーの種類のアンドロイドアプリケーションを開発しようとしています。使用可能な画面スペースに基づいて、長いhtml文字列（実行時にサーバーによって送信される）をフライでページに分割する必要があります。 HTMLコンテンツは、テキスト、画像、動画などを含むことができる記事です.HTMLを表示するためにWebViewを使用しています。html文字列を複数のページに分割
これを達成する方法については、誰でも私に指示できますか。
ありがとうございます。
JavaScriptを解析する必要があります。JavaScriptなどのDOMにアクセスできるライブラリを使用するのが最適です。次に、解析されたコンテンツのカスタムレイアウトを作成できます。 WebViewはJavaScriptをサポートしていますか？試してみると良いスタートになるでしょう。
明らかに、HTMLファイルの任意の場所で分割することはできません.HTMLタグを考慮する必要があります。 DOMを変更したりhtmlを分割したりすると、コンテンツ用のカスタムCSSファイルを提供して、好きなように表示したり、ライブラリやJavaScriptを使ってページネーションを追加することができます。
<span style="display:none"></span>を使用すると、ウェブサイトのコンテンツを非表示にすることができます。その後、物理的に分割する必要はありません（ページをロードした後はメモリに保存されています）。
少し助けてくれることを願っています。あなたはここで完全な解決策を得ることはできませんが、多分あなたはいくつかのアイデアを持っています。さらに具体的な問題が見つかった場合は、より具体的な質問をするほうが簡単になります。
どのような種類の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ためleft CSSプロパティを設定します - 250px
私たちは、コンテンツに必要なカラム数を調べるだけで、ページングを取得しました。 How to get css3 multi-column count in Javascriptはヒントを示します：#endMarkerの左の位置から検索します。
ここには、動作例http://lateral.co.za/pages.htmlとMoby Dickの最初の章があります。 ChromeやAndroidでは動作しますが、Firefoxでは動作しません。CSSカラムの実装の違いが原因です。ここでAndroidに興味があるので、コードは良いです。
重要な部分は、以下のとおりです。上記のように
#content DIV内の）全て#container外部#previousと#nextボタンの添加、及び#pageスパン、<span id="endMarker"></span>の添加。 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);
});
。
仕事の余地があります。 1つは、列の計算の数について考えてみたいと思うかもしれませんが、引用したSOの投稿からそれを吸い取ったのですが、実際には考えていませんでした...コンテナの幅はコンテンツの列幅に影響するようです私には完全に意味をなさない。
少なくとも、ChromeとAndroidでは、HTML解析と独自のレイアウトを行うことなく、少なくともすべてが機能しているようです。
これは本当にいいですが、どのようにウィンドウを埋めるために幅と高さを設定できますか？ 'width：$（window）.width（）;'の代わりに 'width：240px;'と他のカラム幅は働かない。 – mehdok
コンテナをウィンドウに塗りつぶすだけで十分です。または、 'width：100％;'または 'width：100vw;'を使用してください。 – craigmj
でも、 '-moz-column-width：240px; -webkit-column-width：240px; column-width：240px; '最初の列のみを100％に設定した場合。 'height'については' height'と 'width'の両方を埋めたい – mehdok
あなたはこれをどのように解決したのでしょうか？ありがとう。 – Ravi