虛擬仿真實驗在教學中的應用

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

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

1 概述

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

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

2 網上購物客戶端的設計

2.1 總體設計的方案

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

2.2 功能模塊的設計

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

圖1 軟件的流程圖

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

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

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

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

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

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

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

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

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

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

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

Protected void onCreate(Bundle savedInstanceState)

{super.onCreate(savedInstanceState);

setContenView(R.layout.activity_main);

setContentView(R.layout.activity_main);

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

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

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

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

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

RadioButton的點擊跳轉不同的頁面，實現不同的功能，主要代碼如下：

case R.id.registration:

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

startActivity(signintent);

break;

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

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

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

GridView中采用兩列視圖來顯示數據。將網絡上的數據加載到集合中，在適配器中加載到GridView中，從而可出現化妝教程的效果圖。

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

GridView中采用四列視圖來顯示數據。點擊圖標后，出現不同的內容，可對應不同的解決方案。

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

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

Viewpager添加fragment實現不同的內容布局，一個Activity有兩個碎片，加載不同的視圖。

用戶可以選擇在不同的標簽下進行對產品的討論和技術的交流。

當用戶左右滑動時或者點擊上方的標簽時，可切換不同的內容。

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

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

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

3 功能測試

3.1 軟件測試的環境

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

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

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

這種測試稱之為壓力測試，通過測試程序會不會出現崩潰，來看出程序是否穩固。

3.2 測試的結果與分析

根據測試好的程序，應用于android系統中，首先實現了注冊和登陸界面如圖4所示。

圖4 注冊和登錄界面

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

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

當登錄成功后，視圖都顯示出來，各模塊功能同時能夠實現，如秒殺界面，商品詳情界面等。美妝教程的頁面中提供給用戶視頻教程，可以隨意點開視頻進行播放。‘我的臉’頁面可以檢測自己皮膚的狀態并可根據提示方案進行及時的調整護膚方法。論壇頁面中為用戶提供了可以相互討論的區域，方便大家相互的技術交流，從而更快地了解到這款APP中所有商品的特點。個人設置的頁面中展現的是個人的資料，可以進行修改并且記錄歷史。Adb命令測試如圖5所示。

圖5 adb命令測試界面

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

4 結束語

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