我發(fā)現(xiàn)制作一個(gè)應(yīng)用最好從基礎(chǔ)布局開(kāi)始 -- 他基本可以看作是線圖聯(lián)系食呻，幫助固化應(yīng)用的需求流炕。我們這個(gè)應(yīng)用的布局沒(méi)啥特別的東西，但是有一個(gè)需要添加的用戶界面元素需要一點(diǎn)點(diǎn)技巧仅胞。
我們這個(gè)應(yīng)用有兩個(gè)頁(yè)面每辟，主頁(yè)和滑頁(yè)，本課中將會(huì)制作他們的模板干旧∏郏滑頁(yè)非常簡(jiǎn)單，所以本課的大部分都是關(guān)于主頁(yè)的椎眯。

Home頁(yè)

主頁(yè)有一個(gè)用戶拍的照片的列表挠将，用戶可以在其中刪除它們，一個(gè)拍新的照片的選項(xiàng)（只有在當(dāng)日沒(méi)拍的情況下）编整，一個(gè)展示圖片滑頁(yè)的選項(xiàng)舔稀。效果圖上這樣的：

4.4.1.jpg

這個(gè)布局最有技巧性的是頂部的“SMILE!”圖片，實(shí)際上是一個(gè)按鈕掌测，用于拍照的按鈕内贮，同時(shí)，他也只會(huì)在用戶當(dāng)日沒(méi)有拍照的情況下才顯示。如果用戶當(dāng)日沒(méi)有拍照的話就不會(huì)顯示的夜郁。
我們先從基礎(chǔ)布局入手什燕，然后看怎么實(shí)現(xiàn)拍照按鈕。
> 修改src/pages/home/home.html 為如下：

<ion-header>
<ion-navbar color="danger">
<ion-title>
<img src="assets/images/logo.png" />
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="playSlideshow()"><ion-icon name="play"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-sliding>
<ion-item>
<img src="http://placehold.it/100x100" />
<ion-badge item-right light>0 days ago</ion-badge>
</ion-item>
<ion-item-options>
<button ion-button icon-only light (click)="removePhoto(photo)"><ion-icon name="trash"></ion-icon></button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>

我們把這個(gè)模板打碎來(lái)講解拂酣。模板的第一個(gè)部分是導(dǎo)航條：

<ion-navbar color="danger">
<ion-title>
<img src="assets/images/logo.png" />
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="playSlideshow()"><ion-icon name="play"></ion-icon></button>
</ion-buttons>
</ion-navbar>

ion-navbar 允許我們添加一個(gè)頁(yè)首條到我們的應(yīng)用頂部用于持有按鈕秋冰，標(biāo)題，甚至在需要的時(shí)候直接整合Ionic導(dǎo)航系統(tǒng)來(lái)展示一個(gè)回退按鈕婶熬。
我們給navbar添加了danger屬性將他樣式化到我們的danger顏色剑勾，這個(gè)顏色變了色在variables.scss中定義的（后續(xù)會(huì)配置）。
在navbar中我們用到了ion-title赵颅，基本就是用來(lái)展示當(dāng)前頁(yè)面的文本標(biāo)題和logo的虽另。同時(shí)我們也用到了ion-buttons來(lái)創(chuàng)建按鈕。通過(guò)指定end屬性饺谬，所有按鈕將被排列在右邊捂刺，當(dāng)我們指定的是‘start’屬性的時(shí)候，將會(huì)從左邊開(kāi)始排列募寨。
最后族展，我們將所有按鈕列入ion-buttons中。這個(gè)按鈕用到了一個(gè)play圖標(biāo)拔鹰，有一個(gè)點(diǎn)擊處理器仪缸，處理器將調(diào)用home.ts文件里的playSlideshow()函數(shù)（這個(gè)函數(shù)當(dāng)前未創(chuàng)建）。
模板接下來(lái)的部分是內(nèi)容部分列肢，包括了一個(gè)列表：

<ion-content>
<ion-list>
<ion-item-sliding>
<ion-item>
<img src="http://placehold.it/100x100" />
<ion-badge item-right light>0 days ago</ion-badge>
</ion-item>
<ion-item-options>
<button ion-button icon-only color="light" (click)="removePhoto(photo)"><ion-icon name="trash"></ion-icon></button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>

在看列表之前恰画，我們看到所有東西都被包圍在ion-content里 -- 這就是頁(yè)面主體內(nèi)容展示的地方，在大部分情況下除了導(dǎo)航條外的所有內(nèi)容都要放在這里瓷马。
跟一個(gè)普通列表其實(shí)也差不多拴还，看：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Ionic里面創(chuàng)建列表的方式基本一樣：

<ion-list>
    <ion-item></ion-item>
    <ion-item></ion-item>
    <ion-item></ion-item>
</ion-list>

當(dāng)然，我們的看起來(lái)稍微復(fù)雜點(diǎn)欧聘，所以我們還是來(lái)研究研究片林。首先與常理不一樣的是我們?cè)?em>ion-list加入了no-lines屬性。就像給navbar添加的danger屬性一樣怀骤，這個(gè)屬性會(huì)對(duì)我們的列表起作用费封，他會(huì)使列表項(xiàng)不顯示邊緣。
接下來(lái)的變得多一點(diǎn)技巧性晒喷，也就是我們?cè)O(shè)置滑動(dòng)項(xiàng)的地方孝偎。一個(gè)<ion-sliding-item>访敌，和普通的<ion-item>不同凉敲，他有兩套內(nèi)容 -- 列表項(xiàng)本身，然后是<ion-item-options>在用戶滑動(dòng)的時(shí)候可見(jiàn)。
第一部分<ion-sliding-item>內(nèi)的代碼是普通的<ion-item>定義爷抓。項(xiàng)里面是用戶拍的照片（我們最后還是會(huì)循環(huán)所有相片）势决，但是現(xiàn)在我們只是用了個(gè)圖片占了個(gè)位置。我們也在項(xiàng)的右邊添加了一個(gè)勛章用于展示這個(gè)照片上多久之前拍的蓝撇。我們現(xiàn)在用的都是假數(shù)據(jù)果复，后面再用真數(shù)據(jù)。
最后渤昌，我們來(lái)到了代碼的第二部分,<ion-item-options>虽抄，僅用來(lái)展示活動(dòng)展示的內(nèi)容。當(dāng)前應(yīng)用中独柑，我們只是添加了一個(gè)‘Delete’按鈕迈窟，當(dāng)點(diǎn)擊他的時(shí)候會(huì)傳入當(dāng)前照片的引用。現(xiàn)在傳入的photo引用不會(huì)有實(shí)際效果（調(diào)用的函數(shù)也不會(huì)有效果因?yàn)槎紱](méi)創(chuàng)建呢）忌栅，稍后制作相片循環(huán)的時(shí)候我們?cè)谟懻撊绾谓⑦@個(gè)應(yīng)用车酣。
現(xiàn)在，我們來(lái)添加之前講到的那個(gè)條件照片按鈕索绪。
> 修改 src/pages/home/home.html 的 content 部分為如下：

<ion-content>
   <ion-list>
       <button ion-item *ngIf="!photoTaken" detail-none (click)="takePhoto()">
           <img src="assets/images/smile.png" />
       </button>
       <ion-item-sliding>
           <ion-item>
               <img src="http://placehold.it/100x100" />
               <ion-badge item-right light>0 days ago</ion-badge>
           </ion-item>
           <ion-item-options>
               <button ion-button icon-only color="light" (click)="removePhoto(photo)"><ion-icon name="trash"></ion-icon></button>
           </ion-item-options>
       </ion-item-sliding>
   </ion-list>
</ion-content>

注意湖员，我們?cè)诹斜砝锏幕瑒?dòng)選項(xiàng)上面加入了一個(gè)新的項(xiàng)，但是我們不是直接用的<ion-item>而是用的button然后給他使用ion-item指令瑞驱。在視覺(jué)上娘摔，這兩種方法其實(shí)是一樣的，但是在移動(dòng)設(shè)備上除了button和a之外的點(diǎn)擊處理都會(huì)有一點(diǎn)延遲钱烟。我們不想要這個(gè)延遲晰筛，所以我們使用按鈕。
由于按鈕會(huì)默認(rèn)有自帶樣式的拴袭，而我們這里不想要那些樣式读第，所以我們給他添加了detail-none屬性。當(dāng)然拥刻，我們也給他添加了一個(gè)點(diǎn)擊處理器用于觸發(fā)后面將會(huì)創(chuàng)建的takePhoto函數(shù)怜瞒，但是這里最重要的還是 ngIf 指令。
ngIf 是Angular2提供的條件指令之一般哼，允許我們根據(jù)數(shù)據(jù)改變模板顯示吴汪。在現(xiàn)在的模板中，含有 ngIf 指令的元素只會(huì)在表達(dá)式為true的時(shí)候才會(huì)全部顯示蒸眠。由于我們的表達(dá)式是這樣的：

*ngIf="!photoTaken"

所以我們的按鈕只有在photoTaken為false的時(shí)候才會(huì)顯示漾橙。稍后，我們會(huì)在home.ts中創(chuàng)建一個(gè)photoTaken變量用于追蹤用戶當(dāng)日是否拍照楞卡。
現(xiàn)在運(yùn)行以下命令的話：

ionic serve

會(huì)看到如下效果圖：

4.4.2.jpg

顯然霜运，還有很多事情需要去完成脾歇，但是目前我們只需要對(duì)主頁(yè)做這么多就夠了，所以淘捡，我們繼續(xù)Slideshow 頁(yè)藕各。

Slideshow 頁(yè)

就像我之前說(shuō)過(guò)的那樣，slideshow頁(yè)將會(huì)超級(jí)簡(jiǎn)單焦除。他就是一個(gè)彈出的模態(tài)框展示所有用戶拍的照片的滑頁(yè)激况。我們只需要為照片提供一個(gè)容器，一個(gè)按鈕來(lái)重啟滑頁(yè)和一個(gè)按鈕來(lái)關(guān)閉頁(yè)面就可以了膘魄。
> 修改 src/pages/slideshow/slideshow.html 為如下：

<ion-header>
    <ion-toolbar color="danger">
        <ion-title>Play</ion-title>
        <ion-buttons start>
            <button ion-button icon-only (click)="playPhotos()"><ion-icon name="refresh"></ion-icon></button>
        </ion-buttons>
        <ion-buttons end>
            <button ion-button icon-only (click)="closeModal()"><ion-icon name="close"></ion-icon></button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div class="image-container">
        <img #imagePlayer id="imagePlayer" src = "" />
    </div>
</ion-content>

你已經(jīng)知道navbar和按鈕咋工作的了乌逐，所以唯一的新玩意是圖片播放器（image player）。我們只是在內(nèi)容顯示區(qū)域添加了一個(gè)圖片元素创葡。稍后黔帕，我們會(huì)添加一些代碼循環(huán)所有用戶的照片，通過(guò)改變src屬性來(lái)展示所有照片蹈丸。我們只要在類里面拿到img的引用就可以了成黄，所以我們創(chuàng)建了一個(gè)局部變量 #imagePlayer 這樣可以直接在類定義中拿到他了。
目前而言逻杖，以上就是我們本課的工作量 -- 告訴過(guò)你很簡(jiǎn)單的奋岁。

總結(jié)

現(xiàn)在，我們應(yīng)用的兩個(gè)頁(yè)面都設(shè)置好了荸百，下節(jié)課將會(huì)進(jìn)行一些更有趣的事情闻伶。實(shí)際上，他可能是最有趣的課程之一够话，因?yàn)槲覀円獙W(xué)習(xí)整合本機(jī)Camera API然后用他來(lái)拍照蓝翰。