基于iOS平臺的一站到底APP客戶端的設(shè)計(jì)與實(shí)現(xiàn)

張華，于萍，孟憲穎，邊蓓蓓

(長春工程學(xué)院計(jì)算機(jī)技術(shù)與工程學(xué)院，長春 130012)

主要研究數(shù)字圖像處理、數(shù)據(jù)挖掘。

摘要：隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)和物聯(lián)網(wǎng)的飛速發(fā)展，智能終端APP也隨之流行，其中包括很多電視臺節(jié)目的APP，從界面到技術(shù)詳細(xì)闡述了基于iOS平臺的江蘇衛(wèi)視《一站到底》節(jié)目APP客戶端的設(shè)計(jì)與實(shí)現(xiàn)過程，能夠?qū)崿F(xiàn)選關(guān)、答題及查看成績，可以供大家閑暇使用，起到娛樂與益智的作用。

關(guān)鍵詞：互聯(lián)網(wǎng)；物聯(lián)網(wǎng)；智能終端；APP；iOS平臺

doi:10.3969/j.issn.1009-8984.2015.03.026

收稿日期：2015-09-07

作者簡介：張華(1981-)，女(漢)，山東泰安，講師，碩士

中圖分類號：TP391獻(xiàn)標(biāo)志碼：A

0引言

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展以及電信網(wǎng)絡(luò)的全面覆蓋和升級，手機(jī)已經(jīng)不再是通常意義上的聯(lián)絡(luò)設(shè)備，而是集通信、網(wǎng)絡(luò)、社交、生活、娛樂等功能于一體的智能終端，隨之產(chǎn)生的就是大量的智能終端APP，人們可以使用這些APP完成各式各樣的活動(dòng)，已經(jīng)成為人們在現(xiàn)代社會(huì)生活中不可缺少的一部分，其中有些APP是伴隨著電視節(jié)目而產(chǎn)生的，當(dāng)節(jié)目在電視上播出時(shí)，人們可以安裝相應(yīng)的APP參與其中，甚至完成互動(dòng)。本文介紹的就是基于iOS平臺的江蘇衛(wèi)視益智答題類節(jié)目《一站到底》節(jié)目的APP(以下簡稱本APP)的設(shè)計(jì)與實(shí)現(xiàn)過程。

1iOS開發(fā)的相關(guān)知識和技術(shù)

1.1　iOS平臺

iOS是由蘋果公司開發(fā)的移動(dòng)操作系統(tǒng)，iOS與蘋果的Mac OS X操作系統(tǒng)一樣，屬于類Unix的商業(yè)操作系統(tǒng)。iOS開發(fā)包括3部分：前端可視化界面UI、數(shù)據(jù)模型即數(shù)據(jù)的來源、手機(jī)功能特性，如：音頻、視頻、定位、拍照等，開發(fā)所需數(shù)據(jù)庫為SQLiteB，還有一套數(shù)據(jù)庫是蘋果系統(tǒng)自帶的CoreDate，用于數(shù)據(jù)序列化、緩存等。

iOS平臺共分為4層：1)Cocoa Touch Layer：即觸摸UI層，提供UI界面及事件流，是從Mac OS X的Cocoa框架裁剪出來的，提供UIKit框架，能夠滿足大多數(shù)應(yīng)用程序的開發(fā)需求；2)Media Layer：媒體層，提供音頻、視頻、動(dòng)畫服務(wù)；3)Core Services Layer：核心服務(wù)層，用于聯(lián)網(wǎng)、定位、線程等；4)Core OS：核心操作系統(tǒng)層，用于驅(qū)動(dòng)手機(jī)硬件。

1.2　注冊開發(fā)者計(jì)劃

APP是在模擬器上開發(fā)運(yùn)行，需要獲得開發(fā)者計(jì)劃即開發(fā)者證書才能獲得APP發(fā)布權(quán)限，開發(fā)者計(jì)劃分為2種：1)標(biāo)準(zhǔn)開發(fā)人員：99美元/年，獲得100臺設(shè)備發(fā)布權(quán)限，可以提交應(yīng)用到App Store；2)企業(yè)開發(fā)人員：299美元/年，適合50人以上的大公司，不能訪問App Store，通過私有店鋪發(fā)布應(yīng)用到員工設(shè)備。

在開發(fā)時(shí)要先獲得證書，然后下載SDK 即Software Development Kit軟件開發(fā)包，包括界面、代碼、框架、編譯、分析等工具。常用開發(fā)工具：1)Xcode6.1；2)Interface Builder：拖拽控件；3)模擬器；4)Instruments：用于性能測試、內(nèi)存占用測試、CPU占用異常的位置并能定位到相應(yīng)代碼。

1.3　Objective-C中的數(shù)組

iOS的開發(fā)語言使用Objective-C(以下簡稱OC)，在OC中提供了2種數(shù)組：NSArray、NSMutableArray。NSArray是靜態(tài)數(shù)組，即它所指向的內(nèi)容是不可改變的，它指向的是一段內(nèi)存區(qū)域，一旦被初始化，不能通過它對該內(nèi)存區(qū)域的數(shù)據(jù)進(jìn)行修改，但是可以讀取數(shù)據(jù)。

NSMutableArray是可變數(shù)組，是動(dòng)態(tài)的，是NSArray的子類，可以對所指向的內(nèi)存區(qū)域內(nèi)容進(jìn)行修改，并可以增加或移除數(shù)組中的內(nèi)容。NSArray和NSmutableArray的第一個(gè)數(shù)據(jù)的下標(biāo)均為0。在本APP中主要應(yīng)用到了NSArray，其常用用法如下：

1.3.1NSArray的3種聲明方式

NSArray *firstArray=[NSArray arrayWithObjects:@"A",@"B",@"C", nil];

NSArray *secondArray=[[NSArray alloc]initWithObjects:@"E",@"F",@"G", nil];

NSArray *thirdArray=@[@"H",@"I",@"M"];

1.3.2根據(jù)索引號獲取數(shù)組中的某個(gè)成員

NSString *tmpArray=[thirdArray objectAtIndex:1];

NSLog(@"tmpString=%@",tmpArray);

1.3.3獲取數(shù)組成員個(gè)數(shù)

int arrayCount=[thirdArray count];

NSLog(@"數(shù)組成員個(gè)數(shù)為%i",arrayCount);

2一站到底APP的設(shè)計(jì)與實(shí)現(xiàn)

2.1　APP界面的設(shè)計(jì)

2.1.1啟動(dòng)界面的設(shè)計(jì)

在iOS開發(fā)中，通常使用LaunchScreen.xib設(shè)置APP啟動(dòng)界面，即APP的加載界面，在此界面上通常放置一個(gè)ImageView使其填充全屏即可完成APP的加載，效果如圖1所示。

圖1　APP啟動(dòng)界面

如果不使用LaunchScreen.xib作為啟動(dòng)界面，而是使用一個(gè)普通的視圖控制器，如：LoadViewController做啟動(dòng)界面，需要將AppDelegate文件中的啟動(dòng)視圖設(shè)置為LoadViewController，然后在視圖的.h文件中引入主視圖控制器MainViewController，聲明一個(gè)對應(yīng)的視圖對象，.m文件的viewDidAppear事件上使用線程使其休眠幾秒，然后跳轉(zhuǎn)至主視圖控制器。

2.1.2主界面的設(shè)計(jì)

主界面中主要實(shí)現(xiàn)功能選擇，iOS中的界面設(shè)計(jì)與傳統(tǒng)界面設(shè)計(jì)不同，整個(gè)界面是采用層疊的方式填充，每個(gè)顯示內(nèi)容都有自己的層，先被放置的內(nèi)容在底層，后被放置的內(nèi)容在上層，所以在設(shè)計(jì)界面時(shí)先放置背景類的底層內(nèi)容。本界面中的“闖關(guān)”“對戰(zhàn)”“商品”均為控件，iOS開發(fā)中的控件有兩種方式創(chuàng)建：一種是直接拖拽到界面中，一種是使用代碼編程的方式。所有的控件都繼承自UIControl類，此類位于控件類樹的根部，使用目標(biāo)動(dòng)作方法發(fā)送消息。本界面中使用定時(shí)器來完成燈光閃爍，定時(shí)器所調(diào)用的方法中實(shí)現(xiàn)12張圖片每隔0.5 s進(jìn)行輪換，使其具有動(dòng)畫效果。效果如圖2所示。

圖2　主界面

2.1.3選關(guān)界面的設(shè)計(jì)

本界面中主要實(shí)現(xiàn)“答題選關(guān)”，由6個(gè)按鈕完成，使用代碼編程的方式創(chuàng)建，在按鈕上方分別對應(yīng)疊加6張圖片，名稱分別命名為：tu0.png，tu1.png……tu5.png，以實(shí)現(xiàn)按鈕圖片的動(dòng)態(tài)加載。6個(gè)按鈕和6張圖片的橫縱坐標(biāo)按照排列規(guī)則由公式自動(dòng)生成，每個(gè)按鈕和對應(yīng)圖片的坐標(biāo)保持一致，以實(shí)現(xiàn)6個(gè)按鈕的聯(lián)動(dòng)以及按鈕和圖片的重疊。效果如圖3所示。

圖3　選關(guān)界面

2.1.4答題界面的設(shè)計(jì)

本界面完成答題功能，使用定時(shí)器NSTimer來完成倒計(jì)時(shí)，時(shí)間到后或者答題結(jié)束后都會(huì)自動(dòng)跳轉(zhuǎn)至成績界面并銷毀計(jì)時(shí)器。在當(dāng)前界面中，設(shè)置初始題號為0，每答完一道題，題號自動(dòng)加1，根據(jù)題號完成問題和4個(gè)答案選項(xiàng)的加載，4個(gè)答案分別由4個(gè)按鈕和4個(gè)標(biāo)簽框疊加完成，橫縱坐標(biāo)由公式自動(dòng)生成，且每個(gè)按鈕和每個(gè)標(biāo)簽框的坐標(biāo)保持一致。所有的題目和答案選項(xiàng)及正確答案均由數(shù)組來完成，在設(shè)置答案選項(xiàng)時(shí)使用數(shù)組嵌套數(shù)組的方式形成二維數(shù)組來保存。效果如圖4所示。

圖4　答題界面

2.1.5查看成績界面的設(shè)計(jì)

本界面用來查看答題成績，如圖5所示，主要使用了標(biāo)簽框控件UILabel和圖像控件UIImage，其中UILabel控件主要用來接收上個(gè)界面即答題界面?zhèn)鬟f過來的成績數(shù)據(jù)，如：答對數(shù)量、答錯(cuò)數(shù)量等，并能夠根據(jù)答對數(shù)量給出不同的評語，并由UIImage來控制挑戰(zhàn)結(jié)果，如：挑戰(zhàn)勝利、挑戰(zhàn)失敗。

圖5　查看成績界面

2.2　主要功能代碼

2.2.1窗口及主視圖控制器的聲明及初始化

在AppDelegate.h中要通過屬性先聲明一個(gè)窗口對象和視圖控制器對象，如：

#import “MainViewController.h”

@property (strong,noatomic) UIWindow *window;

@propety (strong,noatomic) MainViewController*mainVC;

在AppDelegate.m的didFinishLaunchingWithOptions方法中完成窗口和視圖控制器的初始化

self.window=[[UIWindowalloc]initwithFrame:[[UISceenmainScreen]bounds]];

self.mainVC=[MainViewControlleralloc]initWithNibName:@”MainViewController”bundle:nil];

[self.windowsetRootViewController:self.mainVC];

[self.windowmakeKeyAndVisible];

2.2.2動(dòng)態(tài)生成選關(guān)界面的6個(gè)按鈕

-(void)createButton:(int)index

{

UIButton *myButton=[UIButton buttonWithType:UIButtonTypeCustom];

int x=70;//起始第一張圖的橫坐標(biāo)

int y=40;//起始第一張圖的縱坐標(biāo)

int xs=70; //水平間距

int ys=50;//豎直間距

if(index==0||index==1||index==2) //如果是第一排

{

x=x+90*index+xs*index;//動(dòng)態(tài)控制橫坐標(biāo)

//y=40;

}

if(index==3||index==4||index==5)//如果是第二排

{

x=x+90*(index-3)+xs*(index-3);//動(dòng)態(tài)控制橫坐標(biāo)

y=y+60+ys;//動(dòng)態(tài)控制縱坐標(biāo)

}

//動(dòng)態(tài)生成6個(gè)按鈕的6個(gè)圖片

NSString *strName=[NSString stringWithFormat:@"tu%i.png",index];

[myButton setFrame:CGRectMake(x, y, 90, 60)];

[myButton setTag:index];//給每個(gè)按鈕加一個(gè)Tag標(biāo)識

[myButton setBackgroundImage:[UIImage imageNamed:@"suo_ding.png"] forState:UIControlStateNormal];

[myButton setImage:[UIImage imageNamed:strName] forState:(UIControlStateNormal)];

[myButton addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:myButton];

}

2.2.3使用數(shù)組生成題目、4個(gè)選項(xiàng)及正確答案

-(void)loadData

{

questionArray=[NSArray arrayWithObjects:

@"問題1",

@"問題2",

@"問題3",

@"問題4",

nil];

option1Array=[NSArray arrayWithObjects:

@"A 選項(xiàng)11",

@"B 選項(xiàng)12",

@"C 選項(xiàng)13",

@"D 選項(xiàng)14",

nil];

option2Array=[NSArray arrayWithObjects:

@"A 選項(xiàng)21",

@"B 選項(xiàng)22",

@"C 選項(xiàng)23",

@"D 選項(xiàng)24",

nil];

option3Array=[NSArray arrayWithObjects:

@"A 選項(xiàng)31",

@"B 選項(xiàng)32",

@"C 選項(xiàng)33",

@"D 選項(xiàng)34",

nil];

option4Array=[NSArray arrayWithObjects:

@"A 選項(xiàng)41",

@"B 選項(xiàng)42",

@"C 選項(xiàng)43",

@"D 選項(xiàng)44",

nil];

optionArray=[NSArray arrayWithObjects:

option1Array,

option2Array,

option3Array,

option4Array,

nil];//二維數(shù)組

answerDictionary=[NSDictionary dictionaryWithObjectsAndKeys:

@"B 選項(xiàng)12",@"問題1",

@"C 選項(xiàng)23",@"問題2",

@"A 選項(xiàng)31",@"問題3",

@"D 選項(xiàng)44",@"問題4",

nil];//問題做鍵，正確答案做值

}

3一戰(zhàn)到底APP的改進(jìn)

智能終端APP中的數(shù)據(jù)大部分都是動(dòng)態(tài)數(shù)據(jù)，即不是固定的，而是由APP的管理人員在后臺使用PHP或其他技術(shù)完成的服務(wù)器管理程序來動(dòng)態(tài)控制，包括添加新數(shù)據(jù)、修改原有數(shù)據(jù)、刪除數(shù)據(jù)，這些數(shù)據(jù)都保存在特定的數(shù)據(jù)源中，如：數(shù)組、字典或數(shù)據(jù)庫，客戶端APP顯示的數(shù)據(jù)直接從數(shù)據(jù)源獲取，在客戶端APP中添加的新數(shù)據(jù)也可以直接保存回?cái)?shù)據(jù)源，本文中的一站到底APP是使用固定數(shù)組來保存問題、選項(xiàng)和正確答案的，今后可以通過動(dòng)態(tài)控制數(shù)組或直接由數(shù)據(jù)庫來完成，使其更合理和完善。

4結(jié)語

基于iOS平臺的APP客戶端的開發(fā)應(yīng)用新平臺、新語言、新技術(shù)，與傳統(tǒng)的Web應(yīng)用開發(fā)有本質(zhì)區(qū)別，是現(xiàn)在流行的一個(gè)新鮮領(lǐng)域，開發(fā)具有難度。一站到底APP客戶端能夠?qū)崿F(xiàn)選關(guān)、答題、查看成績等功能，界面合理，功能完善，可以滿足人們閑暇時(shí)候娛樂使用的要求，并起到學(xué)習(xí)新知識、開拓知識面的作用。

參考文獻(xiàn)

[1] 劉銘,朱舸,王佳.iPhone程序開發(fā)基礎(chǔ)教程[M]. 北京：電子工業(yè)出版社, 2011.

[2] Gary Bennett,Mitch Fisher,Brad Lees.Objective-C[M].北京：人民郵電出版社,2012.

The design and realization to TV program APP terminal clients of

“Who’s Still Standing” based on IOS platform

ZHANG Hua, et al.

(SchoolofComputerTechnologyandEngineering,ChangchunInstituteofTechnology,

Changchun130012,China)

Abstract：With the rapid development of mobile internet technology and the internet of things, intelligent terminal APP is also popular, including many television programs APP. This paper describes in detail the design and implementation of “Whos still standing” TV program APP terminal clients of Jiangsu TV based on the iOS platform from the interface to the technology. People can choose items, and answer questions, then view the results for their leisure entertainment and education.

Key words：mobile Internet; the Internet of things; intelligent terminal; APP; iOS platform