IOS客戶端設計課件

第7章IOS客戶端設計倚動實驗室1第7章IOS客戶端設計倚動實驗室1CONTENTS7.1系統(tǒng)整理流程圖設計目錄7.2各模塊詳細設計7.3“豹考通”IOS客戶端程序結(jié)構(gòu)分析2CONTENTS7.1系統(tǒng)整理流程圖設計目錄7.2各模塊詳細本章我們將會介紹“豹考通”在IOS系統(tǒng)上的設計與實現(xiàn)的過程，從界面到程序流程設計，再到模塊整合實現(xiàn)，最后到應用的完成。通過本章的學習，讀者能夠了解到IOS手機客戶端開發(fā)的整體流程。本章中，會講解“豹考通”的大部分模塊的分析與設計過程，為讀者提供實現(xiàn)的思路，但在具體的功能模塊實現(xiàn)部分，僅僅只會對幾個模塊進行實現(xiàn)，其他的模塊供讀者在課后練習。豹考通IOS端開發(fā)需要用到的數(shù)據(jù)庫表有：①專業(yè)表②地區(qū)表

③批次表

④科類表⑤學校表⑥省控線表⑦學校錄取線表3本章我們將會介紹“豹考通”在IOS系統(tǒng)上的設計與實現(xiàn)7.1系統(tǒng)整體流程圖設計根據(jù)系統(tǒng)需求分析可知，“豹考通”的主要功能包括以下幾點：1.歡迎引導界面2.我的高考（個人信息）3.省控線查詢4.投檔線查詢5.學校推薦6.投檔線預測7.關于我們下面我們列出了系統(tǒng)的功能結(jié)構(gòu)圖，如圖7-1所示。圖7-1功能結(jié)構(gòu)圖47.1系統(tǒng)整體流程圖設計根據(jù)系統(tǒng)需求分析可知，“豹考通”的主7.1.1“我的高考”流程“我的高考”的流程主要是用戶填寫高考信息，其中如果用戶的生源地填寫“江西”，那么廣告位信息的顯示將和“非江西”生源地用戶不一樣，“我的高考”流程圖如圖7-2所示。圖7-2“我的高考”流程圖57.1.1“我的高考”流程“我的高考”的流程主要是用“我的高考”界面跳轉(zhuǎn)圖如下7-3所示。模塊包括了6個界面，我的高考模塊主界面，科類填寫界面、批次填寫界面、生源地填寫界面、分數(shù)填寫界面和廣告信息界面。其中科類填寫、批次填寫和生源地填寫3個界面需要界面跳轉(zhuǎn)，其他的界面則在相關信息基礎上做出修改屏顯示。圖7-3“我的高考”模塊界面跳轉(zhuǎn)圖6“我的高考”界面跳轉(zhuǎn)圖如下7-3所示。模塊包括了6個7.1.2“省控線查詢”流程在查詢省控線之前，用戶需要選擇要查詢的省份，查詢的年份，科類和批次?？祁惡团慰梢匀笔。瑸椤安幌蕖?，“省控線查詢”流程圖如圖7-4所示。查詢前，用戶需要選擇查詢的省市地區(qū)，因為全國省市地區(qū)信息是以plist文件形式保存在本地，所以這里不需要讀取網(wǎng)絡數(shù)據(jù)。選擇好需要查詢的省份地區(qū)信息后，因為查詢需要訪問網(wǎng)絡，所以在進入查詢省控線界面前，系統(tǒng)會對手機的網(wǎng)絡連通狀態(tài)進行檢查，如果手機并未連網(wǎng)，或者網(wǎng)絡信號較差，那么系統(tǒng)則會提示用戶連網(wǎng)或使用wifi進行網(wǎng)絡訪問。查詢的結(jié)果根據(jù)用戶選擇的查詢條件對應的展示在UITableView表視圖中。圖7-4“省控線查詢”流程圖77.1.2“省控線查詢”流程在查詢省控線之前，用戶需7.1.3“投檔線查詢”流程和省控線查詢類似，用戶在查詢投檔線之前需要選擇省市，學校，還要選擇年份科類和批次，“投檔線查詢”流程圖如圖7-5所示。與“省控線查詢”模塊不同的是，“投檔線查詢”模塊在選擇省市地區(qū)的基礎上，還需要選擇學校，所以判斷網(wǎng)絡連接情況會在選擇學校前，因為學校的選擇是需要應用訪問服務器端接口，返回數(shù)據(jù)，如果用戶未聯(lián)網(wǎng)，則不需要進入到下面的界面。圖7-5投檔線查詢流程圖87.1.3“投檔線查詢”流程和省控線查詢類似，用戶在7.1.4“推薦學?！绷鞒淘凇巴扑]學校”功能中，首先系統(tǒng)會從本地讀取用戶已經(jīng)輸入的信息，接下來用戶需要選擇批次，推薦傾向和目標省市，傾向包括冒險，保守和穩(wěn)妥，通過這三個傾向推薦學校，考生可能被錄取的概率越來越大。目標省市是代表用戶想要去往讀書的省市，“推薦學校”流程圖如圖7-6所示。圖7-6推薦學校流程圖97.1.4“推薦學?！绷鞒淘凇巴扑]學校”功能中，首先7.1.5“投檔線預測”流程投檔預測之前，系統(tǒng)也會從本地讀取用戶個人信息，接下來用戶需要分別選擇批次和學校。與推薦學校不同的是，投檔線預測在界面載入時，就會從服務器端讀取一次2014年投檔線的最新信息。所以在界面顯示時，系統(tǒng)還需要判斷用戶是否連入網(wǎng)絡，若沒有聯(lián)網(wǎng)，就不需要再去請求網(wǎng)絡數(shù)據(jù)；若聯(lián)網(wǎng)，但是選擇的批次無投檔線信息，那么就需要用戶自己輸入投檔線（0-750），“投檔線預測”流程圖如圖7-7所示。圖7-7投檔線預測流程圖107.1.5“投檔線預測”流程投檔預測之前，系統(tǒng)也會從7.2各模塊詳細設計7.2.1歡迎界面根據(jù)我們的功能界面設計分析可以得到，實現(xiàn)歡迎界面滑動效果的控件是UIScrollView，然后設置UIControl使得點擊UIControl的點或者滑動UIScrollView能夠讓界面左右滑動。界面內(nèi)容的設計是項目組美工使用Window下CoreldrawX6繪制的。117.2各模塊詳細設計7.2.1歡迎界面根據(jù)我們的功能7.2.2我的高考“我的高考”模塊是用于顯示用戶的基本高考信息，包括科類、高考成績、批次和生源地。在基本信息下方有一個廣告位用于相關宣傳。顯示信息我們可以使用UITableView表視圖來顯示用戶信息。使用UIAlertView讓用戶輸入，因為UIAlertView默認的Style是提示框，為了能讓用戶輸入，所以我們這里選擇UIAlertView的Style為UIAlertViewStylePlainTextInput，這樣用戶就能輸入相關信息，而且需要對用戶輸入的分數(shù)做出判斷，0-750之內(nèi)的數(shù)值才有效，否則需要用戶重新輸入。需要選擇科類、生源地和批次信息的單元格cell就要創(chuàng)建子視圖，將可選信息放在子視圖的UITableView表視圖中，用戶選擇信息后將cell的內(nèi)容返回到“我的高考模塊”中，并顯示。這里就涉及到一個關鍵技術-視圖控制器之間值的傳遞。我們這里使用的是協(xié)議代理。根據(jù)需求分析可以得到，廣告位的顯示有兩種情況：當考生生源地為江西時，顯示的是和江西機電學院相關的信息；而非江西考生，顯示的是南昌倚動軟件有限公司聯(lián)系方式。這里我們就需要對考生生源地信息進行判斷。所有的信息我們都通過NSUserDefaults存儲到本地文件中，供程序讀取。127.2.2我的高考“我的高考”模塊是用于顯示用戶的基7.2.3省控線查詢根據(jù)7.2節(jié)中錄取線查詢的流程圖，我們歸納出錄取線查詢功能的使用步驟：1.選擇省份2.選擇學校（可選）3.選擇年份、科類和批次4.單擊查詢按鈕，返回結(jié)果。這里我們需要創(chuàng)建3個子視圖控制器，分別用于顯示省份、學校和查詢界面。在查詢界面中，選擇部分我們使用的是UIPickerView選擇器，并通過它的協(xié)議代理方法將選擇的信息返回給系統(tǒng)。最后分數(shù)的顯示還是使用UITableView表視圖。137.2.3省控線查詢根據(jù)7.2節(jié)中錄取線查詢的流程圖，我們歸7.2.4推薦學校圖7-8推薦學校界面由圖7-8推薦學校界面并結(jié)合需求分析可以看出，“推薦學?！蹦K主要由3個部分組成：1.個人信息欄，在“我的高考”模塊中，我們將用戶的高考信息保存在本地，在個人信息欄中我們只需要通過NSUserDefaults讀取即可。但需要注意的是，這個信息是需要實時更新的，也就是說當用戶修改了個人信息之后，個人信息欄的相關信息也要做出對應的改變。所以我們就在viewDidAppear方法中去加載個人信息，保證每次顯示該界面時信息都是最新的。2.相關信息選擇欄，在這里我們選擇批次、目標省市和推薦的傾向，這些也都是接口中的參數(shù)選項，是必選項。批次和傾向的選擇我們是通過UISegmentedControl來實現(xiàn)，而目標省市的選擇是通過彈出模態(tài)視圖（ModalViewController）來實現(xiàn)，這里也需要用到協(xié)議代理將信息傳回視圖控制器。3.推薦結(jié)果欄，在該欄中，顯示了系統(tǒng)為考生推薦的學校信息，點擊學校名稱，還會彈出學校專業(yè)的信息。信息的顯示是通過UITableView來實現(xiàn)。147.2.4推薦學校圖7-8推薦學校界面由圖7-8推薦7.2.5投檔線預測“投檔預測”模塊也可以分為3個部分：1.個人信息欄，個人信息顯示在此區(qū)域，信息包括科類和生源地。2.相關信息選擇欄，和“推薦學?！蹦K不同的是，省控線分數(shù)是在界面顯示時獲取的網(wǎng)絡數(shù)據(jù)，如果該批次沒有相關信息，那就需要用戶自己輸入。3.預測結(jié)果欄，顯示最后預測投檔線的結(jié)果，包括冒險分、保守分和穩(wěn)妥分。如圖7-9所示。圖7-9投檔預測界面157.2.5投檔線預測“投檔預測”模塊也可以分為3個部分：圖77.3“豹考通”IOS客戶端程序結(jié)構(gòu)分析7.3.1整體程序結(jié)構(gòu)分析圖7-10“豹考通”IOS客戶端程序結(jié)構(gòu)圖·豹考通：這個部分是程序的main函數(shù)和AppDelegate，也就是整個程序的入口部分，AppDelegate也是整個應用生命周期的開始?！せA視圖：該部分定義了應用根視圖控制器與基導航控制器，是整個程序框架的基石?！の业母呖迹涸摬糠诛@示了高考學子高考的基本信息?！ね扑]學校：該部分實現(xiàn)了幫助考生推薦學校的功能?！し謹?shù)查詢：該部分實現(xiàn)了考生對學校分數(shù)線查詢的功能?！mage.xcassets：這個部分放置應用所包含的圖片文件，包括應用圖標，啟動圖片等等。·SupportingFiles：該部分大部分放置與應用有關的第三方庫或者工具類?！aokaoHelperTests：這個部分放置了與應用測試相關的文件，開發(fā)時不需要用到。·Frameworks：該部分放置了與此應用相關的庫文件?！roducts：這個部分是產(chǎn)品發(fā)布后相關文件信息，開發(fā)時也不需要用到。

167.3“豹考通”IOS客戶端程序結(jié)構(gòu)分析7.3.1整體程序結(jié)在上述10個部分中，有6個部分是由系統(tǒng)自動為我們創(chuàng)建，除了我們自己應用中的模塊：基礎視圖、我的高考、推薦學校和分數(shù)查詢。讀者在開發(fā)時，最好將對應的文件放入相應的結(jié)構(gòu)中，這樣利于開發(fā)時文件的查找。7.3.2子功能模塊結(jié)構(gòu)分析圖7-11基礎視圖模塊文件結(jié)構(gòu)圖圖7-12我的高考模塊文件結(jié)構(gòu)圖17在上述10個部分中，有6個部分是由系統(tǒng)自動為我們創(chuàng)建圖7-13推薦學校模塊文件信息圖圖7-14分數(shù)查詢模塊文件結(jié)構(gòu)信息圖18圖7-13推薦學校模塊文件信息圖圖7-14分數(shù)查詢模塊文圖7-15SupportingFiles模塊文件結(jié)構(gòu)信息圖課后練習1、思考IOS端界面設計與Android端界面設計有哪些異同？2、思考IOS端界面跳轉(zhuǎn)傳值的方式，在本章中，傳值的方法使用的是UINavigationController的PushViewController方法，還有哪些界面?zhèn)髦捣椒ǎ坎⒈容^它們的優(yōu)缺點。3、將本章7.2.5小節(jié)“投檔預測”功能模塊用自己的語言描述其設計的思路，以及功能實現(xiàn)的流程。19圖7-15SupportingFiles模塊文件結(jié)構(gòu)信20202121第7章IOS客戶端設計倚動實驗室22第7章IOS客戶端設計倚動實驗室1CONTENTS7.1系統(tǒng)整理流程圖設計目錄7.2各模塊詳細設計7.3“豹考通”IOS客戶端程序結(jié)構(gòu)分析23CONTENTS7.1系統(tǒng)整理流程圖設計目錄7.2各模塊詳細本章我們將會介紹“豹考通”在IOS系統(tǒng)上的設計與實現(xiàn)的過程，從界面到程序流程設計，再到模塊整合實現(xiàn)，最后到應用的完成。通過本章的學習，讀者能夠了解到IOS手機客戶端開發(fā)的整體流程。本章中，會講解“豹考通”的大部分模塊的分析與設計過程，為讀者提供實現(xiàn)的思路，但在具體的功能模塊實現(xiàn)部分，僅僅只會對幾個模塊進行實現(xiàn)，其他的模塊供讀者在課后練習。豹考通IOS端開發(fā)需要用到的數(shù)據(jù)庫表有：①專業(yè)表②地區(qū)表

③批次表

④科類表⑤學校表⑥省控線表⑦學校錄取線表24本章我們將會介紹“豹考通”在IOS系統(tǒng)上的設計與實現(xiàn)7.1系統(tǒng)整體流程圖設計根據(jù)系統(tǒng)需求分析可知，“豹考通”的主要功能包括以下幾點：1.歡迎引導界面2.我的高考（個人信息）3.省控線查詢4.投檔線查詢5.學校推薦6.投檔線預測7.關于我們下面我們列出了系統(tǒng)的功能結(jié)構(gòu)圖，如圖7-1所示。圖7-1功能結(jié)構(gòu)圖257.1系統(tǒng)整體流程圖設計根據(jù)系統(tǒng)需求分析可知，“豹考通”的主7.1.1“我的高考”流程“我的高考”的流程主要是用戶填寫高考信息，其中如果用戶的生源地填寫“江西”，那么廣告位信息的顯示將和“非江西”生源地用戶不一樣，“我的高考”流程圖如圖7-2所示。圖7-2“我的高考”流程圖267.1.1“我的高考”流程“我的高考”的流程主要是用“我的高考”界面跳轉(zhuǎn)圖如下7-3所示。模塊包括了6個界面，我的高考模塊主界面，科類填寫界面、批次填寫界面、生源地填寫界面、分數(shù)填寫界面和廣告信息界面。其中科類填寫、批次填寫和生源地填寫3個界面需要界面跳轉(zhuǎn)，其他的界面則在相關信息基礎上做出修改屏顯示。圖7-3“我的高考”模塊界面跳轉(zhuǎn)圖27“我的高考”界面跳轉(zhuǎn)圖如下7-3所示。模塊包括了6個7.1.2“省控線查詢”流程在查詢省控線之前，用戶需要選擇要查詢的省份，查詢的年份，科類和批次?？祁惡团慰梢匀笔?，為“不限”，“省控線查詢”流程圖如圖7-4所示。查詢前，用戶需要選擇查詢的省市地區(qū)，因為全國省市地區(qū)信息是以plist文件形式保存在本地，所以這里不需要讀取網(wǎng)絡數(shù)據(jù)。選擇好需要查詢的省份地區(qū)信息后，因為查詢需要訪問網(wǎng)絡，所以在進入查詢省控線界面前，系統(tǒng)會對手機的網(wǎng)絡連通狀態(tài)進行檢查，如果手機并未連網(wǎng)，或者網(wǎng)絡信號較差，那么系統(tǒng)則會提示用戶連網(wǎng)或使用wifi進行網(wǎng)絡訪問。查詢的結(jié)果根據(jù)用戶選擇的查詢條件對應的展示在UITableView表視圖中。圖7-4“省控線查詢”流程圖287.1.2“省控線查詢”流程在查詢省控線之前，用戶需7.1.3“投檔線查詢”流程和省控線查詢類似，用戶在查詢投檔線之前需要選擇省市，學校，還要選擇年份科類和批次，“投檔線查詢”流程圖如圖7-5所示。與“省控線查詢”模塊不同的是，“投檔線查詢”模塊在選擇省市地區(qū)的基礎上，還需要選擇學校，所以判斷網(wǎng)絡連接情況會在選擇學校前，因為學校的選擇是需要應用訪問服務器端接口，返回數(shù)據(jù)，如果用戶未聯(lián)網(wǎng)，則不需要進入到下面的界面。圖7-5投檔線查詢流程圖297.1.3“投檔線查詢”流程和省控線查詢類似，用戶在7.1.4“推薦學?！绷鞒淘凇巴扑]學?！惫δ苤?，首先系統(tǒng)會從本地讀取用戶已經(jīng)輸入的信息，接下來用戶需要選擇批次，推薦傾向和目標省市，傾向包括冒險，保守和穩(wěn)妥，通過這三個傾向推薦學校，考生可能被錄取的概率越來越大。目標省市是代表用戶想要去往讀書的省市，“推薦學?！绷鞒虉D如圖7-6所示。圖7-6推薦學校流程圖307.1.4“推薦學?！绷鞒淘凇巴扑]學?！惫δ苤?，首先7.1.5“投檔線預測”流程投檔預測之前，系統(tǒng)也會從本地讀取用戶個人信息，接下來用戶需要分別選擇批次和學校。與推薦學校不同的是，投檔線預測在界面載入時，就會從服務器端讀取一次2014年投檔線的最新信息。所以在界面顯示時，系統(tǒng)還需要判斷用戶是否連入網(wǎng)絡，若沒有聯(lián)網(wǎng)，就不需要再去請求網(wǎng)絡數(shù)據(jù)；若聯(lián)網(wǎng)，但是選擇的批次無投檔線信息，那么就需要用戶自己輸入投檔線（0-750），“投檔線預測”流程圖如圖7-7所示。圖7-7投檔線預測流程圖317.1.5“投檔線預測”流程投檔預測之前，系統(tǒng)也會從7.2各模塊詳細設計7.2.1歡迎界面根據(jù)我們的功能界面設計分析可以得到，實現(xiàn)歡迎界面滑動效果的控件是UIScrollView，然后設置UIControl使得點擊UIControl的點或者滑動UIScrollView能夠讓界面左右滑動。界面內(nèi)容的設計是項目組美工使用Window下CoreldrawX6繪制的。327.2各模塊詳細設計7.2.1歡迎界面根據(jù)我們的功能7.2.2我的高考“我的高考”模塊是用于顯示用戶的基本高考信息，包括科類、高考成績、批次和生源地。在基本信息下方有一個廣告位用于相關宣傳。顯示信息我們可以使用UITableView表視圖來顯示用戶信息。使用UIAlertView讓用戶輸入，因為UIAlertView默認的Style是提示框，為了能讓用戶輸入，所以我們這里選擇UIAlertView的Style為UIAlertViewStylePlainTextInput，這樣用戶就能輸入相關信息，而且需要對用戶輸入的分數(shù)做出判斷，0-750之內(nèi)的數(shù)值才有效，否則需要用戶重新輸入。需要選擇科類、生源地和批次信息的單元格cell就要創(chuàng)建子視圖，將可選信息放在子視圖的UITableView表視圖中，用戶選擇信息后將cell的內(nèi)容返回到“我的高考模塊”中，并顯示。這里就涉及到一個關鍵技術-視圖控制器之間值的傳遞。我們這里使用的是協(xié)議代理。根據(jù)需求分析可以得到，廣告位的顯示有兩種情況：當考生生源地為江西時，顯示的是和江西機電學院相關的信息；而非江西考生，顯示的是南昌倚動軟件有限公司聯(lián)系方式。這里我們就需要對考生生源地信息進行判斷。所有的信息我們都通過NSUserDefaults存儲到本地文件中，供程序讀取。337.2.2我的高考“我的高考”模塊是用于顯示用戶的基7.2.3省控線查詢根據(jù)7.2節(jié)中錄取線查詢的流程圖，我們歸納出錄取線查詢功能的使用步驟：1.選擇省份2.選擇學校（可選）3.選擇年份、科類和批次4.單擊查詢按鈕，返回結(jié)果。這里我們需要創(chuàng)建3個子視圖控制器，分別用于顯示省份、學校和查詢界面。在查詢界面中，選擇部分我們使用的是UIPickerView選擇器，并通過它的協(xié)議代理方法將選擇的信息返回給系統(tǒng)。最后分數(shù)的顯示還是使用UITableView表視圖。347.2.3省控線查詢根據(jù)7.2節(jié)中錄取線查詢的流程圖，我們歸7.2.4推薦學校圖7-8推薦學校界面由圖7-8推薦學校界面并結(jié)合需求分析可以看出，“推薦學?！蹦K主要由3個部分組成：1.個人信息欄，在“我的高考”模塊中，我們將用戶的高考信息保存在本地，在個人信息欄中我們只需要通過NSUserDefaults讀取即可。但需要注意的是，這個信息是需要實時更新的，也就是說當用戶修改了個人信息之后，個人信息欄的相關信息也要做出對應的改變。所以我們就在viewDidAppear方法中去加載個人信息，保證每次顯示該界面時信息都是最新的。2.相關信息選擇欄，在這里我們選擇批次、目標省市和推薦的傾向，這些也都是接口中的參數(shù)選項，是必選項。批次和傾向的選擇我們是通過UISegmentedControl來實現(xiàn)，而目標省市的選擇是通過彈出模態(tài)視圖（ModalViewController）來實現(xiàn)，這里也需要用到協(xié)議代理將信息傳回視圖控制器。3.推薦結(jié)果欄，在該欄中，顯示了系統(tǒng)為考生推薦的學校信息，點擊學校名稱，還會彈出學校專業(yè)的信息。信息的顯示是通過UITableView來實現(xiàn)。357.2.4推薦學校圖7-8推薦學校界面由圖7-8推薦7.2.5投檔線預測“投檔預測”模塊也可以分為3個部分：1.個人信息欄，個人信息顯示在此區(qū)域，信息包括科類和生源地。2.相關信息選擇欄，和“推薦學?！蹦K不同的是，省控線分數(shù)是在界面顯示時獲取的網(wǎng)絡數(shù)據(jù)，如果該批次沒有相關信息，那就需要用戶自己輸入。3.預測結(jié)果欄，顯示最后預測投檔線的結(jié)果，包括冒險分、保守分和穩(wěn)妥分。如圖7-9所示。圖7-9投檔預測界面367.2.5投檔線預測“投檔預測”模塊也可以分為3個部分：圖77.3“豹考通”IOS客戶端程序結(jié)構(gòu)分析7.3.1整體程序結(jié)構(gòu)分析圖7-10“豹考通”IOS客戶端程序結(jié)構(gòu)圖·豹考通：這個部分是程序的