资讯专栏INFORMATION COLUMN

图片切换器:剖析Gallery和ImageSwitcher的一些细节

cheukyin / 1450人阅读

摘要:说明整个过程是通过做一个图片切换器来分析的。作用是循环给添加两个。目的是让图片高度和保持一致文件代码将放置在最底部采用格式,前两位表示透明度,设置中的多个的间距第一次写博客,有错误的地方还请批评指正

说明:

整个过程是通过做一个图片切换器来分析的。直接上图和代码(第一次发表博客,有错误之处还请指教):

整个实现逻辑:

将多个图片通过BaseAdapter加入到Gallery中,(Gallery可以将每个图片横着排列,我们可以通过滑动或者点击来对图片进行选择)。

选择Gallery图片时会触发Gallery的OnItemSelectedListener监听器,这个监听器会告诉你点击的图片的索引,拿到索引后就可以将它显示到ImageSwitcher中了。(ImageSwitcher的实现原理是操作两个ImageView,使这两个ImageView在切换的时候可以模拟幻灯片的淡入淡出等操作,使效果更好看。)

通过以下的层级关系可以很明显的看出!

将代码贴出来,为了方便阅读写了注释:

ImageShowActivity.java 文件代码

</>复制代码

  1. public class ImageShowActivity extends Activity implements ViewFactory {
  2. ImageSwitcher imageSwitcher; //习惯将控件的声明写在这里
  3. Gallery gallery; //习惯将控件的声明写在这里
  4. int[] my_images=new int[]{ //所有在Gallery上要显示的图片路径保存在这里
  5. R.drawable.a1,
  6. R.drawable.a2,
  7. R.drawable.a3,
  8. R.drawable.a4,
  9. R.drawable.a5,
  10. R.drawable.a6
  11. };
  12. @Override
  13. protected void onCreate(Bundle savedInstanceState) {
  14. super.onCreate(savedInstanceState);
  15. requestWindowFeature(Window.FEATURE_NO_TITLE);
  16. setContentView(R.layout.activity_image_show);
  17. setTitle("image_show");
  18. imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher1);//得到ImageSwitcher控件
  19. imageSwitcher.setFactory(this);//调用此方法前,当前Activity要先实现ViewFactory接口,
  20. //这个接口必须继承makeView()方法(写在后面)。
  21. //作用是循环给ImageSwitcher添加两个ImageView。
  22. //下面两个方法在设置imageSwitcher幻灯片的转换效果为淡入淡出
  23. imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
  24. imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
  25. gallery=(Gallery) findViewById(R.id.gallery1);
  26. //下面是自己创建的一个继承于BaseAdapter的MyImagesAdapter,
  27. //用来装载所有的图片。就相当于一个中间转换器,
  28. //先得到所有的图片,再将所用的图片传给Gallery
  29. MyImagesAdapter adapter = new MyImagesAdapter(this, my_images);
  30. gallery.setAdapter(adapter); //将所用的图片传给Gallery
  31. gallery.setOnItemSelectedListener(new OnItemSelectedListener() {
  32. //当点击Gallery选择内部图片时,将调用这个监听器,这里实现了给ImageSwitcher设置图片
  33. @Override
  34. public void onItemSelected(AdapterView arg0, View arg1,
  35. int arg2, long arg3) {
  36. //给ImageSwitcher设置图片,arg2是当前点击的图片索引值
  37. imageSwitcher.setImageResource(my_images[arg2]);
  38. }
  39. @Override
  40. public void onNothingSelected(AdapterView arg0) {
  41. // TODO Auto-generated method stub
  42. }
  43. });
  44. }
  45. @Override
  46. public View makeView() { //ViewFactory接口的继承方法,ViewFactory会循环调用两次这个方法,目的是创建两个ImageVIew,
  47. //这样才能执行切换效果
  48. ImageView iv=new ImageView(this);
  49. iv.setBackgroundColor(0xFF000000); //设置背景颜色
  50. iv.setScaleType(ImageView.ScaleType.FIT_XY);//setScaleType()是ImageView控件在承载图片时,对图片处理的各种方式,
  51. //此处是将图片的长宽布满ImageView。ImageView的scaleType的属性有MATRIX(默认)、
  52. //CENTER、CENTER_CORP、CENTER_INSIDE、FIT_CENTER、FIT_END、FIT_START、FIT_XY
  53. //有一个博主对这个属性讲解的很详细,可以去看一下。[Android ImageView的scaleType属性与adjustViewBounds属性][3]
  54. iv.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
  55. return iv;
  56. }
  57. /**
  58. **
  59. ** 创建一个Adapter适配器,来装图片数组my_images[],
  60. ** 在这个适配器中我们新建了一个ImageView控件,来显示每一张图片,
  61. ** 最后通过这个适配器的getView()方法返回装有图片的ImageView给Gallery
  62. **(这个适配器本身封装了循环,不同的图片在循环过程中放在了不同的ImageView中,最后这个ImageView再一个个排列在Gallery中)。
  63. **
  64. */
  65. public class MyImagesAdapter extends BaseAdapter{
  66. private Context context; //后面手动创建ImageView控件需要用到Context,
  67. private int[] img; //用来接收图片数组
  68. public MyImagesAdapter(Context context,int[] images){ //自己定义构造函数,用来在创建实例的时候传参数
  69. this.context=context;
  70. this.img=images;
  71. }
  72. @Override
  73. public int getCount() {
  74. return img.length; //必填,这样才知道有多少张图片
  75. }
  76. @Override
  77. public Object getItem(int position) {
  78. return null;
  79. }
  80. @Override
  81. public long getItemId(int position) {
  82. return 0;
  83. }
  84. @Override
  85. public View getView(int position, View convertView, ViewGroup parent) { //这个方法很重要,实现逻辑是:
  86. //1.不同的图片在循环过程中放在了不同的ImageView中;
  87. //2.最后各个ImageView再一个个排列在Gallery中
  88. ImageView imageView=new ImageView(context);
  89. imageView.setImageResource(img[position]);
  90. imageView.setAdjustViewBounds(true); //让ImageView调整宽高比和图片一样。目的是让图片高度和Gallery保持一致
  91. imageView.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
  92. return imageView;
  93. }
  94. }
  95. @Override
  96. public boolean onCreateOptionsMenu(Menu menu) {
  97. getMenuInflater().inflate(R.menu.image_show, menu);
  98. return true;
  99. }
  100. @Override
  101. public boolean onOptionsItemSelected(MenuItem item) {
  102. int id = item.getItemId();
  103. if (id == R.id.action_settings) {
  104. return true;
  105. }
  106. return super.onOptionsItemSelected(item);
  107. }
  108. }

activity_image_show.xml 文件代码

</>复制代码

第一次写博客,有错误的地方还请批评指正!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/65650.html

相关文章

  • Android Gallery2技术分析

    摘要:渲染和事件处理通过这个数结构传递。对应的数据适配器分别是。用图形表示如下数据模型和数据流分析数据适配器是数据到的桥梁,连接数据源和。由管理,等在初始化的时候会通过获取一个,这个就是的数据的最终来源,即数据适配器的数据来源。 概述   图库和相机在内部实现上其实是共用的一个app,即Gallery2。它们是Gallery2的两个不同的入口。图库的主要功能是展示和管理设备中的或者网络上的媒...

    yedf 评论0 收藏0
  • JS与HTML标签是分离

    一个单的利用JS切换图片的功能showImg(https://segmentfault.com/img/bVQTPa?w=1094&h=748);写法1: JS切换图片 图片描述 function showPic(whichpic){ ...

    StonePanda 评论0 收藏0

发表评论

0条评论

cheukyin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<