《Android》『Gallery』- 左右滑動圖庫瀏覽元件的基本用法
《Android Developers 參考文獻》
➥Gallery (This class was deprecated in API level 16, Android 4.1)
《簡單介紹》
今天要來介紹的是在 Android 4.1 的版本以後，已經不再支援的祖先級元件『Gallery』，它是一個橫向滑動的圖片瀏覽元件，有點類似畫廊的感覺，目前 google 建議的替代方案是用 HorizontalScrollView 或者是 ViewPager 來取代，但缺點是在 Gallery 中預留的介面特性必須一一重寫，幸好我們還有另一個辦法，就是在 GitHub 上有一個神人提供了自製元件『EcoGallery』，不僅更省效能，其所定義的方法與用法大部分皆與 Gallery 一致，同時並保留了 Gallery 的許多介面特性，對於初學者來說會是比較好上手且無痛的替代方案。
《自訂一個繼承 BaseAdapter 的 Adapter》
與 Spinner、GridView、ListView 元件一樣，Gallery 必須透過一個 Adapter 來設定它的資料來源以及介面格式，這邊我們宣告一個繼承自 BaseAdapter 的 Adapter，並命名為 GalleryAdapter，程式碼片段如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
package ... import ... public class GalleryAdapter extends BaseAdapter { private LayoutInflater mLayoutInflater; List<Map<String, Object>> mItemList; public GalleryAdapter(Context context, List<Map<String, Object>> itemList) { mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); mItemList = itemList; } @Override public int getCount() { //取得 Gallery 列表 Item 的數量 return mItemList.size(); } @Override public Object getItem(int position) { //取得 Gallery 列表於 position 位置上的 Item return position; } @Override public long getItemId(int position) { //取得 Gallery 列表於 position 位置上的 Item 的 ID return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { //設定與回傳 convertView 作為顯示在這個 position 位置的 Item 的 View。 View v = mLayoutInflater.inflate(R.layout.gallery_view_item, parent, false); ImageView imgView = (ImageView) v.findViewById(R.id.imgView); TextView txtView = (TextView) v.findViewById(R.id.txtView); imgView.setImageResource(Integer.valueOf(mItemList.get(position).get("Item icon").toString())); txtView.setText(mItemList.get(position).get("Item title").toString()); return v; } } |
GalleryAdapter.java
我們透過建構子傳入 Gallery 的項目內容 mItemList，並且宣告一個名為 mLayoutInflater 的 LayoutInflater，用以把自訂介面 gallery_view_item.xml 中所表述的 layout 轉化為 View。
在 getView() 中，我們宣告了一個 View 物件來定義 Gallery 中顯示在這個 position 的 Item 的 View， 因此為了要讓 Gallery 使用自訂的介面，我們將自訂介面 gallery_view_item.xml 透過 mLayoutInflater 指定給它，因此，Gallery 的每一個 Item 介面會一致的變成 gallery_view_item.xml 的樣式，接著，我們再將 gallery_view_item.xml 中所宣告的不同元件(ImageView, TextView)定義好行為即可。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" > <ImageView android:id="@+id/imgView" android:layout_width="wrap_content" android:layout_height="match_parent" /> <TextView android:id="@+id/txtView" android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="20sp" android:paddingLeft="10dp" /> </LinearLayout> |
gallery_view_item.xml
我們自訂了一個名為 gallery_view_item.xml 的介面，裡面包含了一個 ImageView 與 TextView，並在GalleryAdapter 中的 getView() 方法中指定這個介面為每個 item 的 layout。
接著，在 MainActivity 中宣告 Gallery 並使用定義好的 GalleryAdapter，程式碼片段如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
package ... import ... public class MainActivity extends Activity { private static final String ITEM_TITLE = "Item title"; private static final String ITEM_ICON = "Item icon"; private TextView mTxtR; private Gallery gallery; private GalleryAdapter mGalleryAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTxtR = (TextView) findViewById(R.id.txtR); //宣告 Gallery 元件 gallery = (Gallery)findViewById(R.id.gallery); //定義 Gallery 中每個 Item 的資料 List<Map<String, Object>> itemList = new ArrayList<Map<String, Object>>(); String[] regionList = {"1", "2", "3", "4"}; TypedArray regionIconList = getResources().obtainTypedArray(R.array.region_icon_list); for (int i = 0; i < regionList.length; i++) { Map<String, Object> item = new HashMap<String, Object>(); item.put(ITEM_TITLE, regionList[i]); item.put(ITEM_ICON, regionIconList.getResourceId(i, 0)); itemList.add(item); } // Gallery 中所需之資料參數可透過修改 Adapter 的建構子傳入 mGalleryAdapter = new GalleryAdapter(MainActivity.this, itemList); gallery.setAdapter(mGalleryAdapter); //設定 Gallery 的 Adapter gallery.setSpacing(60); //設定 Item 之間的間距 gallery.setGravity(Gravity.center); //設定 Item 之間的對齊方式 gallery.setAnimationDuration(100); //設定動畫切換時間(毫秒) gallery.setOnItemClickListener(GalleryOnItemClickListener);//設定 Item 點擊事件監聽器 } //定義 Item 的 OnClick 事件監聽器 private AdapterView.OnItemClickListener GalleryOnItemClickListener = new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { TextView txtItemTitle = (TextView) view.findViewById(R.id.txtView); mTxtR.setText(txtItemTitle.getText()); } }; . . . } |
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.listviewcustomsample.MainActivity" > <TextView android:id="@+id/txtR" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="123" android:textSize="20sp" /> <Gallery android:id="@+id/gallery" android:layout_height="wrap_content" android:layout_width="match_parent" /> </RelativeLayout> |
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<resources> . . . <string-array name="region_icon_list"> <item >@drawable/list_view_region_asia</item> <item >@drawable/list_view_region_america</item> <item >@drawable/list_view_region_europe</item> <item >@drawable/list_view_region_oceania</item> </string-array> ... </resources> |
string.xml
相信眼尖的讀者會發現，這邊的程式碼範例跟 ListView 中的範例幾乎一模一樣，差別只在於使用 ListView 或者是 Gallery 元件而已。透過這種使用方式，Gallery 亦可以擁有高度自由化的介面設計。
臉書留言
一般留言