Android智能電視APP開發(fā)筆記三圖片加載和顯示

1、TVAPP開發(fā)筆記(三)圖像加載和顯示1 概述更新有點(diǎn)慢了，主要最近事情比較多給耽擱了。先要對計(jì)劃開發(fā)的APP作個(gè)簡單的描述：這是一個(gè)小學(xué)英語學(xué)習(xí)的APP，主要提供課文的瀏覽和英文內(nèi)容朗讀的功能，相對來說功能比較簡單。應(yīng)用場景簡單描述如下：進(jìn)入APP1、 進(jìn)入APP，自動裝載對應(yīng)年級(比如三年級上，三年級下，四年級上，四年級下等)的小學(xué)英語課文封面(參見下圖1)。（說明：先按照目前應(yīng)用商店上的APP的做法，不同年級的課文做成不同的APP，未來可以改為一個(gè)APP中包含小學(xué)所有年級段英文課文的版本） 翻頁2、 通過手機(jī)劃屏，或者按界面的“上一頁”，“下一頁”等按鈕可以進(jìn)行翻頁操作，瀏覽整個(gè)英語課文

2、，翻到對應(yīng)頁面，顯示對應(yīng)的頁碼(如圖2，4所示)。3、 點(diǎn)擊“頁碼”可以快捷選擇希望進(jìn)入的頁面(如圖3所示)。朗讀4、 點(diǎn)擊“播放”按鈕可以播放當(dāng)前頁面的英文內(nèi)容，根據(jù)APP的設(shè)置，可以自動只播放當(dāng)前頁面，或者播放所選頁面所在Unit，或者播放整篇課文。5、 在朗讀狀態(tài)下，當(dāng)前頁播放完成后，如果是自動朗讀下一頁的選項(xiàng)，在朗讀下一頁的同時(shí)，頁面自動切換到下一頁。6、 在朗讀狀態(tài)下，進(jìn)行翻頁操作，自動朗讀對應(yīng)頁面的內(nèi)容；7、 在朗讀狀態(tài)下，如果選擇“停止”，自動關(guān)閉朗讀功能；設(shè)置8、 用戶點(diǎn)擊“設(shè)置”按鈕，可以進(jìn)行朗讀模式的設(shè)置；退出9、 用戶選擇退出APP，如果在朗讀狀態(tài)，自動停止朗讀；主要UI

3、界面如下圖所示： 圖1 圖2 圖3 圖4簡單對流程進(jìn)行梳理，界面流程圖如下：其中紅色部分是針對TV需要優(yōu)化的內(nèi)容，主要對鍵值響應(yīng)。2 圖像加載和顯示技術(shù)通過上述分析，首先要實(shí)現(xiàn)英語課本的閱讀和翻頁功能；英語課本最簡單的實(shí)現(xiàn)方法是每一頁用一個(gè)圖片來顯示，具有圖文并茂的好處。圖片的存儲方法可以分為兩種，一種方法是存在本地，另外一種方法是存在網(wǎng)絡(luò)，這兩種方法各有利弊：1） 存在本地：優(yōu)點(diǎn)是顯示效率高，缺點(diǎn)是本地資源占有較大，而且容易被Copy，不利于版權(quán)保護(hù)；2） 存在網(wǎng)絡(luò)：本地資源占用較少，而且可以進(jìn)行防Copy，但是缺點(diǎn)是受網(wǎng)絡(luò)帶寬影響較大，如果手機(jī)端網(wǎng)絡(luò)環(huán)境不好，就無法顯示；本文中的APP的圖

4、片用來顯示英語課本，理論上存在版本問題，存在本地其實(shí)不是非常合適，采用網(wǎng)絡(luò)的方式比較合適，在實(shí)際操作中還需要考慮版權(quán)保護(hù)問題，防止被非法竊取。因?yàn)榫W(wǎng)絡(luò)方式涉及到Web網(wǎng)站的搭建，環(huán)境搭建相對復(fù)雜，所以這個(gè)階段先采用文件的方式實(shí)現(xiàn)，在后續(xù)產(chǎn)品演進(jìn)中再論述網(wǎng)絡(luò)版本的開發(fā)。在Android中顯示圖片常用的控件是ImageView，在本地通過ImageView顯示圖片主要有四種辦法：1. 圖片在項(xiàng)目的res文件夾下面/得到application對象ApplicationInfo appInfo = getApplicationInfo();/得到該圖片的id(name 是該圖片的名字，"dr

5、awable" 是該圖片存放的目錄，appInfo.packageName是應(yīng)用程序的包)int resID = getResources().getIdentifier(name, "drawable", appInfo.packageName);/代碼如下public Bitmap getRes(String name) ApplicationInfo appInfo = getApplicationInfo();int resID = getResources().getIdentifier(name, "drawable", appIn

6、fo.packageName);return BitmapFactory.decodeResource(getResources(), resID); (存放的大部分是一些圖片資源和界面的布局文件。drawable和drawable-*目錄存放的是各種不同分辨率的圖片資源。layout、menu、xml目錄存放的是軟件界面的布局文件，包括菜單、窗口、主界面和設(shè)置界面等；放在這里的圖像資源可能會被aapt工具自動地進(jìn)行無損壓縮優(yōu)化。比如，一個(gè)真彩色但并不需要256色的PNG可能會被轉(zhuǎn)換為一個(gè)帶調(diào)色板的8位PNG。這使得同等質(zhì)量的圖片占用更少的資源。所以我們得意識到這些放在該目錄下的二進(jìn)

7、制圖像在生成時(shí)可能會發(fā)生變化。如果你想讀取一個(gè)圖像位流并轉(zhuǎn)換成一個(gè)位圖(bitmap)，請把圖像文件放在 res/raw/目錄下，這樣可以避免被自動優(yōu)化，要使用這些資源，可以調(diào)用Resources.openRawResource()。)2.android中有個(gè)Assets目錄,這里可以存放只讀文件資源獲取的方式為InputStream is = getResources().getAssets().open(name)；（assets文件夾里面的文件都是保持原始的文件格式，需要用AssetManager以字節(jié)流的形式讀取文件。 1. 先在Activity里面調(diào)用g

8、etAssets()來獲取AssetManager引用。      2. 再用AssetManager的open(String fileName, int accessMode)方法則指定讀取的文件以及訪問模式就能得到輸入流InputStream。       3. 然后就是用已經(jīng)open file 的inputStream讀取文件，讀取完成后記得inputStream.close()。      4.調(diào)用AssetManager.close()關(guān)閉AssetMan

9、ager。需要注意的是，來自Resources和Assets 中的文件只可以讀取而不能進(jìn)行寫的操作）3. 圖片放在src目錄下String path = "com/xiangmu/test.png" /圖片存放的路徑InputStream is = getClassLoader().getResourceAsStream(path); /得到圖片流(不推薦，在src目錄中主要存放源代碼文件和配置文件，這個(gè)方法也是讀取配置文件的方法，雖然也可以用于讀取圖片文件，但是終究不算好的辦法)4. 圖片放在sdcard中，通過文件方式讀取Bitmap imageBitmap = Bit

10、mapFactory.decodeFile(path) (path 是圖片的路徑，跟目錄是/sdcard)（文件讀取方式，圖片打包在安裝包中的，在安裝的時(shí)候安裝到某個(gè)目錄下，這個(gè)目錄必定是和APP安裝目錄相關(guān)的位置，程序中可以先獲得APP的安裝目錄，然后獲得圖片目錄，然后在通過這個(gè)方法讀取文件裝載圖片）3 Android程序發(fā)布為了驗(yàn)證各種圖像加載和顯示技術(shù)在最終發(fā)布apk程序上的不同，還需要對Android程序的發(fā)布有所了解，為了簡單起見，目前這個(gè)版本先在手機(jī)上發(fā)布，在未來的部分再來討論在Android智能電視上的發(fā)布，看看兩者有啥不同。Android程序發(fā)布分為兩個(gè)步驟，第一個(gè)步驟生成ap

11、k工具，第二步是進(jìn)行簽名，第一步可以直接通過ADT的工具完成，第二步可以通過命令的的方式可以用JDK的ketool生專用密鑰文件，然后用jarsigner命令進(jìn)行簽名)或者ADT工具完成。在這里簡單操作方法，當(dāng)然是ADT工具完成啦，詳細(xì)的操作步驟在下面進(jìn)行詳細(xì)描述。4 課文讀取和翻頁功能實(shí)現(xiàn)在這里我采用的是放到res目錄的方案：(一) 創(chuàng)建項(xiàng)目按照HelloWorld項(xiàng)目中說描述的方法創(chuàng)建一個(gè)新的項(xiàng)目AndroidTest01；(二) 準(zhǔn)備圖片將英語課文圖片復(fù)制到resdrawable目錄下，如果res目錄下沒有drawable目錄，那就創(chuàng)建一個(gè)，在這里為了簡化，在英語課文圖片的命名上定義了一

12、個(gè)小規(guī)則，前面封面目錄之類不需要朗讀的部分統(tǒng)一以“img”作為前綴，需要朗讀的課文都以“page”為前綴，后面的數(shù)字就是頁碼。如下圖所示：(三) 畫界面在res目錄下，打開layout目錄下的mail.xml，就是系統(tǒng)的主界面啦，拖一個(gè)imageView，幾個(gè)Button進(jìn)入，然后設(shè)置對應(yīng)的一些屬性，如下圖所示的初步界面就搞成了，這里為了簡單，對ImageView的width和height作了定義。 右鍵點(diǎn)擊按鈕，選擇“Other Properties”，再選擇“All by Name”，最后選擇“Onclick”，然后輸入Click事件的響應(yīng)函數(shù)名稱，指定事件響應(yīng)程序。 (假設(shè)你已經(jīng)有IDE

13、環(huán)境下的的面向?qū)ο缶幊探?jīng)驗(yàn)哦，如果沒有請先惡補(bǔ)下)(四) 寫代碼看看最終生成的代碼：package chencl.androidtest.uitest;import android.app.Activity;import android.os.Bundle;import android.view.*;import ;import android.widget.ImageView;public class AndroidTest01Activity extends Activity private int CurrPage; /* Called when the activity is firs

14、t created. */ Overridepublic void onCreate(Bundle savedInstanceState) /啟動程序 super.onCreate(savedInstanceState); /顯示主界面 setContentView(R.layout.main); /取第一個(gè)課文頁面的索引號 int i =this.getResources().getIdentifier(this.getPackageName()+":drawable/page2",null,null); /找到界面中的ImageView ImageView MyImag

15、eView=(ImageView)this.findViewById(R.id.imageView1); /在ImageView中顯示第一個(gè)課文頁面 MyImageView.setImageResource(i); CurrPage=2; /上一頁 public void onPrevButtonClick(View view) CurrPage-; int i =this.getResources().getIdentifier(this.getPackageName()+":drawable/page"+String.valueOf(CurrPage),null,nul

16、l); ImageView MyImageView=(ImageView)this.findViewById(R.id.imageView1); MyImageView.setImageResource(i); / Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show(); /下一頁 public void onNextButtonClick(View view) CurrPage+; int i =this.getResources().getIdentifier(this.getPackageN

17、ame()+":drawable/page"+String.valueOf(CurrPage),null,null); ImageView MyImageView=(ImageView)this.findViewById(R.id.imageView1); MyImageView.setImageResource(i); /Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show(); /測試的時(shí)候?qū)懙模扇サ?public void onTestButtonClick(View v

18、iew) int i =this.getResources().getIdentifier(this.getPackageName()+":drawable/page2",null,null); ImageView MyImageView=(ImageView)this.findViewById(R.id.imageView1); MyImageView.setImageResource(i); (五) 測試正常點(diǎn)一下綠色的箭頭運(yùn)行就可以了，不過有的時(shí)候會出錯，可以采用下述方法解決：選擇“windowsshow view others”，在下述對話框中選擇“androiddevices”選擇完后，再選擇“reset adb”然后再運(yùn)行，一般情況下就OK.(六) 發(fā)布選中項(xiàng)目，右鍵點(diǎn)擊，選擇“Android toolsexport signed application package”：先進(jìn)行項(xiàng)目檢查：然后創(chuàng)建簽名文件：輸入相關(guān)簽名信息：最后指定輸出文件目錄和文件名就OK了：拿這個(gè)apk放到手機(jī)下安裝下就可以嘍。(