我们有时候在iPhone手机上或者Windows上面看到动态的图片,可以通过鼠标或者手指触摸来移动它,产生动态的图片滚动效果,还可以根据你的点击或者触摸触发其他事件响应。同样的,在Android中也提供这这种实现,这就是通过Gallery在UI上实现缩略图浏览器。
我们来看看Gallery是如何来实现的,先把控件从布局文件中声明,只需知道ID为gallery。



1


Gallery gallery = (Gallery) findViewById(R.id.gallery);




 一般情况下,我们在Android中要用到类似这种图片容器的控件,都需要为它指定一个适配器,让它可以把内容按照我们定义的方式来显示,因此我们来给它加一个适配器,至于这个适配器如何实现,后面接着来操作,这里只需知道这个适配器的类叫





1


ImageAdapter。 gallery.setAdapter( new ImageAdapter( this ));




复制代码接下来就是重头戏了,适配器可以说是最重要的,我们来看看如何做?到这里似乎还缺少一些很重要的东西?什么东西呢?我们需要显示的是图片,那么图片我们当然首先要准备好,这里我们准备了5张图片(存放drawable文件夹中),我们用其IDs做索引,以便在适配器中使用。





1



2



3



4



5



6



7


private Integer[] mps = {



R.drawable.icon1,



R.drawable.icon2,



R.drawable.icon3,



R.drawable.icon4,



R.drawable.icon5



};




OK,这里将开始定义适配器了,通过继承BaseAdapter用以实现的适配器。 





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


public class ImageAdapter extends BaseAdapter {



private Context mContext;



public ImageAdapter(Context context) {



mContext = context;



}



 



public int getCount() {



return mps.length;



}



 



public Object getItem( int position) {



return position;



}



 



public long getItemId( int position) {



return position;



}



 



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



ImageView image = new ImageView(mContext);



image.setImageResource(mps[position]);



image.setAdjustViewBounds( true );



image.setLayoutParams( new Gallery.LayoutParams(



LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));



return image;



}



}




至此,整个Gallery基本都是先完成了,我们还需要为它添加一个监听器,否则这个缩略图浏览器就仅仅只可以看不能用了。





1



2



3



4



5



6



7



8



9



10


gallery.setOnItemSelectedListener( new AdapterView.OnItemSelectedListener() {



@Override



public void onItemSelected(AdapterView<?> parent, View v, int position, long id) {



}



 



@Override



public void onNothingSelected(AdapterView<?> arg0) {



//这里不做响应



}



});




一、效果图展示

最近下载几款手机应用研究了下,发了有些自定义控件惊人的相似,所以我觉得在以后的开发中,对一些控件的复用肯定是很多的,在首页(非载入页)一般都会有一个幻灯片效果,既可以放广告也可以放推荐,如果图片设计的好看,效果一般都会不错,既然用到了Gallery,也附带把相框效果的例子写一写(淘宝详情界面的商品图片滑动展示)

(1)幻灯片效果展示:

android ppt 演示模式 android 播放ppt_java

android ppt 演示模式 android 播放ppt_移动开发_02

android ppt 演示模式 android 播放ppt_ui_03

(2)商品图片滑动展示

android ppt 演示模式 android 播放ppt_ico_04

android ppt 演示模式 android 播放ppt_移动开发_05

android ppt 演示模式 android 播放ppt_ico_06

查看大图:

android ppt 演示模式 android 播放ppt_ico_07

 

二、部分代码说明

1、幻灯片效果的实现:
自定义Gallery:DetailGallery.java
可视界面:ImgSwitchActivity.java
适配类:GalleryIndexAdapter.java
自定义Gallery主要重写onFling通过按下和松手的位置不同比较是向右移动还是向左移动,部分代码如下:





1



2



3



4



5



6



7



8



9



10



11



12



13



14



15


private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {



return e2.getX() > e1.getX();



}



@Override



public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,



float velocityY) {



int kEvent;



if (isScrollingLeft(e1, e2)) {



kEvent = KeyEvent.KEYCODE_DPAD_LEFT;



} else {



kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;



}



onKeyDown(kEvent, null );



return true ;



}




2、在适配类 GalleryIndexAdapter主要完成幻灯片的循环播放,在getCount里面返回值返回Integer.MAX_VALUE,然后在getView里面根据position与传进来初始图片个数进行余数计算得到每次循环到哪张图片。部分代码如下:




1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18


@Override



public int getCount() {



// TODO Auto-generated method stub



return Integer.MAX_VALUE;



}



 



……



 



@Override



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



// TODO Auto-generated method stub



ImageView imageView = new ImageView(context);



imageView.setBackgroundResource(imagList.get(position%imagList.size()));



imageView.setScaleType(ScaleType.FIT_XY);



imageView.setLayoutParams( new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT



, Gallery.LayoutParams.WRAP_CONTENT));



return imageView;



}




     
3、在可视界面里面实现逻辑控制,通过定时器定时刷新幻灯片,定时器通过定时发送消息,消息接受处理机制接收到消息之后,就模拟滑动事件,调用Gallery的onFling方法实现图片自动切换效果。选择按钮的显示效果(RadioButton)需要在Gallery的setOnItemSelectedListener进行处理。 





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



64



65



66



67



68



69



70



71



72



73



74



75



76



77



78



79


//定时器和事件处理5秒刷新一次幻灯片



/** 展示图控制器,实现展示图切换 */



final Handler handler_gallery = new Handler() {



public void handleMessage(Message msg) {



/* 自定义屏幕按下的动作 */



MotionEvent e1 = MotionEvent.obtain(SystemClock.uptimeMillis(),



SystemClock.uptimeMillis(), MotionEvent.ACTION_UP,



89.333336f, 265.33334f, 0);



/* 自定义屏幕放开的动作 */



MotionEvent e2 = MotionEvent.obtain(SystemClock.uptimeMillis(),



SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN,



300.0f, 238.00003f, 0);



 



myGallery.onFling(e2, e1, -800, 0);



/* 给gallery添加按下和放开的动作,实现自动滑动 */



super.handleMessage(msg);



}



};



protected void onResume() {



autogallery();



super.onResume();



};



private void autogallery() {



/* 设置定时器,每5秒自动切换展示图 */



Timer time = new Timer();



TimerTask task = new TimerTask() {



@Override



public void run() {



Message m = new Message();



handler_gallery.sendMessage(m);



}



};



time.schedule(task, 8000, 5000);



}



//指示按钮和gallery初始化过程以及事件监听添加过程



//初始化



void init(){



myGallery = (DetailGallery)findViewById(R.id.myGallery);



gallery_points = (RadioGroup) this.findViewById(R.id.galleryRaidoGroup);



ArrayList<Integer> list = new ArrayList<Integer>();



list.add(R.drawable.banner1);



list.add(R.drawable.banner2);



list.add(R.drawable.banner3);



list.add(R.drawable.banner4);



GalleryIndexAdapter adapter = new GalleryIndexAdapter(list, context);



myGallery.setAdapter(adapter);



//设置小按钮



gallery_point = new RadioButton[list.size()];



for (int i = 0; i < gallery_point.length; i++) {



layout = (LinearLayout) inflater.inflate(R.layout.gallery_icon, null);



gallery_point[i] = (RadioButton) layout.findViewById(R.id.gallery_radiobutton);



gallery_point[i].setId(i);/* 设置指示图按钮ID */



int wh = Tool.dp2px(context, 10);



RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(wh, wh); // 设置指示图大小



gallery_point[i].setLayoutParams(layoutParams);



layoutParams.setMargins(4, 0, 4, 0);// 设置指示图margin值



gallery_point[i].setClickable(false);/* 设置指示图按钮不能点击 */



layout.removeView(gallery_point[i]);//一个子视图不能指定了多个父视图



gallery_points.addView(gallery_point[i]);/* 把已经初始化的指示图动态添加到指示图的RadioGroup中 */



}



}



//添加事件



void addEvn(){



myGallery.setOnItemSelectedListener( new OnItemSelectedListener() {



 



@Override



public void onItemSelected(AdapterView<?> arg0, View arg1,



int arg2, long arg3) {



// TODO Auto-generated method stub



gallery_points.check(gallery_point[arg2%gallery_point.length].getId());



}



 



@Override



public void onNothingSelected(AdapterView<?> arg0) {



// TODO Auto-generated method stub



 



}



});



}




4、商品图片滑动实现过程:
图片滑动效果和上面的幻灯片效果非常的类似,只是在逻辑处理和界面上有一些小小的区别。
(1)适配器类GalleryAdapter.java上面进行了图片缩放处理,节省了内存开销,又可把图片按照自己的要求缩放。





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


//由于是测试case,所以图片都是写死的为了区别,在position = 1的时候换了一张图片



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



// TODO Auto-generated method stub



ImageView imageView = (ImageView) LayoutInflater.from(context).inflate(R.layout.img,



null );



Bitmap bitmap = null ;



try {



if (position == 1 ){



bitmap = BitmapFactory.decodeStream(assetManager.open( "xpic11247_s.jpg" ));



imageView.setTag( "xpic11247_s.jpg" );



}



else {



bitmap = BitmapFactory.decodeStream(assetManager.open( "item0_pic.jpg" ));



imageView.setTag( "item0_pic.jpg" );



}



 



} catch (IOException e) {



// TODO Auto-generated catch block



e.printStackTrace();



}



// 加载图片之前进行缩放



int width = bitmap.getWidth();



int height = bitmap.getHeight();



float newHeight = 200 ;



float newWidth = width*newHeight/height;



float scaleWidth = (( float ) newWidth) / width;



float scaleHeight = (( float ) newHeight) / height;



// 取得想要缩放的matrix参数



Matrix matrix = new Matrix();



matrix.postScale(scaleWidth, scaleHeight);



// 得到新的图片



Bitmap newbm = Bitmap.createBitmap(bitmap, 0 , 0 , width, height, matrix, true );



System.out.println(newbm.getHeight()+ "-----------" +newbm.getWidth());



imageView.setImageBitmap(newbm);



// }



return imageView;



 



}




       
(2)添加了一个相框效果,如果图片加载失败,就会出现一个图片压缩之后大小相等的相框图片。





1



2



3



4



5



6



7



8


<? xml version = "1.0" encoding = "utf-8" ?>



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



android:id = "@+id/waterfall_image"



android:layout_width = "fill_parent"



android:layout_height = "fill_parent"



android:background = "@drawable/image_border"



>



</ ImageView >




三、开发中遇到一些问题1、




1


layout.removeView(gallery_point[i]); //一个子视图不能指定了多个父视图




如果需要把当前子childview添加到另外一个view里面去,则必须在当前的父View里面移除掉当前的childView,如果不进行这样处理则会抛出Caused by: java.lang.IllegalStateException异常,提示The specified child already has a parent. You must call removeView() on the child's parent first.
2、在进行图片缩放的时候,记得处理好dp和px直接的转换。