基于图像切换器(imageSwitcher)的支持动画的图片浏览器

时间:2024-04-10 17:35:28

利用GridView和ImageSwitcher的基本用法

  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)的支持动画的图片浏览器