Android 滑动效果基础篇（四）—— Gallery + GridView-阿里云开发者社区

Android 滑动效果基础篇（四）—— Gallery + GridView

2012-05-02 1547

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

http://blog.csdn.net/sunboy_2050/article/details/7467739

Android系统自带一个GridView和Gallery两个控件，GridView网格显示，Gallery单个浏览，两者结合起来可以真正实现Gallery浏览图片效果。

本示例通过GridView和Gallery两个控件，模仿实现一个完整的仿Gallery图像集的图片浏览效果。效果图如下：

1、GridView

首先，自定义一个GridImageAdapter图片适配器，用于填充GridView控件的图片

[java]view plaincopyprint? 
   
 public class GridImageAdapter extends BaseAdapter {   
     private Context mContext;   
     Drawable btnDrawable;   
    
     public GridImageAdapter(Context context) {   
         mContext = context;   
         Resources resources = context.getResources();   
         btnDrawable = resources.getDrawable(R.drawable.bg);   
     }   
    
     @Override   
     public int getCount() {   
         return ImageSource.mThumbIds.length;   
     }   
    
     @Override   
     public Object getItem(int position) {   
         return position;   
     }   
    
     @Override   
     public long getItemId(int position) {   
         return position;   
     }   
    
     @Override   
     public View getView(int position, View convertView, ViewGroup parent) {   
         ImageViewExt imageView;   
         int space;   
    
         if (convertView == null) {   
             imageView = new ImageViewExt(mContext);   
             if (imageCol == 5) {   
                 space = dm.heightPixels / imageCol - 6;   
                 imageView.setLayoutParams(new GridView.LayoutParams(space, space));   
             } else {   
                 space = dm.widthPixels / imageCol - 6;   
                 imageView.setLayoutParams(new GridView.LayoutParams( space, space));   
             }   
             imageView.setAdjustViewBounds(true);   
             imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);    // 缩放图片使其长和宽一样   
    
              imageView.setPadding(3, 3, 3, 3);   
         } else {   
             imageView = (ImageViewExt) convertView;   
         }   
         imageView.setImageResource(ImageSource.mThumbIds[position]);   
    
         return imageView;   
     }   
 }   

然后，用 GridImageAdapter填充GridView

[java]view plaincopyprint? 
   
 gridView = (GridView) findViewById(R.id.myGrid);   
 gridImageAdapter = new GridImageAdapter(this);   
 gridView.setAdapter(gridImageAdapter);   
 gridView.setOnItemClickListener(listener); // 设置点击监听事件   

最后，设置GridView控件的点击监听事件

[java]view plaincopyprint? 
   
 AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {   
     @Override   
     public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {   
         Intent intent = new Intent();   
         intent.setClass(GridViewActivity.this, GalleryActivity.class);   
         intent.putExtra("position", position);   
         startActivity(intent);   
     }   
 };   

2、Gallery

完成了GridView的图片显示、监听事件后，现在点击图片，会启动一个Activity来显示当前点击的图片，此时显示图片的控件便是Gallery

首先，同GridView一样，自定义一个ImageAdapter图片适配器，用来填充Gallery

[java]view plaincopyprint? 
   
 public class ImageAdapter extends BaseAdapter {   
     private Context mContext;    
     private int mPos;   
    
     public ImageAdapter(Context context) {   
         mContext = context;   
     }   
    
     public void setOwnposition(int ownposition) {   
         this.mPos = ownposition;   
     }   
    
     public int getOwnposition() {   
         return mPos;   
     }   
    
     @Override   
     public int getCount() {   
         return ImageSource.mThumbIds.length;   
     }   
    
     @Override   
     public Object getItem(int position) {    
         mPos=position;   
         return position;   
     }   
    
     @Override   
     public long getItemId(int position) {   
         mPos=position;    
         return position;   
     }   
    
     @Override   
     public View getView(int position, View convertView, ViewGroup parent) {   
         mPos=position;   
         ImageView imageview = new ImageView(mContext);   
         imageview.setBackgroundColor(0xFF000000);   
         imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);   
         imageview.setLayoutParams(new myGallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));   
         imageview.setImageResource(ImageSource.mThumbIds[position]);   
            
         return imageview;   
     }   
 }   

然后，用 ImageAdapter填充Gallery

[java]view plaincopyprint? 
   
 myGallery  galllery = (myGallery) findViewById(R.id.mygallery);   
 Intent intent = getIntent();   
 position = intent.getIntExtra("position", 0);   // 获取GridViewActivity传来的图片位置position    
 ImageAdapter imgAdapter=new ImageAdapter(this);        
 galllery.setAdapter(imgAdapter);        // 设置图片ImageAdapter   
 galllery.setSelection(position);        // 设置当前显示图片   
        
     Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );     // Gallery动画   
     galllery.setAnimation(an);    

此时，如果细心可以注意到，我们的Gallery也是自己定义的myGallery，具体定义如下：

[java]view plaincopyprint? 
   
 public class myGallery extends Gallery {   
     boolean isFirst = false;   
     boolean isLast = false;   
    
     public myGallery(Context context) {   
         super(context);   
     }   
    
     public myGallery(Context context, AttributeSet paramAttributeSet) {   
         super(context, paramAttributeSet);   
     }   
    
     /** 是否向左滑动（true - 向左滑动； false - 向右滑动） */   
     private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {      
         return e2.getX() > e1.getX();   
     }   
    
     @Override   
     public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {   
         ImageAdapter ia = (ImageAdapter) this.getAdapter();   
         int p = ia.getOwnposition();    // 获取当前图片的position   
         int count = ia.getCount();      // 获取全部图片的总数count   
         int kEvent;   
         if (isScrollingLeft(e1, e2)) {   
             if (p == 0 && isFirst) {   
                 Toast.makeText(this.getContext(), "已是第一页", Toast.LENGTH_SHORT).show();   
             } else if (p == 0) {   
                 isFirst = true;   
             } else {   
                 isLast = false;   
             }   
    
             kEvent = KeyEvent.KEYCODE_DPAD_LEFT;   
         } else {   
             if (p == count - 1 && isLast) {   
                 Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();   
             } else if (p == count - 1) {   
                 isLast = true;   
             } else {   
                 isFirst = false;   
             }   
    
             kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;   
         }   
         onKeyDown(kEvent, null);   
         return true;   
     }   
 }   

GalleryActivity的布局文件gallery.xml

[html]view plaincopyprint? 
   
 <?xml version="1.0" encoding="utf-8"?>   
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
     android:layout_width="match_parent"   
     android:layout_height="match_parent"   
     android:gravity="center"   
     android:orientation="horizontal"   
     android:padding="10dip" >   
     <RelativeLayout   
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:background="#000000"   
         android:padding="2dip" >   
         <com.homer.gridgallery.myGallery   
             android:id="@+id/mygallery"   
             android:layout_width="fill_parent"   
             android:layout_height="fill_parent"   
             android:spacing="16dp" />   
     </RelativeLayout>   
 </LinearLayout>   