什么是Gallery？

Gallery是一个水平的列表选择框，它允许用户通过拖动来查看上一个、下一个列表选项。

下图是今天要实现的最终效果：

利用Gallery组件实现的一个横向显示图像列表，可以通过左、右滑动屏幕来切换图像，并加上ImageSwitcher实现一个大图片预览功能。

1、一步一步来吧，首先先解决下上半部分（图像导航）

先来看下效果图，下图是利用Gallery组件实现的一个横向显示图像列表，可以通过左、右滑动屏幕来切换图像。

 

直接上代码，注释很全。

MainActivity.java

 package com.example.galleytest;

 import android.app.Activity;

 import android.os.Bundle;

 import android.widget.Gallery;

 /**

  *

  * @author Balla_兔子

  * 和往常控制使用方法大同小异

  * 1、获取数据源

  * 2、配置适配器

  * 3、绑定适配器

  */

 public class MainActivity extends Activity {

     private Gallery gallery;// 声明gallery对象

     private ImageAdapter adapter;//声明自定义adapter对象

     // 1、定义数据源

     private int[] images = { R.drawable.item1, R.drawable.item2,

             R.drawable.item3, R.drawable.item4, R.drawable.item5,

             R.drawable.item6, R.drawable.item7, R.drawable.item8,

             R.drawable.item9, R.drawable.item10, R.drawable.item11,

             R.drawable.item12 };

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         gallery=(Gallery) findViewById(R.id.gallery);//取得对象

         //2、设置适配器

         adapter=new ImageAdapter(images, this);//实例化自定义适配器对象

         //3、绑定适配器

         gallery.setAdapter(adapter);

     }

 }

ImageAdapter.java

 package com.example.galleytest;

 import android.content.Context;

 import android.view.View;

 import android.view.ViewGroup;

 import android.widget.BaseAdapter;

 import android.widget.Gallery;

 import android.widget.ImageView;

 import android.widget.ImageView.ScaleType;

 //自定义适配器，继承BaseAdapter复写方法

 public class ImageAdapter extends BaseAdapter {

     private int images[];

     private Context context;

     public ImageAdapter(int res[],Context context){

         this.images=res;

         this.context=context;

     }

     @Override

     //获取资源总长度

     public int getCount() {

         return images.length;

     }

     @Override

     //根据下标id获取资源对象

     public Object getItem(int position) {

         return images[position];

     }

     @Override

     //根据返回下标id

     public long getItemId(int position) {

         return position;

     }

     @Override

     //根据下标id返回对象的视图view

     public View getView(int position, View convertView, ViewGroup parent) {

         //利用ImageView返回图像展示

         ImageView imageView=new ImageView(context);

         //设置ImageView背景图

         imageView.setBackgroundResource(images[position]);

         //setLayoutParams()这个函数用于代码自定义布局，为创建的view(ImageView)对象设置位置，大小，颜色等一系列的属性

         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));

         //设置展示缩放风格

         imageView.setScaleType(ScaleType.FIT_XY);

         return imageView;

     }

 }

activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:tools="http://schemas.android.com/tools"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:paddingBottom="@dimen/activity_vertical_margin"

     android:paddingLeft="@dimen/activity_horizontal_margin"

     android:paddingRight="@dimen/activity_horizontal_margin"

     android:paddingTop="@dimen/activity_vertical_margin"

     android:orientation="vertical"

     tools:context="com.example.galleytest.MainActivity" >

     <Gallery

             android:id="@+id/gallery"

             android:layout_width="fill_parent"

             android:layout_height="wrap_content"

         />

 </LinearLayout>

执行完上面代码我们会发现，当图片滚动到第一张或者最后一张，就自动停止， 我们可以把它设置成无限循环重复的去展示这些图片。

这里我们只需要去改动自定义ImageAdapter适配器里2个位置就可以实现这个无限循环的效果

其一：返回图片资源长度，我们返回的长度不再是数组长度，而是一个巨大数

     //获取资源总长度

     public int getCount() {

         //return images.length;

         return Integer.MAX_VALUE;//返回一个巨大数

     }

其二：为ImageView设置图片显示资源，我们用取余的方法，让它实现无限循环

     public View getView(int position, View convertView, ViewGroup parent) {

         //利用ImageView返回图像展示

         ImageView imageView=new ImageView(context);

         //设置ImageView背景图

         imageView.setBackgroundResource(images[position%images.length]);    //用取余的方法，让它实现无限循环

         //setLayoutParams()这个函数用于代码自定义布局，为创建的view(ImageView)对象设置位置，大小，颜色等一系列的属性

         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));

         //设置展示缩放风格

         imageView.setScaleType(ScaleType.FIT_XY);

         return imageView;

     }

无限循环轻松搞定，再试试看效果吧~

2、结合ImageSwitcher组件，使得图片浏览效果更为流畅（可以把ImageSwitcher粗略的想象成ImageView的加强版，它可以带来很多效果，比如图片动画）

直接上代码，依旧人性化注释全面~

MainActivity.java

 package com.example.galleytest;

 import android.app.Activity;

 import android.os.Bundle;

 import android.view.View;

 import android.view.animation.AnimationUtils;

 import android.widget.AdapterView;

 import android.widget.Gallery;

 import android.widget.ImageSwitcher;

 import android.widget.ImageView;

 import android.widget.ImageView.ScaleType;

 import android.widget.ViewSwitcher.ViewFactory;

 /**

  *

  * @author Balla_兔子

  * 和往常控制使用方法大同小异

  * 1、获取数据源

  * 2、配置适配器

  * 3、绑定适配器

  *

  * 为Grallery设置监听，因要结合ImageSwitcher，这里需要额外的实现一个图像制造工厂ViewFactory

  */

 public class MainActivity extends Activity implements android.widget.AdapterView.OnItemSelectedListener,ViewFactory{

     private Gallery gallery;// 声明gallery对象

     private ImageSwitcher imageSwitcher;//声明一个ImageSwitcher对象

     private ImageAdapter adapter;//声明自定义adapter对象

     // 1、定义数据源

     private int[] images = { R.drawable.item1, R.drawable.item2,

             R.drawable.item3, R.drawable.item4, R.drawable.item5,

             R.drawable.item6, R.drawable.item7, R.drawable.item8,

             R.drawable.item9, R.drawable.item10, R.drawable.item11,

             R.drawable.item12 };

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         gallery=(Gallery) findViewById(R.id.gallery);//取得对象

         imageSwitcher=(ImageSwitcher) findViewById(R.id.imageSwitcher);//取得对象

         //添加监听

         gallery.setOnItemSelectedListener(this);

         imageSwitcher.setFactory(this);

         //设置动画效果，图片在imageSwitch的渐入渐出效果

         imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));

         imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

         //2、设置适配器

         adapter=new ImageAdapter(images, this);//实例化自定义适配器对象

         //3、绑定适配器

         gallery.setAdapter(adapter);

     }

     @Override

     //实现ViewFactory里的制造图像方法，这里需要返回一个view对象，同样的我们可以采用返回ImageView

     public View makeView() {

         ImageView imageView=new ImageView(this);

         imageView.setScaleType(ScaleType.FIT_CENTER);//展示效果

         return imageView;

     }

     //Gallery组件的监听器

     @Override

     public void onItemSelected(AdapterView<?> parent, View view, int position,

             long id) {

             imageSwitcher.setBackgroundResource(images[position%images.length]);

     }

     @Override

     public void onNothingSelected(AdapterView<?> parent) {

     }

 }

ImageAdapter.java

 package com.example.galleytest;

 import android.content.Context;

 import android.view.View;

 import android.view.ViewGroup;

 import android.widget.BaseAdapter;

 import android.widget.Gallery;

 import android.widget.ImageView;

 import android.widget.ImageView.ScaleType;

 //自定义适配器，继承BaseAdapter复写方法

 public class ImageAdapter extends BaseAdapter {

     private int images[];

     private Context context;

     public ImageAdapter(int res[],Context context){

         this.images=res;

         this.context=context;

     }

     @Override

     //获取资源总长度

     public int getCount() {

         //return images.length;

         return Integer.MAX_VALUE;//返回一个巨大数

     }

     @Override

     //根据下标id获取资源对象

     public Object getItem(int position) {

         return images[position];

     }

     @Override

     //根据返回下标id

     public long getItemId(int position) {

         return position;

     }

     @Override

     //根据下标id返回对象的视图view

     public View getView(int position, View convertView, ViewGroup parent) {

         //利用ImageView返回图像展示

         ImageView imageView=new ImageView(context);

         //设置ImageView背景图

         imageView.setBackgroundResource(images[position%images.length]);    //用取余的方法，让它实现无限循环

         //setLayoutParams()这个函数用于代码自定义布局，为创建的view(ImageView)对象设置位置，大小，颜色等一系列的属性

         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));

         //设置展示缩放风格

         imageView.setScaleType(ScaleType.FIT_XY);

         return imageView;

     }

 }

activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:tools="http://schemas.android.com/tools"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:paddingBottom="@dimen/activity_vertical_margin"

     android:paddingLeft="@dimen/activity_horizontal_margin"

     android:paddingRight="@dimen/activity_horizontal_margin"

     android:paddingTop="@dimen/activity_vertical_margin"

     android:orientation="vertical"

     tools:context="com.example.galleytest.MainActivity" >

     <Gallery

             android:id="@+id/gallery"

             android:layout_width="fill_parent"

             android:layout_height="wrap_content"

         />

     <ImageSwitcher

         android:id="@+id/imageSwitcher"

         android:layout_height="wrap_content"

         android:layout_width="fill_parent"

         android:layout_marginTop="20dp"

         ></ImageSwitcher>

 </LinearLayout>

安卓开发笔记——Gallery组件+ImageSwitcher组件的更多相关文章

  1. 安卓开发笔记——自定义广告轮播Banner（实现无限循环）

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  2. 安卓开发笔记——深入Activity

    在上一篇文章<安卓开发笔记——重识Activity >中,我们了解了Activity生命周期的执行顺序和一些基本的数据保存操作,但如果只知道这些是对于我们的开发需求来说是远远不够的,今天我 ...

  3. 安卓开发笔记——丰富多彩的TextView

    随手笔记,记录一些东西~ 记得之前写过一篇文章<安卓开发笔记——个性化TextView(新浪微博)>:http://www.cnblogs.com/lichenwei/p/4411607. ...

  4. 安卓开发笔记——关于开源项目SlidingMenu的使用介绍（仿QQ5.0侧滑菜单）

    记得去年年末的时候写过这个侧滑效果,当时是利用自定义HorizontalScrollView来实现的,效果如下: 有兴趣的朋友可以看看这篇文件<安卓开发笔记——自定义HorizontalScro ...

  5. 安卓开发笔记——打造万能适配器(Adapter)

    为什么要打造万能适配器? 在安卓开发中,用到ListView和GridView的地方实在是太多了,系统默认给我们提供的适配器(ArrayAdapter,SimpleAdapter)经常不能满足我们的需 ...

  6. 安卓开发笔记——关于Handler的一些总结（上）

    接上篇文章<安卓开发笔记——关于AsyncTask的使用>,今天来讲下在安卓开发里"重中之重"的另一个异步操作类Handler. 今天打算先讲下关于Handler的一些 ...

  7. 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)

    什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...

  8. 安卓开发笔记——Fragment+FragmentTabHost组件(实现新浪微博底部菜单)

    记得之前写过2篇关于底部菜单的实现,由于使用的是过时的TabHost类,虽然一样可以实现我们想要的效果,但作为学习,还是需要来了解下这个新引入类FragmentTabHost 之前2篇文章的链接: 安 ...

  9. 安卓开发笔记——TabHost组件(二)（实现底部菜单导航）

    上面文章<安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航)>中提到了利用自定义View(ImageView+TextView)来设置一个底部菜单的样式 这边再补充一种更为灵 ...

随机推荐

  1. DLL封装Interface(接口)(D2007+win764位)

    相关资料: http://blog.csdn.net/liangpei2008/article/details/5394911 结果注意: 1.函数的传参方向必须一至. DLL实例代码: ZJQInt ...

  2. MAC层作用

    对于无线传感网 MAC,顾名思义,就是介质访问控制,是用来控制无线介质的访问的,由于无线传输是共享空中资源的,必然存在多个无线传感器节点对传输介质的争用,MAC层协议就是用来解决这个问题的,包括冲突的 ...

  3. 【Linux/CentOS】上手常见问题笔记

    场景:Web项目服务端想要运行在Linux系统上,还要编写一些自动化发布代码的Shell脚本,需要学习使用Linux系统. 环境:Windows系统下用虚拟机VMware Workstation Pr ...

  4. PostgreSQL Table Partitioning<转>

    原创文章,转载请务必将下面这段话置于文章开头处(保留超链接).本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/12/13/SQL3_partiti ...

  5. PopupWindow 常用方法学习笔记

    PopupWindow可以实现浮层效果,而且可以自定义显示位置,出现和退出时的动画. 首先解析一个View LayoutInflater inflater = getLayoutInflater(); ...

  6. PHP——大话PHP设计模式——命名空间和类的自动载入

    开发工具:phpstorm phpstudy 命名空间:声明当前文件 类的自动载入

  7. Android——计算器第一次完善

    完善: 1- 处理首位为0 2- 处理首位为“.” 3- 处理前两位为“0.”,此时首位为0,但是不能处理 4- 处理小数点不能重复输入 发现bug:12.3x6 = 如下图: xml <?xm ...

  8. CAS (7) —— Mac下配置CAS 4.x的JPATicketRegistry（服务端）

    CAS (7) -- Mac下配置CAS 4.x集群及JPATicketRegistry(服务端) tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 cas版本: ...

  9. win7系统损坏无法进入系统（dsark.sys文件损坏）(未测试过）

    原文:http://blog.csdn.net/foreverhuylee/article/details/37913837 电脑今天突然开不了机,出现一下画面 即提示d:\Windows\syste ...

  10. thymeleaf 解析html时，出现 SAXParseException: The content of elements must consist of well-formed characte

    thymeleaf 解析html时,出现 SAXParseException: The content of elements must consist of well-formed characte ...