簡介

OneNote用了一段時間，度過最開始的蜜月期之后，在審視自己對知識管理軟件所期盼的同時，開始著手模仿OneNote iosApp的實現。

如果從可見場景的角度來分析，會發現她沒幾個頁面。既然這樣，就從門檻低的這條道出發，照貓畫虎，描一下oneNote是如何從代碼走到產品的！

我欣賞OneNote，喜歡隨處寫入、像紙一樣為所欲為、毫無拘束的特點。我嘗試通過技術如何把它變成現實，但在此之前，我們應該把該有的功能搭建好。

在這個系列中，預計分三部完成整個內容。

章節目錄：

• OneNote的一種模擬方法（上）：iOS主界面，標簽欄與正文摘要；
• OneNote的一種模擬方法（中）：側滑多筆記本切換；
• OneNote的一種模擬方法（下）：淺析文檔模型，從圖文混編開始。

              oneNoteDemo_v1

第一、起底OneNote，從歡迎頁開始

                                                                                              原版 oneNote歡迎頁

 

                                                          oneNote 歡迎頁模擬方法

歡迎頁如圖所示，實現這部分需要注意兩點：

• 頁面布局頂部"Office"標簽與Scroll結合，詳見startPageViewCtl類。
• 登錄頁按鈕并非iOS標準控件，使用占位button進行跳轉。

UIButton*bLoginBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];bLoginBtn.frame =CGRectMake(oSize.width * 2, SCREEN_HEIGHT / 1.96, SCREEN_WIDTH, 50);

第二、主界面：標簽欄讓正文選取更便利

noeNote主界面

oneNote主界面由兩部分組成：標簽頁和表視圖。標簽頁實現了多筆記的選取與切換，而表視圖實現筆記內文章的預覽。

標簽欄的使用，可以方便地實現多筆記本之間的切換，但其局限性在于當筆記本個數過多或者筆記名稱過長，標簽欄用起來就不那么友好了！

模擬多標簽欄的實現基礎在于單標簽頁(QMBTab)與標簽組(QMBTabBar)的定義。單標簽側重于自身的創建與渲染，單標簽的屬性多，但事件少。單標簽的行為都交由標簽組管理，比如創建AddTabItem、選中SelectTab和刪除RemoveTab等行為，還包括此類行為的代理didChange、willRemove、didRemove等。

說句題外話，記得北塔在看早期Firefox源碼時，曾驚嘆Firefox的頂部標簽欄設計。這得是吃了多少碗鹵煮火燒才憋出這么亮騷產品！Firefox的頂層標簽也有一個標簽控制管理器，所以說，只要你留心觀察，現在流行的技術你都能在若干年前看到她的影子。

我們繼續模擬oneNote的主頁面。標簽欄創建成功后，添加筆記摘要TableView。注意：

• DocContentModel 
• docPReviewCtl

代碼 : github.com/northtower

代碼中我盡量做到應有的注釋，本身沒什么難點，如果有問題，您可以給我回復。

小結

用了一段時間OneNote，準確地說一個多月吧。雖然也發現很多不如意的地方，但不可否認這是一款杰出的產品。有人說MSOffice 2016 for Mac是微軟的良心之作！良心還是狼心咱就不跟風了，我喜歡oneNote是她真能解決我需求，隨處修訂與頁層次主題是我最需要的功能。

這個demo做到現在才剛剛起步，模仿是為了換個角度了解它。學習的基礎是理解，理解的基礎是感受。只有你真正看清你要的是什么，你才能把它做出來。