本節書摘來自異步社群《android開發基礎教程》一書中的第6章,第6.2節gallery界面元件——畫廊展示,作者鄧文淵,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
6.2 gallery界面元件——畫廊展示
android開發基礎教程
gallery元件的展示方式是将圖檔從左到右的方式排列,如同畫廊放置作品一樣。但是較為特殊的是gallery元件支援手指左右拖曳滑動的效果,并且可以選擇指定的圖檔,從界面布局來看是相當靈活而有用的元件。
6.2.1 gallery文法示例與常用的屬性
例如:我們要建立一個gallery元件,名稱為“gallery01”,gallery元件和邊界的距離是5dp,圖檔間的間隔是2dp,寬度填滿整個螢幕,高度根據圖檔高度調整。
gallery提供許多屬性來設定其特性,常用的屬性如下。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL1IGM4MTO0YGMlNWMmlzYhFDNyMjMlRDO0EzN0QzYlZjY2U2MhZTN58CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
6.2.2 gallery程式執行的流程
一般來說gallery程式的執行流程重點如圖6-3所示。
圖6-3 gallery程式的執行流程
gallery元件所使用圖檔的資料源是以baseadapter對象的形式存在,是以在使用前必須要先聲明baseadapter。
6.2.3 繼承baseadapter
使用gallery元件的資料源必須建立一個繼承自baseadapter的對象來放置想要呈現的圖檔資料。在程式中繼承baseadapter後,必須實作getcount()、getview()、getitem()、getitemid()等方法,并将gallery元件欲顯示的圖檔建立在getview()方法中。
建立繼承baseadapter的類
下面我們以建立繼承baseadapter的myadapter類為例,産生的程式結構如下,我們最主要的工作就是在getview()方法加入要顯示的内容,當然預設的參數命名也可改為較易識别的名稱。getcount()擷取共有多少張圖檔,getitem()是擷取目前的選項,getitemid()是擷取目前的選項的id,getview()方法定義要顯示的内容。
預設建立的參數名稱不易識别,通常會更改為較易識别的名稱。
例如:定義gallery元件要顯示的圖檔是一個imageview元件,imageview寬、高為120*80,圖像居中,圖像來源為imageids數組。
6.2.4 示例:使用gallery元件顯示圖檔行
使用gallery元件顯示圖檔行,當在gallery元件中選擇指定的圖檔,同時會在下方的imageview元件顯示完整圖檔,如圖6-4所示。
1.建立項目并完成布局配置
建立項目,在中建立一個gallery元件、imageview元件,并設定gallery元件屬性padding="5dp"、spacing="-5dp"。
2.加入圖檔
在項目目錄下建立檔案夾,加入~共6張,注意檔案名必須使用小寫字母。
3.加入執行的程式代碼
打開。程式中自動建立myadapter類繼承baseadapter類,作為gallery的圖檔資料源,并加入itemselected()事件,當選擇gallery中的圖檔後會在下方的imageview顯示完整圖檔。
第52~75行,繼承baseadapter建立myadapter類,在baseadapter類下必須實作getcount()、getview()、getitem()、getitemid()等方法,最重要的部分是将gallery元件的布局配置建立在getview()方法中。
第54~56行,建立myadapter的構造函數,在構造函數中以mcontext=c;初始化,參數“c”是content類型的全局變量,它是第29行:myadapteradapter=newmyadapter(this);中的“this”參數,也就是項目執行的主程式類“gallery1activity”。
第57~59行,getcount()中使用imageids.length擷取圖檔共有多少張。
第60~65行,getitem()與getitemid()暫時不使用但仍需保留實作結構,是以保留預設内容。
第68~74行,其實gallery元件的内容是一張張的imageview組合起來,這裡我們要利用getview()的内容來設定gallery的布局配置。
第69行,建立一個imageview類型的對象iv,必須加入mcontext參數,表示對象要建立在主程式類gallery1activity中。
第70~72行,設定imageview圖像來源為imageids數組,并設定圖檔寬、高為120*80,居中顯示。
第73行,完成設定傳回自定義的imageview元件。
儲存項目後,按ctrl+f11組合鍵執行項目,在上方顯示的即是gallery元件,使用者可以利用滑鼠拖曳,下方的imageview元件會顯示gallery元件目前中間所顯示的圖檔,如圖6-5所示。
6.2.5 示例:圖檔循環播放的gallery元件
gallery元件并不支援圖檔循環播放,當顯示至最後一張時,下一張圖檔并不會循環至第一張。這裡就必須自行處理,按照項目建立項目,其中布局配置檔案與程式檔案大緻是相同,隻要針對進行調整即可,其源檔案如下:
更改getcount()擷取的圖檔數量,integer.max_value為最大整數。
②原來圖檔播放的索引值一定小于或等于圖檔數量,但是目前的索引值大于圖檔的數量,是以相除後的餘數為播放圖檔的索引,即可正常播放圖檔。
③将目前圖檔顯示在下方的imageview。圖檔索引也和上方的計算方式相同。
儲存項目後,按ctrl+f11組合鍵執行項目。