◇寶雞文理學(xué)院電子電氣工程學(xué)院 方 元 海鵬博

本文以設(shè)計一款網(wǎng)上購物客戶端為例，借助Android系統(tǒng)為平臺，使得學(xué)生更好掌握所學(xué)知識，首先采用RadioButton類和Fragment類來設(shè)計首頁面和添加視圖，從而實現(xiàn)五個頁面的數(shù)據(jù)加載并且隨意的切換；其次利用Intent類設(shè)計頁面的跳轉(zhuǎn)，來實現(xiàn)不同按鈕的跳轉(zhuǎn)功能。接下來再利用TabLayout類和Viewpager類來實現(xiàn)商品的展示和論壇功能，使得界面可以與導(dǎo)航欄一起滑動；再次利用ScrollView類和ListView類實現(xiàn)個人界面的設(shè)計，可以使圖片與文字整體的滑動。利用GridView類實現(xiàn)美妝視頻的顯示，使用RadioPlayer類實現(xiàn)對視頻的播放。最后短信的驗證、地址的選擇以及在線支付借助第三方框架實現(xiàn)，充分利用已存在的框架，實現(xiàn)該功能的使用，從而完成網(wǎng)上購物客戶端的設(shè)計。經(jīng)測試結(jié)果表明，網(wǎng)上購物客戶端基本達到預(yù)期的效果，在手機上能夠正常運行，為方便人們生活，對提高生活品質(zhì)具有較好的實用價值。

1 概述

隨著科技的不斷進步與發(fā)展，安卓手機市場的發(fā)展速度也在不斷地加快，各種購物資源也隨之在不斷地快速擴散，這些小小的資源看起來微不足道，但已經(jīng)深深地融入到我們每個人的生活中。有了操作系統(tǒng)做基礎(chǔ)，再加上支付寶，微信支付，銀聯(lián)等網(wǎng)絡(luò)快捷支付，對于網(wǎng)上買東西已然成為年輕人的青睞，現(xiàn)在的網(wǎng)上購物，如淘寶、京東、天貓、唯品會等已成為人類不可或缺的一部分。

本設(shè)計以售賣護膚品為背景，設(shè)計了一款基于安卓系統(tǒng)的手機app[1-2]。本設(shè)計的完成主要是對安卓應(yīng)用層的調(diào)用，其中涉及到安卓中四大組件，Intent意圖的切換，fragment碎片的替換，以及第三方的一些框架，如注冊時短信的接收，支付系統(tǒng)的實現(xiàn)等[4-6]。

2 網(wǎng)上購物客戶端的設(shè)計

2.1 總體設(shè)計的方案

為了實現(xiàn)購物客戶端的設(shè)計，根據(jù)設(shè)計流程圖，主要完成注冊與登錄、首頁、美妝教程、個人設(shè)置、討論區(qū)和皮膚檢測等功能。客戶端實現(xiàn)后，當(dāng)啟動軟件的時候，開始進入logo界面[7-8]，然后從登錄界面到主頁面，再次進入到各個功能，其設(shè)計流程圖如圖1所示。

2.2 功能模塊的設(shè)計

根據(jù)圖1可知，本系統(tǒng)模塊大體上分為6個模塊，分別為注冊與登錄、首頁、美女教程、我的臉、論壇和個人設(shè)置。每個頁面上都有不同的信息提供給用戶。在注冊和登錄中，用戶可使用手機號碼進行注冊并登錄。在首頁模塊中，展示推薦的產(chǎn)品及促銷活動。在美妝教程模塊中，主要展示一些美妝視頻，給用戶提供好的化妝教程。在我的臉模塊中，可通過手機攝像頭測試自身的皮膚性質(zhì)，并提供關(guān)于皮膚缺陷的解決方案。在論壇模塊中，為用戶提供討論區(qū)，方便用戶相互學(xué)習(xí)交流，分享個人喜好品牌等。在個人設(shè)置模塊中，完善個人資料，并可對一些數(shù)據(jù)進行保存。

圖1 軟件的流程圖

（1）用戶界面的設(shè)計。本設(shè)計采用src文件夾主要存放開發(fā)的源代碼，gen文件主要存放代碼中經(jīng)常用到的R文件。R文件是在開發(fā)過程中，尋找其他控件或者其他資源的id表。assets文件夾主要存放一些需要播放的媒體文件，比如：很多軟件打開都會有背景音樂，這個音樂文件的路徑將存放在該文件下[9-10]。bin文件主要存放本項目的主要文件，比如在運行代碼之后，就會自動生成對應(yīng)的apk文件，該文件將保存在bin文件夾中[11-13]。Libs文件存放一些開發(fā)過程中經(jīng)常使用的一些第三方j(luò)ar包，這些jar包可以為本項目增加一些額外的功能，方便實現(xiàn)更多要求的功能[14]。res文件夾Drawable下存放著整個項目中所需要的圖片資源，由于存在四種尺寸不同的文件，從而方便該項目代碼可以適合不同設(shè)備不同屏幕的需求[15]。例如，手機和平板都可以使用，他不會因為屏幕的尺寸不同出現(xiàn)失真現(xiàn)象。res/layout文件夾存放xml文件，也就是布局文件；主界面的布局就是通過該文件里來實現(xiàn)的。

在安卓系統(tǒng)中，最常用的布局有五種，本設(shè)計用到的是線性布局(LinearLayout)和相對布局(RelativeLayout)。在該文件中的每個控件都需要定義一個唯一的ID，方便在代碼中進行調(diào)用。下面是控件imageButton的內(nèi)容：

android:id="@+id/exit"http://定義一個唯一的ID

android:layout_width="wrap_content"http://設(shè)置該控件的寬度為包裹

android:layout_height="wrap_content"http://設(shè)置該控件的高度為包裹

android:layout_alignParentRight="true"/該控件相對于父控件的右側(cè)對齊

android:layout_alignParentTop="true"/控件的上邊緣和父控件的上邊緣對齊

android:background="@drawable/close"http://控件的背景圖片路徑

控件TextView可以設(shè)置文本內(nèi)容：text="@string/title"、設(shè)置文本的尺寸：textSize="25sp"、設(shè)置文本的顏色：textColor="#11cd6e"等一些基本的屬性。

通過控件imageButton的內(nèi)容，布局好界面后，還不能顯示在屏幕上，需要通過把這個文件下載到代碼中進行運行。每個類都要去實現(xiàn)Activity這個類，首先要復(fù)寫的就是onCreate這個方法，這也是程序的入口，每個Activity啟動，都要先調(diào)用這個方法。

下面就是繼承Activity類，程序入口代碼如下所示。

Protected void onCreate(Bundle savedInstanceState)

{super.onCreate(savedInstanceState);

setContenView(R.layout.activity_main);

setContentView(R.layout.activity_main);

通過該段代碼將activity_main.Xml文件加載到視圖中顯示出來。

本次設(shè)計中在整體框架上采用RadioGroup+Fragment的組合完成整體頁面的搭建。

本軟件下方具有5個按鈕，所采用的控件是RadioGroup，分別實現(xiàn)首頁、視頻教程、我的臉、秀臉和我等按鍵。點擊后會出現(xiàn)不同的View，展現(xiàn)不同的內(nèi)容，用戶界面的5個按鍵如圖2所示。

（2）首頁的實現(xiàn)。首頁中通過ImageView實現(xiàn)上布局，中間采用RadioButton，下面采用ListView。其中，數(shù)據(jù)都是從服務(wù)器取得，加載到ImageView和ListView的適配器中，所采用的適配器是BaseAdapter。

ListView是一個具有setAdapter的方法，為ListView做適配，內(nèi)容格式是每一條包含一段文字或者一個視圖。

RadioButton的點擊跳轉(zhuǎn)不同的頁面，實現(xiàn)不同的功能，主要代碼如下：

case R.id.registration:

Intentsignintent=new Intent(this.getActivity(),SignActivity.class);

startActivity(signintent);

break;

如果采用switch和case語句來的實現(xiàn)該功能，可以使代碼更簡單明了。

（3）化妝教程的實現(xiàn)?；瘖y教程的界面采用Tablayout+Viewpager+ScrollView+GridView的控件實現(xiàn)頁面的完成，把列表分成兩列，可加載不同的視頻。

其中，Tablayout添加標簽，提示用戶的分欄。Viewpager添加fragment實現(xiàn)不同的內(nèi)容布局，一個Activity有兩fragment，可加載不同的視圖。

GridView中采用兩列視圖來顯示數(shù)據(jù)。將網(wǎng)絡(luò)上的數(shù)據(jù)加載到集合中，在適配器中加載到GridView中，從而可出現(xiàn)化妝教程的效果圖。

（4）我的臉的實現(xiàn)。皮膚檢測采用的是一個基本的GridView控件實現(xiàn)，數(shù)據(jù)是字符串，加載到適配器中，顯示在視圖上。

GridView中采用四列視圖來顯示數(shù)據(jù)。點擊圖標后，出現(xiàn)不同的內(nèi)容，可對應(yīng)不同的解決方案。

（5）論壇的實現(xiàn)。論壇的實現(xiàn)是采用Tablayout+Viewpager+ListView的組件來實現(xiàn)頁面視圖的加載功能。

Tablayout添加標簽，分為四個Tab標簽，給用戶提供可以滑動的頁面顯示。

Viewpager添加fragment實現(xiàn)不同的內(nèi)容布局，一個Activity有兩個碎片，加載不同的視圖。

用戶可以選擇在不同的標簽下進行對產(chǎn)品的討論和技術(shù)的交流。

當(dāng)用戶左右滑動時或者點擊上方的標簽時，可切換不同的內(nèi)容。

（6）個人設(shè)置的實現(xiàn)。個人設(shè)置的界面采用ScrollView+ListView來達到目的，可以支持圖片和列表同時上拉或下拉。

本頁面的列表為了簡單起見，采用SimpleAdpter適配器，如果需要實現(xiàn)一個數(shù)據(jù)顯示在Activity上，需要三個步驟：①獲取網(wǎng)絡(luò)數(shù)據(jù)；②建立適配器（ArrayAdapter/SimpleAdapter/自定義BaseAdatpter）；③加載適配器到listview中（listview.setAdapter()）。

按照這三步驟，可把適配器中的視圖一一顯示在ListView的控件中。

3 功能測試

3.1 軟件測試的環(huán)境

一般程序運行環(huán)境有兩種，一種是運行在eclipse軟件上自帶的手機模擬器上，還有一種就是直接運行在安卓手機系統(tǒng)上。第一種方案，需要打開eclipse軟件，在該項目的文件上右擊找到“Run As”下的“Android Application”運行該程序。

選擇Sony-l39t該手機驅(qū)動，點擊ok，稍等之后，該程序在手機上運行，就可以手動進行測試了。這種方式可以把代碼運行在手機上，視圖將會加載出來，可以非常直接的觀察是否有bug。

第二種方案，在測試時需要用到adb命令。adb命令運用在Linux中，由于手機底層就是Linux，因此可以利用adb命令來實現(xiàn)軟件測試，配置adb系統(tǒng)環(huán)境后，命令如圖3所示。

這種測試稱之為壓力測試，通過測試程序會不會出現(xiàn)崩潰，來看出程序是否穩(wěn)固。

3.2 測試的結(jié)果與分析

根據(jù)測試好的程序，應(yīng)用于android系統(tǒng)中，首先實現(xiàn)了注冊和登陸界面如圖4所示。

圖4 注冊和登錄界面

圖中注冊時需要手機號碼，輸入后手機會收到一條驗證碼短信，其次設(shè)置密碼進行輸入，等到全部輸入完成，如果信息都正確，那么會跳轉(zhuǎn)到登陸頁面中。

登陸頁面中需要用戶的手機號以及注冊時的密碼，輸入欄的右邊分別是清空手機號和顯示當(dāng)前密碼。最下方是登陸按鈕，如果賬戶與密碼匹配，就會跳轉(zhuǎn)到首頁部分。

當(dāng)?shù)卿洺晒?，視圖都顯示出來，各模塊功能同時能夠?qū)崿F(xiàn)，如秒殺界面，商品詳情界面等。美妝教程的頁面中提供給用戶視頻教程，可以隨意點開視頻進行播放。‘我的臉’頁面可以檢測自己皮膚的狀態(tài)并可根據(jù)提示方案進行及時的調(diào)整護膚方法。論壇頁面中為用戶提供了可以相互討論的區(qū)域，方便大家相互的技術(shù)交流，從而更快地了解到這款A(yù)PP中所有商品的特點。個人設(shè)置的頁面中展現(xiàn)的是個人的資料，可以進行修改并且記錄歷史。Adb命令測試如圖5所示。

圖5 adb命令測試界面

根據(jù)圖5可知，Adb命令測試順利完成，表明該設(shè)計沒有錯誤信息，該款app軟件能夠在手機上順暢的運行。

4 結(jié)束語

本文借助Android系統(tǒng)為平臺，在教學(xué)過程中，采用Java語言，通過linux程序代碼，使用不同的布局方法設(shè)計出一款網(wǎng)上購物客戶端APP，設(shè)計出的APP各項指標均符合要求。在設(shè)計首頁面時，采用了RadioButton類和ViewPager類來實現(xiàn)，該類是通過左右滑動和點擊下方按鈕來進行不同頁面的切換，再用ViewPager與Fragment結(jié)合使用，完成首頁面的搭建；其次利用TabLayout類和Viewpager類來實現(xiàn)商品的展示和論壇功能，使得界面可以與導(dǎo)航欄一起滑動，頁面的跳轉(zhuǎn)即采用Intent類實現(xiàn)；綜合各個界面結(jié)果可知，運用Android系統(tǒng)的工具進行設(shè)計時，采用了不同的工具來設(shè)計，不僅可以實現(xiàn)不同的界面效果，而且增加設(shè)計整體的效果。設(shè)計方法簡單，便攜直觀。最后短信方式驗證、地址的選擇以及在線支付借助第三方框架實現(xiàn)，充分利用已存在的框架，實現(xiàn)該功能的使用，從而完成網(wǎng)上購物客戶端的設(shè)計。從本文的設(shè)計結(jié)果可以看出，教學(xué)成果明顯，學(xué)生學(xué)習(xí)積極性高，更好的將所學(xué)知識轉(zhuǎn)化為實際應(yīng)用，從而提高了教學(xué)質(zhì)量。