《基于Android Studio平臺的面向幼兒的繪畫App設計》15000字（論文）

[13]。因為控件本身無法對其形狀進行操作為了將廣告頁面設置為圓角顯示需要在WebView控件的外層套上一層操作界面RelativeLayout將其設置為圓角屬性再使得控件填充滿整個容器，這樣就得到了一個空的理想控件。創(chuàng)建完成控件后需要在主活動中聲明對象同時控件進行綁定并且調用函數顯示相關內容。核心代碼：//WebView控件綁定WebView

webView

=

(WebView)

findViewById(R.id.web_view);//獲取設置集合webView.getSettings().setJavaScriptEnabled(true);//進行網頁跳轉時，在當前WebView中顯示webView.setWebViewClient(new

WebViewClient());webView.loadUrl("/?id=M147105");圖5.1圖片服務器部署圖5.1為Tomcat圖片服務器上部署的圖片，該圖片主要用于在軟件中的窗口上顯示。圖5.2為Tomcat服務器上部署的網頁，該網頁用于顯示圖5.1中顯示圖片的Json格式數據，軟件會通過該數據來調用對應圖片。圖5.2Web服務器部署OKHttp獲取服務器頁面Json數據當用戶進入主頁面點擊左下方按鈕時需要獲取服務器端的Json數據流，主要通過OKHttp與URLConnect來實現(xiàn)。首先在布局中添加按鈕控件，之后在主活動中綁定按鈕并且通過函數來創(chuàng)建相關線程獲取指定頁面的字符流，將獲取到的數據裝載進入字符串數組待使用。OKHttp類：publicclassMyOkhttp{privatestaticfinalStringTAG="測試okhttp";privatestaticOkHttpClientclient=newOkHttpClient();publicstaticOkHttpClientgetClient(){returnclient;}//請求返回url的封裝方法publicstaticvoidsyncJsonStringByURL(Stringurl,finalFuncJsonStringcallback){finalRequestrequest=newRequest.Builder().url(url).build();client.newCall(request).enqueue(newCallback(){@OverridepublicvoidonFailure(Callcall,IOExceptione){Log.i(TAG,"解析失敗");}@OverridepublicvoidonResponse(Callcall,Responseresponse)throwsIOException{if(response!=null&&response.isSuccessful()){callback.onResponse(response.body().string());}}});}//回調接口,用來返回json的接口interfaceFuncJsonString{//處理返回結果的方法voidonResponse(Stringresult);}}圖5.3為本軟件中用于調用圖片服務器顯示在本地的窗口。當用戶點擊立即獲取按鈕即可通過調用OkHttp解析函數來解析Web服務器上的Json數據以獲取該畫板。圖5.3展示窗口數據載入以及Picasso異步加載框架當Okhttp通過回調接口完成了對Json數據對解析并返回參數至本地時，軟件需要將這些數據載入ArrayList的同類數據數組，并且通過Picasso進行異步加載。這些數據將會被應用至畫板展示框。數據載入操作：//初始化數據給ArrayList里面添加數據privatevoidinitData(){Stringurl="23:8080/testweb/test.html";MyOkhttp.syncJsonStringByURL(url,newMyOkhttp.FuncJsonString(){@OverridepublicvoidonResponse(Stringresult){Gsongson=newGson();ImageInfoimageInfo=gson.fromJson(result,ImageInfo.class);imageInfos1.addAll(imageInfo.getResults());runOnUiThread(newRunnable(){//所有的UI通知都要通過UI線程來進行操作@Overridepublicvoidrun(){ada.notifyDataSetChanged();}});}});Picasso異步加載：publicvoidonBindViewHolder(ViewHolderholder,intposition){獲取數組元素中的原始數據ImageInfog=mImages.get(position);將圖片id和名稱與holder進行綁定Resultresult=mImages.get(position);圖片異步加載框架畢加索Picasso.with(mContext).load(result.getUrl())//圖片鏈接.placeholder(R.drawable.time)//圖片沒有下載下來之前顯示的加載動畫.error(R.drawable.loaderror)//加載失敗時顯示的圖片.fit()//適應顯示框.into(holder.iv);//綁定顯示框holder.tv.setText(result.getWho());畫板縮略圖模塊加載當服務器端存在Json數據且數據有效時主活動中的ImageInfoAdapter類通過之前創(chuàng)建的rv資源數組加載View模板，同時需要給每一個View設置監(jiān)聽事件來對用戶的點擊事件進行反饋。最后將url與holder進行綁定即可實現(xiàn)繪圖的縮略圖顯示。核心代碼：public

ViewHolder

onCreateViewHolder(ViewGroup

parent，int

viewType){//通過之前創(chuàng)建的rv資源文件來加載View模板View

v

=

LayoutInflater.from(parent.getContext()).inflate(R.layout.rv_image_item，parent，false);//通過v來加載ViewHolderfinal

ViewHolder

vh

=

new

ViewHolder(v);//設置View控件的事件監(jiān)聽器vh.v.setOnClickListener(new

View.OnClickListener()

{public

void

onClick(View

v)

{int

pos

=

vh.getAdapterPosition();ImageInfo

iInfo

=

mImages.get(pos);Toast.makeText(v.getContext()，"你點擊這個view"，Toast.LENGTH_SHORT).show();}});//設置ImageView控件的事件監(jiān)聽器vh.iv.setOnClickListener(new

View.OnClickListener()

{public

void

onClick(View

v)

{int

pos

=

vh.getAdapterPosition();ImageInfo

iInfo

=

mImages.get(pos);Toast.makeText(v.getContext()，"你點擊這個圖像"，Toast.LENGTH_SHORT).show();//傳遞數據**********************************************Intent

intent=new

Intent(v.getContext()，PaintActivity.class);intent.putExtra("image_res_id"，pos);v.getContext().startActivity(intent);//******************************************************}});return

vh;}圖5.4為本地以及服務器端已有圖片加載后在本地界面上進行顯示的畫板縮略圖。圖5.4展示窗口Matrix函數使用當繪畫界面獲取到需要加載的畫板圖片時由于圖片的大小不統(tǒng)一且需要根據不同的設備尺寸進行調整，因此設置統(tǒng)一的背景圖片大小顯然是不行的。此時該模塊設置了Matrix函數來根據屏幕尺寸自動調整畫板圖片的大小以做到圖片的適配。核心代碼：Matrix

matrix

=

new

Matrix();float

scale

=

1.0f;int

left

，

top;if(bgBitmapWidth

<=

view_width

&&

bgBitmapHeight

<=

view_height){left

=

(view_width

-

bgBitmapWidth)

/

2;top

=

(view_height

-

bgBitmapHeight)

/

2;}else

{double

viewRatio

=

view_height

/

(double)

view_width;double

bitmapRatio

=

bgBitmapHeight

/

(double)

bgBitmapHeight;if(bitmapRatio

>

viewRatio)

{//此時圖片相對于屏幕來說很高很窄top

=

0;left

=

(int)

((view_width

-

view_height

/

(double)

bitmapRatio)

/

2);scale

=

view_height

/

(float)

bgBitmapHeight;}

else{//此時圖片對于屏幕來說很寬但很矮left

=

0;top

=

(int)

((view_height

-

bitmapRatio

*

view_width)

/

2);scale

=

view_width

/

(float)

bgBitmapWidth;}}matrix.postScale(scale，scale);//等比例縮放matrix.postTranslate(left，top);//縮放后再位移該功能模塊實現(xiàn)效果如圖5.5所示，通過Matrix函數對畫布背景圖片的處理能夠使圖片在控件中的位置有一個較好的顯示效果。圖5.5Matrix函數處理畫板圖片畫筆功能及動畫交互繪畫模塊最核心的功能之一就是畫筆，本軟件在此設計了多種顏色的畫筆并且為了使用戶在繪畫時有更好的交互體驗在點擊畫筆時會有相應的畫筆伸展動畫來提示用戶當前選擇的畫筆。首先在布局文件中添加對應的圖像按鈕控件，在主活動中綁定這些按鈕控件。在調試完成之后先對這些按鈕設置監(jiān)聽事件，當用戶點擊按鈕時調用動畫拉伸函數以及對應的安卓畫筆函數。畫筆函數示例：//設置畫筆為黃色

xpublic

void

setYellowPaint(){mPath.reset();//重置當前路徑mPaint.setColor(Color.YELLOW);}動畫效果實現(xiàn)：//動畫效果private

void

playAnim(View

v){if(lastSelectPen

!=

null){lastSelectPen.startAnimation(AnimationUtils.loadAnimation(PaintActivity.this，R.anim.scale_zoom_in_anim));v.startAnimation(AnimationUtils.loadAnimation(PaintActivity.this，R.anim.scale_zoom_out_anim));}lastSelectPen

=

v;}畫筆功能實現(xiàn)如圖5.6所示。圖5.6畫筆功能按鈕BitMap格式存儲用戶繪畫數據當用戶使用畫筆進行繪畫時用戶調用畫筆函數在Canvas畫布上產生的數據全部都記錄在Bitmap中。Bitmap將用戶的繪畫路徑以數據流的方式存儲，可以將整個畫板當作一個Bit數組而該函數的作用就是記錄每一個單元元素的值并且保留整個畫幅到本地文件File中待下一次使用。核心代碼：//surfaceView當前的高度和寬度int

view_width

=

getWidth();int

view_height

=

getHeight();//設置畫布背景圖片*********************************************//Bitmap

bg_bitmap

=

BitmapFactory.decodeResource(getResources()，R.drawable.pic1);Bitmap

bg_bitmap

=

BitmapFactory.decodeResource(getResources()，imageid[PaintActivity.imageResId]);int

bgBitmapWidth

=

bg_bitmap.getWidth();int

bgBitmapHeight

=

bg_bitmap.getHeight();if(isFirst){//初始化畫布cacheBitmap

=

Bitmap.createBitmap(getWidth()，getHeight()，Bitmap.Config.ARGB_8888);cacheCanvas

=

new

Canvas();//設置這個畫布上畫的東西實際上都畫到這個圖里cacheCanvas.setBitmap(cacheBitmap);}File文件寫入：//新建目錄appDir，并把圖片存到其下FileappDir=newFile(this.getExternalFilesDir(null).getPath()+"BarcodeBitmap");if(!appDir.exists()){appDir.mkdir();}StringfileName=System.currentTimeMillis()+".jpg";Filefile=newFile(appDir,fileName);繪畫內容存儲如圖5.7所示。圖5.7繪畫內容存儲音頻播放模塊實現(xiàn)本軟件的目的就是想要實現(xiàn)繪圖與音頻文件的結合來對用戶進行啟蒙教育，音頻模塊的處理也相當重要。首先，繪畫模塊需要根據畫板的不同來區(qū)分播放哪些音頻文件，這里可以根據畫板調用的數組內容來選擇待播放的音頻文件。其次，音頻播放模塊的核心函數為MediaPlayer，只要設置布局中的控件以及在主活動中綁定調用即可實現(xiàn)音頻的播放。初始化音頻播放器：private

void

initMediaPlayer(){try{mediaPlayer

=

MediaPlayer.create(this，R.raw.music);mediaPlayer.prepare();//音頻準備函數}catch

(Exception

e){e.printStackTrace();}}設置監(jiān)聽事件調用：case

R.id.ib_play:Toast.makeText(getApplicationContext()，"準備播放"，Toast.LENGTH_SHORT).show();if

(!mediaPlayer.isPlaying()){Toast.makeText(getApplicationContext()，"開始播放"，Toast.LENGTH_SHORT).show();mediaPlayer.start();}break;音頻播放模塊實現(xiàn)如圖5.8所示，從上到下依次為播放、暫停、重置按鈕，用戶點擊播放按鈕后軟件會識別當前正在進行繪畫的圖片內容而播放不同的音頻片段對該內容進行講解。圖5.8音頻播放按鈕系統(tǒng)測試系統(tǒng)測試作為一個必不可少的環(huán)節(jié)在軟件開發(fā)中起到至關重要的作用，本章將軟件所實現(xiàn)的功能逐一進行測試。測試結果將評估軟件中的各個模塊是否按照模塊設計目標進行實現(xiàn)，查看軟件開發(fā)是否符合預期標準。測試方法幼兒繪畫App需要根據其功能模塊進行測試，所使用的測試方法以及工具如下表6-1所示。表6-1測試工具表測試類型測試工具測試階段軟件測試QTP單元測試無黑盒測試在整個軟件開發(fā)過程中，由于對軟件各個功能模塊代碼比較熟悉，所以此處采用單元測試方法，該方法將對軟件的測試具體細分到每一個按鈕。測試需要盡可能得劃分最小單位以保證每個測試單元的功能完整性。本軟件在運行時可能會出現(xiàn)各種狀況例如：無法解析服務器端數據、畫筆功能無法使用等。因此需要設計合理的黑盒測試方法對系統(tǒng)進行黑盒測試，并且通過測試來反映系統(tǒng)中各個功能模塊的響應時間是否達到了設計要求。服務器端數據獲取測試幼兒繪畫APP服務器端數據獲取測試用例，如下表6-2所示。表6-2服務器端數據獲取測試用例測試功能服務器端數據獲取測試類型功能測試測試編號Test01測試目的查看軟件是否能夠正確獲取服務器端數據步驟操作預期結果1設置正確的圖片服務器鏈接窗口顯示圖片服務器圖片2設置錯誤的圖片服務器鏈接窗口提示404錯誤3設置Json格式數據成功獲取并解析對應數據4設置錯誤的數據格式軟件小窗口提示錯誤測試結果該功能可以正常使用功能模塊測試系統(tǒng)功能測試表，如下表6-3所示，針對類似的用例，僅列出一至兩個模塊進行舉例。表6-3功能模塊測試表序號測試模塊測試步驟預期結果實際結果1首頁用戶打開軟件進入主界面成功進入主頁面且各個布局加載完成畫板展示模塊、網頁顯示模塊加載完成、各按鈕顯示正常2網頁窗口顯示拖動網頁窗口中的圖片圖片滑動流暢且不會發(fā)生頁面跳轉或啟用本機瀏覽器網頁圖片顯示正常，滑動流暢且沒有發(fā)生頁面跳轉或調用瀏覽器3獲取按鈕點擊獲取按鈕能夠獲取到設置好的JSON數據并應用JSON數據獲取完成，且畫板展示模塊更新對應畫板縮略圖4畫板縮略圖窗口上下拖動展示窗口滑動流暢且完整顯示畫板縮略圖滑動流暢且能夠顯示本地以及更新后的畫板縮略圖5畫板縮略圖窗口點擊單個畫板縮略圖跳轉至對應繪畫界面點擊縮略圖后成功完成繪畫界面跳轉6畫筆點擊畫筆顯示畫筆交互動畫效果畫筆按鈕進行Y軸拉伸并且彈出畫筆7畫筆使用畫筆進行繪畫畫筆根據顏色在畫板上留下顏色筆跡選用各色畫筆均能正常進行繪畫8對照畫板查看對照畫板對照畫板內容應與畫布背景一致且為彩色各個對照畫板的顯示內容與畫布背景對應9返回主頁按鈕點擊按鈕返回主頁面返回主頁面10保存按鈕點擊按鈕保存當前繪畫數據、當前瀏覽畫板編號并且在小窗口提示數據成功保存且小窗口提示內容11清空按鈕點擊按鈕初始化畫布畫板上內容成功被清除12播放按鈕點擊按鈕播放本地音頻文件成功播放音頻13暫停按鈕點擊按鈕暫停播放音頻文件音頻播放暫停14重置按鈕點擊按鈕音頻播放從頭開始音頻停止播放且音頻重置15畫筆粗細按鈕點擊按鈕再點擊畫筆進行繪畫畫筆粗細變更且繪畫正常畫筆粗細切換正常且繪畫功能正常16畫筆粗細按鈕點擊畫筆按鈕，點擊畫筆粗細按鈕來回切換畫筆顏色不變但粗細改變畫筆顏色未改變，畫筆粗細程度改變17畫筆粗細按鈕固定畫筆粗細，在不同畫筆間來回切換畫筆粗細程度不會改變但畫筆顏色改變畫筆顏色切換且粗細程度不變18橡皮功能在已有的繪圖路徑上使用橡皮橡皮路徑上的顏色消失橡皮移動路徑上的顏色路徑變?yōu)榈咨鶕鲜霰?-3功能模塊測試表發(fā)現(xiàn)軟件在測試過程中各項功能符合開發(fā)預期目標?？偨Y及改進在準備開發(fā)本軟件之前我做了非常多的準備，從零基礎開始學習安卓軟件研發(fā)開始到能夠熟練的使用各種控件以及布局和函數調用花費了我想當多的時間。對于本軟件開發(fā)中遇到的一些問題我總結了一下三點：在主頁面的布局選擇時非常容易出錯。常常使用的水平布局或者線性布局都是屬于靜態(tài)布局的范疇，但是由于此軟件的畫板數量較多使用常規(guī)的靜態(tài)布局會導致內容空間狹隘，因此選用了動態(tài)與靜態(tài)結合的Fragment控件中再嵌套GridView來實現(xiàn)廣告頁面的靜態(tài)顯示以及畫板頁面在網格布局中的動態(tài)擴展，而在開發(fā)過程中多層嵌套布局往往容易出現(xiàn)問題，例如控件綁定出錯、找不到對應的變量以及不同的數據在各個活動中傳遞參數出錯等，因此對于布局內容的規(guī)劃仍是本軟件需要改進的地方。在主活動與次活動傳遞數據所出現(xiàn)的數據抓取不完整，由于本軟件用戶需要在不同的活動界面中來回切換，這就要求軟件從上一個事件到下一個事件之間的數據傳遞要清晰。以畫板數據傳輸為例使用Intent函數或者Bundle類傳輸數據時容易出現(xiàn)傳輸方的內容沒有問題但是接受到的數據內容丟失，因此本軟件利用全局靜態(tài)變量與Intent相結合的方式解決數據傳遞模糊的問題。我認為本軟件最難的模塊在于使用OKHttp解析服務器端Json數據。首先，由于對服務器的使用十分生疏在此模塊吃了很多虧，常常出現(xiàn)服務器端配置沒有問題但是本地軟件無法解析服務器上的內容，經過多次的調試以及版本的比對最終才成功實現(xiàn)該模塊，由此我總結了一些經驗：數據格式必須準確、版本必須兼容以及在調用函數時需要根據本軟件實際情況做出改變。綜上所述我總結出來關于本軟件開發(fā)的一些優(yōu)缺點。首先，本軟件更加適合需要早教的少兒用戶使用；其次，繪畫與科普內容結合的方式在目前軟件市場上比較少見；最后，通過這種從畫板獲取方式可以不需要等待軟件版本更新等。同時軟件也存在些許不足之處，例如：用戶界面的UI比較簡陋有很大的優(yōu)化空間、目前對用戶繪畫數據對本地保存與調用還未調試完