ionic之基本佈局

目錄：

1. 簡介
   1. Hybrid vs. Others
   2. ionic
   3. CSS框架
2. 基本佈局
   1. 佈局模式
   2. 定高條塊：.bar
   3. .bar : 位置
   4. .bar : 嵌入子元素
   5. .bar : 嵌入input
   6. 內容：.content和.scroll-content

Hybrid vs. Others

要開發手機App，目前有三種方式：

原生/Native：使用原生SDK開發App。優點不用說，當你有足夠的資源，這是最理想的方式；缺點是對不同的 平臺要分別開發，成本高、週期長。 原生指令碼/NativeScript：將原生API封裝成JavaScript介面，這有點像前端的nodejs。NativeScript方式 與原生相比效能損失不大（據稱只有10%左右），優點是開發語言統一使用JavaScript，缺點是 要針對不同的平臺分別開發。 混合/Hybrid：使用web技術開發App，使用Cordova/PhoneGap之類進行打包封裝。優點是採用標準的web技術開發， 避免了不同平臺原生開發體系的學習，上手快、效率高；缺點是效能上有一定損失。 ionic屬於hybrid開發模式，本質上是將移動web應用與瀏覽器打包,優點和缺點都很明顯。 是否採用這種模式，需要根據具體情況綜合考慮。

不過在大多數場景下，如果你已經具備一定的web開發經驗，採用這種方式進入移動App開發領域，還是不錯的一個選擇。 畢竟，將產品低成本地開發出來並更快地推向市場，有時是最重要的事情。

ionic

ionic是一個強大的混合式/hybridHTML5移動開發框架，特點是使用標準的HTML、 CSS和JavaScript，開發跨平臺（目前支援：Android、iOS，計劃支援：Windows Phone、Firefox OS） 的原生App應用：

ionic主要包括三個部分：

CSS框架 – 提供原生App質感的CSS樣式模擬。ionic這部分的實現使用了ionicons圖示樣式庫。 JavaScript框架 – 提供移動Web應用開發框架。ionic基於AngularJS基礎框架開發，因此 自然地遵循AngularJS的框架約束；此外，ionic使用AngularJS UI Router實現前端路由。 命令列/CLI – 命令列工具集用來簡化應用的開發、構造和模擬執行。ionic命令列工具使用了 Cordova，依賴於平臺SDK（Android & iOS）實現將移動web專案打包成原生app。 由於ionic使用了HTML5和CSS3的一些新規範，所以要求 iOS7+/ Android4.1+。 在低於這些版本的手機上使用ionic開發的應用，有時會發生莫名其妙的問題。

CSS框架

如果你對AngularJS這樣的東西不感興趣，可以只使用ionic的CSS框架：直接在HTML中引入 ionic.css就可以了。

ionic的CSS框架主要提供預定義的CSS類，來幫助我們快速構建適用於手機端的UI。 ionic的預定義CSS類主要分四個方面：

基本佈局類 ionic將手機頁面的佈局模式基本抽象為三塊：頭、內容、尾。基本佈局類提供了 這幾個區域的CSS類。

顏色和圖示類 ionic定義了幾個配色方案CSS類，並使用ionicons提供的字型圖示類。

介面元件類 ionic定義了豐富的介面元件CSS類，讓HTML元素看起來像移動平臺的UI元件。

柵格系統類 和Bootstrap一樣，ionic也提供了柵格系統。不過ionic的實現是基於CSS3的FlexBox 模型，更為靈活。

佈局模式

手機App開發實踐中，使用者介面通常劃分為幾個區域 – 標題/header、內容/content和頁尾/footer。 微信採用的就是典型的三段佈局：

標題區總是位於螢幕頂部，頁尾區總是位於螢幕底部，而內容區佔據剩餘的空間。 ionic使用以下CSS類宣告區域性質:

.bar.bar-header- 宣告元素為標題區 .bar.bar-footer – 宣告元素為頁尾區.content- 宣告元素為內容區

定高條塊：.bar

樣式.bar將元素宣告為螢幕上絕對定位的塊狀區域，具有 固定的高度（44px）：

<any class="bar">...</any>

一旦元素應用了.bar樣式，就可以繼續選用兩類預定義樣式來進一步 宣告元素及其內容的外觀：

1. 同級樣式 – 同級樣式與.bar應用在同一元素上，宣告元素的位置、配色等。

2. 下級樣式 – 下級樣式只能應用在.bar的子元素上，宣告子元素的大小等特徵。

   

.bar : 位置

ionic使用以下樣式定義條塊的位置：

.bar-header – 置頂 .bar-subheader – header之下置頂 .bar-footer – 置底 .bar-subfooter – footer之上置底 在騰訊新聞App中，你可以看到，使用了三個條塊：標題、副標題、頁尾：

.bar : 嵌入子元素

在ionic中，有三種.bar子元素的樣式是預定義的：

標題文字 – 對包含標題文字的元素應用.title樣式，通常使用h1元素： … 按鈕 – 對用作按鈕的元素，應用.button樣式，通常使用button 或a元素作為按鈕。注意按鈕將使用.bar的配色方案： … 工具欄 – 工具欄包含一組按鈕。對用作工具欄的元素，應用.button-bar樣式，通常 使用div元素作為工具欄： …

.bar : 嵌入input

一種常見的UI模式是在標題欄中嵌入搜尋欄，比如大眾點評：

在.bar元素中嵌入input元素，需要注意兩點：

1. 在條塊元素上應用.item-input-inset樣式

2. 將input包裹在應用.item-input-wrapper樣式的元素內 這是因為，在ionic的實現中，.bar中的.input 樣式定義如下：

    .bar.item-input-inset{
        .item-input-wrapper{
            .input{
                ...
            }
        }
    }

內容：.content和.scroll-content

ionic預定義了兩個內容容器樣式：

.content – 流式定位，內容元素在文件流中按順序定位 .scroll-content – 絕對定位，內容元素佔滿整個螢幕 這兩種樣式都可以使用以下樣式進一步確定位置及範圍：

 

http://www.angularjs.cn/A127

如何聯絡我：【萬里虎】www.bravetiger.cn
【QQ】3396726884 （諮詢問題100元起，幫助解決問題500元起）
【部落格】http://www.cnblogs.com/kenshinobiy/