iOS新聞類 內容界面設計思路

新聞內容頁要考慮的問題

• 發佈者編輯文章是什麼格式？簡單文本？markdown? 富文本編輯器？
  • 爲了圖文混排和文本的豐富性（標題，段落，加粗），建議使用markdown或者富文本編輯器。不使用簡單文本。
• 如何適配多個平臺？

方式1：

• 源碼構建，就是圖文混排了。能夠使用使用較低層的YYKit異步渲染將性能優化到極致。
• 缺點：渲染引擎實現難度蠻大的。

方式2：

• 使用webView,這種方式最簡單。有適配多平臺的自然屬性。
• 缺點：當多圖時，性能較差；交互自定義程度不高。

方式3：

原生+webView配合實現。

• 核心思想：webView渲染文本，並預留圖片視頻等耗時資源位置。使用原生組件加載圖片等資源並顯示。
• 具體實現：
  • 對webView進行封裝， 方便js和native調用
  • 在控制器中使用scrollView嵌入webView和tableView。webView展現內容，tableView負責展現廣告，相關推薦，評論等內容。 代碼控制webView，tableView的位置，高度，offset屬性。
  • 將html中圖片，video等替換成佔位符。注意寬高。（使用js）
  • 在load加載完後，獲取各item（圖片，video）的數據（位置，寛高，類型，url等）
  • 使用原生組件進行替換
  • 優化原生組件（循環使用，避免內存太高）
  • gif在滑動時中止展現， 能夠使用gif庫

效果

Demo

github.com/hejunm/wkTe…