一種完整展示資訊信息的排版計(jì)算方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及智能手機(jī)閱讀軟件的圖片與文字排版技術(shù)領(lǐng)域，特別地涉及一種互聯(lián)網(wǎng)應(yīng)用軟件的圖片與文字排版的技術(shù)方法。
[0002]
【背景技術(shù)】
[0003]隨著智能手機(jī)的普及，眾多手機(jī)資訊類軟件進(jìn)入了用戶的視線，資訊類軟件多以文字或文字加圖片形式出現(xiàn)。但是呈現(xiàn)出類似的視覺背后卻是各自獨(dú)特的技術(shù)，一種好的排版技術(shù)，不僅能讓軟件的擴(kuò)展性良好，還能有良好的用戶體驗(yàn)。目前市場(chǎng)上瀑布流排版的軟件層出不窮，但是瀑布流排版的技術(shù)各不相同，這種瀑布流的排版技術(shù)有良好的擴(kuò)展性、流暢性以及獨(dú)特性。
[0004]瀑布流排版的設(shè)計(jì)，是不規(guī)則排列而產(chǎn)生的美感，特別的針對(duì)圖片的處理(盡最大可能不截取圖片，但是兼不規(guī)則和整齊于一身)。針對(duì)新聞，廣告類資訊推廣視覺效果良好。瀑布流排版的技術(shù)，簡單的布局也可以實(shí)現(xiàn)，但是擴(kuò)展性差、兼容性也不好。
[0005]目前設(shè)置圖片與文字的瀑布流排版技術(shù)的一種方法是:首先設(shè)置瀑布流一頁中每一個(gè)資訊塊的內(nèi)容，然后根據(jù)這一頁各個(gè)資訊塊的圖片比例大小確定是否通欄顯示，剩下的不通欄顯示的資訊塊根據(jù)資訊塊的高度確定在排列兩列中的第一列還是第二列，最后使兩列齊平，再把這一頁排列好的資訊添加到另一個(gè)視圖類中，繼續(xù)添加下一頁，如此循環(huán)，就形成了瀑布流。

【發(fā)明內(nèi)容】

[0006]本發(fā)明主要提供一種瀑布流排版的一種技術(shù)實(shí)現(xiàn)方法，以解決簡單布局實(shí)現(xiàn)的瀑布流無法輕松擴(kuò)展的缺點(diǎn)，從而可以提升開發(fā)進(jìn)度以及增加設(shè)計(jì)的靈活度，使用戶有更好的閱讀體驗(yàn)。
[0007]為解決上述問題本發(fā)明提供如下技術(shù)方案:
1、定義瀑布流各個(gè)資訊塊顯示的相關(guān)屬性
為瀑布流資訊塊定義屬性，瀑布流資訊塊布局的模式(1、文字模式2、圖文模式)，資訊塊的id、左上角的X坐標(biāo)、左上角的y坐標(biāo)，資訊塊的寬、高，資訊塊中圖片的寬、高，資訊的標(biāo)題、簡介、圖片的下載路徑，資訊的來源、發(fā)表時(shí)間，是否在兩列中的左邊一列，是否通欄顯不等。
[0008]2、確定瀑布流一頁數(shù)據(jù)的10個(gè)資訊塊的顯示順序(一頁的資訊塊數(shù)據(jù)可以根據(jù)具體情況自由定義)，并且讓瀑布流一頁中資訊塊布局兩列的底部齊平。
[0009]【具體實(shí)施方式】:
一、確定各個(gè)資訊塊的顯示屬性
設(shè)置資訊塊中的各個(gè)屬性的值，資訊中有圖片就用圖文模式顯示，否則就用純文字模式顯示。根據(jù)每個(gè)資訊塊的圖片的大小比例，確定是否通欄顯示(一行僅有一列)，且每一頁10個(gè)資訊塊，其中最多只有一個(gè)資訊塊是通欄顯示，其他的資訊塊都是兩列顯示，且資訊塊之間的間隙是固定的，因此可以計(jì)算出通欄顯示跟兩列顯示的資訊塊的寬和高(圖片的寬高比例不一，資訊塊的高度可以根據(jù)圖片的比例和圖片的寬度計(jì)算得出)。當(dāng)資訊塊的圖片的高度超過屏幕的高度時(shí)，則設(shè)置資訊塊的圖片的高度值為屏幕的高度值。
[0010]圖片的寬高比例=資訊塊的寬/資訊塊的高；
通欄顯示資訊塊的寬=屏幕的寬-2*資訊塊之間的間隙；
通欄顯示資訊的高=通欄資訊塊的寬/圖片的寬高比例+圖片下方的固定文字塊的高(根據(jù)文字多少確定文字塊的高)；
兩列顯示的資訊的寬=(屏幕的寬-3*資訊塊之間的間隙)/ 2;
兩列顯示的資訊的高=兩列顯示的資訊的寬/圖片的寬高比例；
二、確定各個(gè)資訊塊的排列順序
用背包算法對(duì)10條資訊中除了通欄顯示的資訊塊之外其他所有的資訊塊進(jìn)行排序，使得兩列的高度相差最小，也就是:選擇出總高度最優(yōu)的幾個(gè)資訊塊放在兩列中的其中一列，并且使這一列的高度與兩列的總高度的一半高度值相差最小。
[0011]如果第η個(gè)資訊塊的高度大于兩列中所有資訊塊的一半的高度，那么最優(yōu)解肯定存在于前η-1個(gè)資訊塊中，如果第η個(gè)資訊塊的高度不大于兩列中所有資訊塊的一半的高度，那么要么是包含第η個(gè)資訊塊，要么是不包含第η個(gè)資訊塊的最優(yōu)解，取兩者的最大值，最后以此類推，得出兩列中第一列的幾個(gè)資訊塊的最佳組合。
[0012]三、確定每個(gè)資訊塊的擺放位置
依次根據(jù)資訊塊的寬、高，屏幕的寬、高，資訊寬之間的間隙，計(jì)算出通欄顯示的資訊塊的左上角的X軸的坐標(biāo)位置以及左上角的y軸的坐標(biāo)位置，再根據(jù)上一步中得出的最佳組合的幾個(gè)資訊塊放第一列，剩下的幾個(gè)資訊塊放第二列的原則依次計(jì)算出兩列中的每個(gè)資訊塊的左上角的X軸的坐標(biāo)位置和左上角的I軸的坐標(biāo)位置。
[0013]四、拉伸兩列中較短的一列，讓兩列資訊的底部齊平，使界面更美觀
首先比較出兩列的高度差值，再得到較短一列的排在最后面的資訊塊，拉長兩列的高度差值到較短的資訊塊中的圖片上，較短的資訊塊的總高度值會(huì)相應(yīng)增加。這樣兩列的底部就會(huì)齊平，而且拉伸的高度很小也不至于圖片會(huì)變形。
[0014]2、在PiWindowView中得到每一個(gè)資訊塊對(duì)應(yīng)的布局，并測(cè)量出每一個(gè)資訊塊的大小，確定每一個(gè)資訊塊的顯示位置
在PiWindowView中得到10個(gè)資訊塊后確定相應(yīng)的布局(可以是圖文模式，文字模式) 在PiWindowView中的onMeature方法中測(cè)量出每個(gè)資訊塊的寬度和高度，
在Layout方法中設(shè)置每個(gè)資訊塊所在的位置。
[0015]3、設(shè)置 PiWindowView 在 StrenchListView 中的位置
StrenchListView 類繼承 ViewGroup 類，將 PiWindowView 中的數(shù)據(jù)添加到StrenchListView中的LinkedList集合中，LinkedList集合中最多只有3個(gè)PiffindowView,也就是3頁數(shù)據(jù),這3頁數(shù)據(jù)會(huì)靜態(tài)保存在內(nèi)存中，下拉可以看到前面拉到的數(shù)據(jù)，當(dāng)超過3頁數(shù)據(jù)時(shí)就手動(dòng)清理3頁前的數(shù)據(jù)。顯示的圖片也是需要手動(dòng)清理，否則很容易報(bào)內(nèi)存溢出的異常。圖片用圖片加載管理器，內(nèi)存超過固定值會(huì)回收?qǐng)D片。在onMeature方法中測(cè)量每個(gè)PiWindowView的寬高，然后在onLayout方法中設(shè)置每個(gè)PiffindowView 的位置。
[0016]4、將 StrenchListView 添加到 PiScrollView 中，在 PiScrollView 中主要處理一些刷新后數(shù)據(jù)更新的操作
從服務(wù)器獲取瀑布流需要展示的數(shù)據(jù)，一頁10條，設(shè)置StrenchListView里面PiffindowView 中的資訊塊的數(shù)據(jù)，將 StrenchListView 添加到 PiScrollView 中。
[0017]5、在PiScrollView的父類XScrollView中做一些相關(guān)上拉刷新的操作 XScrollView繼承ScrollView,可以處理一些滑動(dòng)界面跟自動(dòng)滾動(dòng)界面的相關(guān)操作。
在這個(gè)類中注冊(cè)觸發(fā)更新和加載更多數(shù)據(jù)的監(jiān)聽事件。還有一些上拉刷新狀態(tài)改變的一些處理。當(dāng)操作者上拉超過固定距離，就在底部添加FooterView加載下載數(shù)據(jù)的布局，監(jiān)聽到數(shù)據(jù)后就刷新界面，顯示下一頁數(shù)據(jù)，依次上拉循環(huán)不斷刷新，不斷更新界面，就形成了瀑布流的界面。
【主權(quán)項(xiàng)】
1.一種排版的方法，應(yīng)用需要使用瀑布流風(fēng)格展示信息的任何終端，其特征在于，所述方法包括: 對(duì)任意終端的數(shù)字顯示屏進(jìn)行區(qū)域劃分，每次獲取到10條信息組合時(shí)，已最終底部齊平為目的，盡最大可能不截圖圖片(即按照原圖比例等比縮放)，若要實(shí)現(xiàn)此要求，首先我們應(yīng)該按照屏幕的寬度來劃分區(qū)域，屏幕寬的一半即每個(gè)圖片的實(shí)際展示寬度，然后根據(jù)原圖比例計(jì)算出圖片實(shí)際展示呈現(xiàn)的高度，保證此圖片是不會(huì)壓縮變形并且不做裁剪，同時(shí)保證與其他模塊沒有任何重疊，每個(gè)瀑布流的信息塊的內(nèi)容布局可以自由變換，只要總高度確定即可每個(gè)瀑布流的信息可點(diǎn)擊。
2.根據(jù)權(quán)利要求1所述的方法，其特征還包括: 用戶每次從網(wǎng)絡(luò)拉取新的信息時(shí)，連接在后面的新的一頁的頂部和底部始終是齊整的。
3.根據(jù)權(quán)利要求1所述的方法，其特征還包括: 瀑布流的圖片信息展示兩列，始終是錯(cuò)開的，以一種凌亂美展示，并且因?yàn)轫敳亢晚敳渴驱R平的，所以頂部和底部還能放置寬度為屏幕寬的大通欄信息，已達(dá)到展示重要信息的目的。
4.根據(jù)權(quán)利要求2所述的方法，其特征在于: 如果按照背包算法排列出兩列信息塊最終無法齊整，我們需要計(jì)算出長列與短列的差值，如果差值小于某個(gè)范圍，把此差值平均相加到短列的每一個(gè)模塊中，如果差值大于某個(gè)范圍，則需要把此差值除以2，然后平均相加到短列，相減到長列，如果差值太大，則是其中每個(gè)信息的圖片過高的原因，我們對(duì)圖片計(jì)算出來的實(shí)際展示高度超過屏幕一半的進(jìn)行截取，已達(dá)到視覺上的平衡。
5.根據(jù)權(quán)利要求3所述的方法，其特征在于: 如果拉取的信息里面有服務(wù)器指定的需要在頂部或者底部通欄展示的，我們則直接把此信息按照通欄布局，放置在頂部或者底部，如果未指定展示，我們會(huì)放置圖片寬度大于某個(gè)范圍，并且圖片的寬高比例最近某個(gè)值的信息塊，通欄展示可以靈活多變的布局，特別的，當(dāng)某個(gè)信息塊的圖片寬或者高小于某個(gè)范圍值時(shí)，我們隊(duì)此模塊做文字模塊處理，可以靈活控制此信息的布局，以根除圖片展示模糊的問題。
6.根據(jù)權(quán)利要求4，5所述的方法，其特征在于，利用背包算法達(dá)到一個(gè)目的:有一個(gè)容量固定的背包(這里為兩列，固定高度為所有信息模塊總高度的和的一半)，有η個(gè)重量固定的物品(這里為信息模塊，高度是固定的)，我們需要得出一個(gè)組合，使得此組合放入此背包最適合，即最接近一半的高度，于是剩余的組合也是最接近一半的高度，于是得到兩列的高度相差最小。
【專利摘要】本發(fā)明公開了一種完整展示資訊信息的排版計(jì)算方法，以解決簡單布局實(shí)現(xiàn)的瀑布流無法輕松擴(kuò)展的缺點(diǎn)，從而可以提升開發(fā)進(jìn)度以及增加設(shè)計(jì)的靈活度，使用戶有更好的閱讀體驗(yàn)，定義瀑布流各個(gè)資訊塊顯示的相關(guān)屬性，確定各個(gè)資訊塊的排列順序，確定每個(gè)資訊塊的擺放位置，拉伸兩列中較短的一列，讓兩列資訊的底部齊平，使界面更美觀，將StrenchListView添加到PiScrollView中并在PiScrollView的父類XScrollView中做一些相關(guān)上拉刷新的操作。
【IPC分類】G06F17-25
【公開號(hào)】CN104598438
【申請(qǐng)?zhí)枴緾N201410845972
【發(fā)明人】不公告發(fā)明人
【申請(qǐng)人】深圳市英威諾科技有限公司
【公開日】2015年5月6日
【申請(qǐng)日】2014年12月31日