1. 程式人生 > >基於圖像切換器(imageSwitcher)的支持動畫的圖片瀏覽器

基於圖像切換器(imageSwitcher)的支持動畫的圖片瀏覽器

畫的 err ger into back 布局 列表項 wid left

利用GridViewImageSwitcher的基本用法

  1. public class MainActivity extends Activity
  2. {
  3. int[] imageIds = new int[]
  4. {R.drawable.bomb5,R.drawable.bomb6,R.drawable.bomb7,R.drawable.bomb8, R.drawable.bomb9,R.drawable.bomb10,R.drawable.bomb11,R.drawable.bomb12,

R.drawable.bomb13,R.drawable.bomb14, R.drawable.bomb15,R.drawable.bomb16 };

  1. ImageSwitcher switcher;
  2. @Override
  3. public void onCreate(Bundle savedInstanceState)
  4. {
  5. super.onCreate(savedInstanceState);
  6. setContentView(R.layout.main);
  7. // 創建一個List對象,List對象的元素是Map
  8. List<Map<String, Object>> listItems =
  9. new ArrayList<Map<String, Object>>();
  10. for (int i = 0; i < imageIds.length; i++)
  11. {
  12. Map<String, Object> listItem = new HashMap<String, Object>();
  13. listItem.put("image", imageIds[i]);
  14. listItems.add(listItem);
  15. }
  16. // 獲取顯示圖片的ImageSwitcher
  17. switcher = (ImageSwitcher)
  18. findViewById(R.id.switcher);
  19. //
    ImageSwitcher設置圖片切換的動畫效果
  20. switcher.setFactory(new ViewSwitcher.ViewFactory()
  21. {
  22. @Override
  23. public View makeView()
  24. {
  25. // 創建ImageView對象
  26. ImageView imageView = new ImageView(MainActivity.this);
  27. imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
  28. imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
  29. ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
  30. // 返回ImageView對象
  31. return imageView;
  32. }
  33. });
  34. // 創建一個SimpleAdapter
  35. SimpleAdapter simpleAdapter = new SimpleAdapter(this,
  36. listItems
  37. // 使用/layout/cell.xml文件作為界面布局
  38. , R.layout.cell, new String[]{"image"},
  39. new int[] { R.id.image1 });
  40. GridView grid = (GridView) findViewById(R.id.grid01);
  41. // GridView設置Adapter
  42. grid.setAdapter(simpleAdapter);
  43. // 添加列表項被選中的監聽器
  44. grid.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener()
  45. {
  46. @Override
  47. public void onItemSelected(AdapterView<?> parent, View view,
  48. int position, long id)
  49. {
  50. // 顯示當前被選中的圖片
  51. switcher.setImageResource(imageIds[position]);
  52. }
  53. @Override
  54. public void onNothingSelected(AdapterView<?> parent)
  55. {
  56. }
  57. });
  58. // 添加列表項被單擊的監聽器
  59. grid.setOnItemClickListener(new AdapterView.OnItemClickListener()
  60. {
  61. @Override
  62. public void onItemClick(AdapterView<?> parent, View view,
  63. int position, long id)
  64. {
  65. // 顯示被單擊的圖片
  66. switcher.setImageResource(imageIds[position]);
  67. }
  68. });
  69. }
  70. }

XML文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:gravity="center_horizontal">
  7. <!-- 定義一個GridView組件 -->
  8. <GridView
  9. android:id="@+id/grid01"
  10. android:layout_width="match_parent"
  11. android:layout_height="wrap_content"
  12. android:horizontalSpacing="2dp"
  13. android:verticalSpacing="2dp"
  14. android:numColumns="4"
  15. android:gravity="center"/>
  16. <!-- 定義一個ImageSwitcher組件 -->
  17. <ImageSwitcher
  18. android:id="@+id/switcher"
  19. android:layout_marginTop="30dp"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:layout_gravity="center_horizontal"
  23. android:inAnimation="@android:anim/fade_in"
  24. android:outAnimation="@android:anim/fade_out"/>
  25. </LinearLayout>

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="horizontal"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:gravity="center_horizontal"
  7. android:padding="4dp">
  8. <ImageView
  9. android:id="@+id/image1"
  10. android:layout_width="50dp"
  11. android:layout_height="50dp"
  12. />
  13. </LinearLayout>

效果

技術分享

基於圖像切換器(imageSwitcher)的支持動畫的圖片瀏覽器