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

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

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

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

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

5、awable" 是該圖片存放的目錄，appInfo.packageName是應用程序的包)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工具自動地進行無損壓縮優(yōu)化。比如，一個真彩色但并不需要256色的PNG可能會被轉(zhuǎn)換為一個帶調(diào)色板的8位PNG。這使得同等質(zhì)量的圖片占用更少的資源。所以我們得意識到這些放在該目錄下的二進

7、制圖像在生成時可能會發(fā)生變化。如果你想讀取一個圖像位流并轉(zhuǎn)換成一個位圖(bitmap)，請把圖像文件放在 res/raw/目錄下，這樣可以避免被自動優(yōu)化，要使用這些資源，可以調(diào)用Resources.openRawResource()。)2.android中有個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 中的文件只可以讀取而不能進行寫的操作）3. 圖片放在src目錄下String path = "com/xiangmu/test.png" /圖片存放的路徑InputStream is = getClassLoader().getResourceAsStream(path); /得到圖片流(不推薦，在src目錄中主要存放源代碼文件和配置文件，這個方法也是讀取配置文件的方法，雖然也可以用于讀取圖片文件，但是終究不算好的辦法)4. 圖片放在sdcard中，通過文件方式讀取Bitmap imageBitmap = Bit

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

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

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

13、環(huán)境下的的面向?qū)ο缶幊探?jīng)驗哦，如果沒有請先惡補下)(四) 寫代碼看看最終生成的代碼：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); /取第一個課文頁面的索引號 int i =this.getResources().getIdentifier(this.getPackageName()+":drawable/page2",null,null); /找到界面中的ImageView ImageView MyImag

15、eView=(ImageView)this.findViewById(R.id.imageView1); /在ImageView中顯示第一個課文頁面 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(); /測試的時候?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); (五) 測試正常點一下綠色的箭頭運行就可以了，不過有的時候會出錯，可以采用下述方法解決：選擇“windowsshow view others”，在下述對話框中選擇“androiddevices”選擇完后，再選擇“reset adb”然后再運行，一般情況下就OK.(六) 發(fā)布選中項目，右鍵點擊，選擇“Android toolsexport signed application package”：先進行項目檢查：然后創(chuàng)建簽名文件：輸入相關(guān)簽名信息：最后指定輸出文件目錄和文件名就OK了：拿這個apk放到手機下安裝下就可以嘍。(