Tôi đang cố gắng phát triển loại trình đọc sách điện tử của ứng dụng Android. Tôi cần phải chia chuỗi dài html (gửi bởi máy chủ tại thời gian chạy) vào các trang trên bay dựa trên không gian màn hình có sẵn. Nội dung Html là một bài viết có thể chứa văn bản, hình ảnh, video, v.v. Tôi đang sử dụng WebView để hiển thị html.Chia chuỗi html thành nhiều trang
Bất kỳ ai cũng có thể cho tôi hướng dẫn về cách thức này có thể đạt được.
Xin cảm ơn trước.
Bạn phải phân tích cú pháp HTML, tốt nhất là sử dụng một số thư viện nơi bạn có thể truy cập DOM như trong JavaScript. Sau đó, bạn có thể tạo bố cục tùy chỉnh cho nội dung được phân tích cú pháp. WebView có hỗ trợ JavaScript không? Đó sẽ là một khởi đầu tốt để thử.
Rõ ràng là bạn không thể phân tách tại các vị trí tùy ý của tệp HTML, bạn phải xem xét các thẻ HTML. Sau khi sửa đổi DOM hoặc tách html, bạn có thể cung cấp tệp CSS tùy chỉnh cho nội dung để hiển thị nó theo cách bạn muốn và thêm một số phân trang bằng cách sử dụng thư viện hoặc JavaScript của bạn.
Sử dụng <span style="display:none"></span> có thể giúp bạn ẩn nội dung trong trang web. Sau đó, bạn không cần phải phân chia là thể chất (nó là trong bộ nhớ sau khi tải trang anyway).
Hy vọng điều đó sẽ giúp ích một chút. Bạn sẽ không nhận được giải pháp đầy đủ ở đây, nhưng có thể bạn có một số ý tưởng. Nếu bạn tìm thấy các vấn đề cụ thể hơn, sẽ dễ dàng hơn khi đặt các câu hỏi cụ thể hơn.
Cảm ơn bạn đã trả lời. Với Jericho html phân tích cú pháp tôi đã phân tích cú pháp html và đã trích xuất nội dung văn bản và hình ảnh và sau đó tôi đã thiết lập một bố trí tùy chỉnh với imageview ở đầu và textview bên dưới nó. Nếu có một hình ảnh tôi đang cài đặt nó cho các lần xem ảnh, nếu không phải là chế độ xem văn bản của tôi phù hợp với màn hình. – Harshita
Với textview.getPaint(). MeasureText (txt) tôi đang nhận được chiều rộng của văn bản được hiển thị. Làm cách nào chúng tôi có thể tính toán số ký tự hoặc văn bản phù hợp với màn hình. – Harshita
Thực hiện bất kỳ loại phân tích cú pháp HTML/DOM nào sẽ đưa bạn lên tường, tôi nghĩ và có nghĩa là bạn đang bắt đầu phát triển công cụ bố cục HTML của mình một cách hiệu quả.
Bạn nên sử dụng các chức năng cột CSS3. Về cơ bản, hãy hiển thị nội dung của bạn trong cột có chiều rộng và chiều cao cố định. Điều này sẽ trở thành trang của bạn. Sau đó, chuyển vị trí nội dung của bạn sang trái để di chuyển giữa các trang và bọc nó vào một vùng chứa sẽ ẩn các phần tử tràn.
HTML của chúng tôi về cơ bản sẽ là:
<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 cơ bản của chúng tôi là:
#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;
}
Bây giờ chúng ta sẽ thiết lập thuộc tính CSS left cho # content để chuyển đổi giữa các trang, trong bội số của - 250px.
Chúng tôi chỉ tìm ra số lượng cột mà nội dung của chúng tôi cần và chúng tôi đã phân trang. How to get css3 multi-column count in Javascript gợi ý: chúng ta sẽ tìm thấy nó từ vị trí bên trái của #endMarker.
Đây là ví dụ làm việc http://lateral.co.za/pages.html, với chương đầu tiên của Moby Dick. Nó hoạt động trong Chrome và trên Android, nhưng không phải trong Firefox - tôi nghĩ vì sự khác biệt trong việc triển khai cột CSS. Vì chúng tôi quan tâm đến Android ở đây, mã là tốt.
Các bộ phận quan trọng là:
<span id="endMarker"></span> sau khi nội dung (nhưng trong #content div)#previous và #next, và một khoảng #page, tất cả các bên ngoài #container.javascript này sau jQuery tải:
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);
});
Vậy là xong.
Có chỗ cho công việc. Người ta có thể muốn suy nghĩ về số lượng cột tính toán, tôi sắp xếp hút nó từ bài SO tham chiếu, nhưng chưa thực sự nghĩ rằng nó ... Chiều rộng của container dường như ảnh hưởng đến chiều rộng cột của nội dung, không hoàn toàn hợp lý với tôi.
Nhưng ít nhất mọi thứ dường như hoạt động mà không phải thực hiện bất kỳ phân tích cú pháp HTML nào và bố cục riêng, ít nhất là trong Chrome và trên Android.
điều này thực sự tốt đẹp, nhưng làm thế nào tôi có thể thiết lập chiều rộng và chiều cao để lấp đầy cửa sổ? sử dụng 'width: $ (window) .width();' thay vì 'width: 240px;' và chiều rộng cột khác không hoạt động. – mehdok
Nó sẽ là đủ để làm cho các container điền vào cửa sổ. Hoặc sử dụng 'width: 100%;' hoặc 'width: 100vw;' – craigmj
ok, nhưng còn về '-moz-column-width: 240px; -webkit-column-width: 240px; chiều rộng cột: 240px; 'nếu tôi đặt chúng thành 100% chỉ cột đầu tiên được hiển thị. những gì về 'chiều cao', tôi muốn điền vào cả hai' chiều cao' và 'chiều rộng' – mehdok
Bạn có thể chia sẻ cách bạn giải quyết vấn đề này không? Cảm ơn. – Ravi