Android的GridView和Gallery结合Demo

Android的GridView和Gallery结合Demo

Demo介绍：首页是一个GridView加载图片，竖屏时显示3列图片，横屏时显示4列图片;并且对图片进行大小限制和加灰色边框处理。

点击某一张图片，会链接到Gallery页面，由于Android自带的Gallery控件滑动效果很不好（滑动一次会加载好多张图片），这里对Gallery进行了扩展，滑动一次只加载一张图片。

Demo效果如下：

 

1、首页Activity页面，GridViewActivity.java介绍：

 public class GridViewActivity extends Activity {
     private DisplayMetrics dm;
     private GridImageAdapter ia;
     private GridView g;
     private int imageCol = ;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         super.onCreate(savedInstanceState);
         // requestWindowFeature(Window.FEATURE_NO_TITLE);
         ia = new GridImageAdapter(this);
         setContentView(R.layout.mygridview);
         g = (GridView) findViewById(R.id.myGrid);
         g.setAdapter(ia);
         g.setOnItemClickListener(new OnItemClick(this));
         // 得到屏幕的大小
         dm = new DisplayMetrics();
         getWindowManager().getDefaultDisplay().getMetrics(dm);

     }

     /**
      * 屏幕切换时进行处理 如果屏幕是竖屏，则显示3列，如果是横屏，则显示4列
      */
     @Override
     public void onConfigurationChanged(Configuration newConfig) {
         try {

             super.onConfigurationChanged(newConfig);
             // 如果屏幕是竖屏，则显示3列，如果是横屏，则显示4列
             if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
                 imageCol = ;
             } else if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
                 imageCol = ;
             }
             g.setNumColumns(imageCol);
             g.setAdapter(new ImageAdapter(this));
             // ia.notifyDataSetChanged();
         } catch (Exception ex) {
             ex.printStackTrace();
         }
     }

     /**
      *
      * @author 空山不空 点击具体的小图片时，会链接到GridViewActivity页面，进行加载和展示
      */
     public class OnItemClick implements OnItemClickListener {
         public OnItemClick(Context c) {
             mContext = c;
         }

         @Override
         public void onItemClick(AdapterView aview, View view, int position,
                 long arg3) {
             Intent intent = new Intent();
             intent.setClass(GridViewActivity.this, GalleryActivity.class);
             intent.putExtra("position", position);
             GridViewActivity.this.startActivity(intent);
         }

         private Context mContext;
     }

     /**
      *
      * @author 空山不空 设置GridView的图片适配器
      */
     public class GridImageAdapter extends BaseAdapter {

         Drawable btnDrawable;

         public GridImageAdapter(Context c) {
             mContext = c;
             Resources resources = c.getResources();
             btnDrawable = resources.getDrawable(R.drawable.bg);
         }

         public int getCount() {
             return ImageSource.mThumbIds.length;
         }

         public Object getItem(int position) {
             return position;
         }

         public long getItemId(int position) {
             return position;
         }

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

             if (convertView == null) {
                 imageView = new ImageViewExt(mContext);
                 // 如果是横屏，GridView会展示4列图片，需要设置图片的大小
                 if (imageCol == ) {
                     imageView.setLayoutParams(new GridView.LayoutParams(
                             dm.heightPixels / imageCol - , dm.heightPixels
                                     / imageCol - ));
                 } else {// 如果是竖屏，GridView会展示3列图片，需要设置图片的大小
                     imageView.setLayoutParams(new GridView.LayoutParams(
                             dm.widthPixels / imageCol - , dm.widthPixels
                                     / imageCol - ));
                 }
                 imageView.setAdjustViewBounds(true);
                 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
             } else {
                 imageView = (ImageViewExt) convertView;
             }
             imageView.setImageResource(ImageSource.mThumbIds[position]);

             return imageView;
         }

         private Context mContext;
     }
 }

 

加载GridView页面，如果屏幕是竖屏，则显示3列，如果是横屏，则显示4列;并且显示的图片加上灰色边框，这里在适配器GridImageAdapter的getView方法里引用了ImageViewExt类来对图片进行处理，这个类扩展自ImageView;点击其中的某一张图片，会跳转到GalleryActivity页面。

2、ImageViewExt.java文件

 /**
  *
  * @author 空山不空
  * 扩展ImageView类，将图片加上边框，并且设置边框为灰色
  */
 public class ImageViewExt extends ImageView {
  //将图片加灰色的边框
     private int color;

     public ImageViewExt(Context context) {
         super(context);
        // TODO Auto-generated constructor stub
         color=Color.GRAY;
   }

    public ImageViewExt(Context context, AttributeSet attrs) {
          super(context, attrs);
         // TODO Auto-generated constructor stub
          color=Color.GRAY;
    }

     @Override
      protected void onDraw(Canvas canvas) {
          // TODO Auto-generated method stub   

         super.onDraw(canvas);
         //画边框
          Rect rec=canvas.getClipBounds();
         rec.bottom--;
         rec.right--;
         Paint paint=new Paint();
         paint.setColor(color);
         paint.setStrokeWidth();
         paint.setStyle(Paint.Style.STROKE);
         canvas.drawRect(rec, paint);
     }
 }

通过重载onDraw方法来画边框和设置边框颜色

3、相册GalleryActivity.java

 /**
  *
  * @author 空山不空
  * Gallery图片页面，通过Intent得到GridView传过来的图片位置，加载图片，再设置适配器
  */
 public class GalleryActivity extends Activity {
     public int i_position = ;
     private DisplayMetrics dm;

     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.mygallery);
         dm = new DisplayMetrics();
         getWindowManager().getDefaultDisplay().getMetrics(dm);
         // 获得Gallery对象
         GalleryExt  g = (GalleryExt) findViewById(R.id.ga);
         //通过Intent得到GridView传过来的图片位置
         Intent intent = getIntent();
         i_position = intent.getIntExtra("position", );
         // 添加ImageAdapter给Gallery对象
         ImageAdapter ia=new ImageAdapter(this);
         g.setAdapter(ia);
         g.setSelection(i_position);    

         //加载动画
         Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );
         g.setAnimation(an);

     }
 }

这里有三点：

（1）、扩展Gallery组件，即GalleryExt控件，设置滑动一次只加载一张图片，并且， 如果是第一张图片时，向左滑动会提示“已到第一页”，如果是最后一张图片时，向右滑动会提示“已到第后页”

（2）、接收GridViewActivity页面传过来的参数position，通过这个参数找到具体的图片，通过ImageAdapter适配器加载

（3）、ImageAdapter图片适配器，用来加载图片

4、GalleryExt.java文件

 /**
  *
  * @author 空山不空
  * 扩展Gallery组件，设置滑动一次只加载一张图片，并且，
  * 如果是第一张图片时，向左滑动会提示“已到第一页”
  * 如果是最后一张图片时，向右滑动会提示“已到第后页”
  */
 public class GalleryExt extends Gallery {
     boolean is_first=false;
     boolean is_last=false;
     public GalleryExt(Context context) {
         super(context);
         // TODO Auto-generated constructor stub
     }

     public GalleryExt(Context context,AttributeSet paramAttributeSet)
      {
            super(context,paramAttributeSet);

      }

     private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2)
        {
         return e2.getX() > e1.getX();
        }

      @Override
     public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX,
                     float distanceY) {
  //通过重构onFling方法，使Gallery控件滑动一次只加载一张图片
          //获取适配器
          ImageAdapter ia=(ImageAdapter)this.getAdapter();
         //得到当前图片在图片资源中的位置
          int p=ia.getOwnposition();
          //图片的总数量
          int count=ia.getCount();
          int kEvent;
           if(isScrollingLeft(e1, e2)){
            //Check if scrolling left
               if(p==&&is_first){
                   //在第一页并且再往左移动的时候，提示
                   Toast.makeText(this.getContext(), "已到第一页", Toast.LENGTH_SHORT).show();
               }else if(p==){
                   //到达第一页时，把is_first设置为true
                   is_first=true;
               }else{
                   is_last=false;
               }

            kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
            }  else{
             //Otherwise scrolling right
                if(p==count-&&is_last){
                       Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();
                   }else if( p==count-){
                       is_last=true;
                   }else{
                       is_first=false;
                   }

             kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
             }
           onKeyDown(kEvent, null);
           return true;
     }

 

5、ImageAdapter.java文件

 /**
  *
  * @author 空山不空
  *  图片适配器，用来加载图片
  */
 public class ImageAdapter extends BaseAdapter {
 //图片适配器
     // 定义Context
     private int ownposition;

     public int getOwnposition() {
         return ownposition;
     }

     public void setOwnposition(int ownposition) {
         this.ownposition = ownposition;
     }

     private Context mContext;

     // 定义整型数组 即图片源

     // 声明 ImageAdapter
     public ImageAdapter(Context c) {
         mContext = c;
     }

     // 获取图片的个数
     public int getCount() {
         return ImageSource.mThumbIds.length;
     }

     // 获取图片在库中的位置
     public Object getItem(int position) {
         ownposition=position;
         return position;
     }

     // 获取图片ID
     public long getItemId(int position) {
         ownposition=position;
         return position;
     }

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

         ownposition=position;
         ImageView imageview = new ImageView(mContext);
         imageview.setBackgroundColor(0xFF000000);
         imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
         imageview.setLayoutParams(new GalleryExt.LayoutParams(
                 LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

         imageview.setImageResource(ImageSource.mThumbIds[position]);
         // imageview.setAdjustViewBounds(true);
         // imageview.setLayoutParams(new GridView.LayoutParams(320, 480));
         // imageview.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
         return imageview;
     }
 }

 

6、配置文件

（1）AndroidManifest.xml ：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.ajie"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon"  android:label="@string/app_name">
    <activity android:name=".GalleryActivity"  android:label="@string/title"  />
    <activity android:name=".GridViewActivity"  android:label="@string/app_name"   android:configChanges="orientation|keyboardHidden" >
          <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
    </activity>
    </application>
</manifest>

 

（2）mygridview.xml,即GridView页面

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

 <GridView xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/myGrid"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:verticalSpacing="6dp"
     android:numColumns=""
     android:paddingTop="5dp"
     android:stretchMode="columnWidth"
     android:gravity="fill_vertical|fill_horizontal"
     />

 

（3）mygallery.xml，加载图片页面

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="horizontal" android:layout_width="match_parent"
     android:layout_height="match_parent" android:gravity="center"
     android:padding="10dip">
     <RelativeLayout android:layout_width="wrap_content"
         android:layout_height="wrap_content" android:padding="2dip"
         android:background="#000000">

         <com.ajie.GalleryExt android:id="@+id/ga"
             android:layout_width="fill_parent" android:layout_height="fill_parent"
             android:spacing="16dp" />
     </RelativeLayout>
 </LinearLayout>

 

Demo下载地址：<a href="http://files.cnblogs.com/fbsk/gridGalleryDemo.zip"> gridGalleryDemo.zip下载</a>

转自：http://www.cnblogs.com/fbsk/archive/2011/10/10/2205776.html