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 = 3;
 
    @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 = 4;
            } else if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
                imageCol = 3;
            }
            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 == 4) {
                    imageView.setLayoutParams(new GridView.LayoutParams(
                            dm.heightPixels / imageCol - 6, dm.heightPixels
                                    / imageCol - 6));
                } else {// 如果是竖屏,GridView会展示3列图片,需要设置图片的大小
                    imageView.setLayoutParams(new GridView.LayoutParams(
                            dm.widthPixels / imageCol - 6, dm.widthPixels
                                    / imageCol - 6));
                }
                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(5);
        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 = 0;
    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", 0);  
        // 添加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==0&&is_first){
                  //在第一页并且再往左移动的时候,提示
                  Toast.makeText(this.getContext(), "已到第一页", Toast.LENGTH_SHORT).show();
              }else if(p==0){
                  //到达第一页时,把is_first设置为true
                  is_first=true;
              }else{
                  is_last=false;
              }
               
           kEvent = KeyEvent.KEYCODE_DPAD_LEFT;  
           }  else{ 
            //Otherwise scrolling right    
               if(p==count-1&&is_last){
                      Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();
                  }else if( p==count-1){
                      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="3"   
    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下载地址: gridGalleryDemo.zip下载

相关文章
|
API Android开发 计算机视觉
视觉智能平台有android人脸识别拍照demo?
视觉智能平台有android人脸识别拍照demo么?
108 0
|
Java Android开发 开发者
1024程序节|Android框架之一 BRVAH【BaseRecyclerViewAdapterHelper】使用demo
BRVAH是一个强大的RecyclerAdapter框架(什么是RecyclerView?),它能节约开发者大量的开发时间,集成了大部分列表常用需求解决方案。为什么会有它?请查看「Android开源框架BRVAH由来篇」该框架于2016年4月10号发布的第1个版本到现在已经一年多了,经历了800多次代码提交,140多次版本打包,修复了1000多个问题,获得了9000多star,非常感谢大家的使用以及反馈。
254 0
|
4月前
|
XML API Android开发
码农之重学安卓:利用androidx.preference 快速创建一、二级设置菜单(demo)
本文介绍了如何使用androidx.preference库快速创建具有一级和二级菜单的Android设置界面的步骤和示例代码。
139 1
码农之重学安卓:利用androidx.preference 快速创建一、二级设置菜单(demo)
|
3月前
|
Java Maven 开发工具
第一个安卓项目 | 中国象棋demo学习
本文是作者关于其第一个安卓项目——中国象棋demo的学习记录,展示了demo的运行结果、爬坑记录以及参考资料,包括解决Android Studio和maven相关问题的方法。
第一个安卓项目 | 中国象棋demo学习
|
7月前
|
Android开发
Android 分享机顶盒项目的封装类《GridView》(二)(转)
Android 分享机顶盒项目的封装类《GridView》(二)(转)
50 2
|
6月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
72 2
|
6月前
|
前端开发 API Android开发
26. 【Android教程】网格视图 GridView
26. 【Android教程】网格视图 GridView
96 2
|
7月前
|
XML Java Android开发
Android 分享机顶盒项目的封装类《GridView》(三)(转)
Android 分享机顶盒项目的封装类《GridView》(三)(转)
42 2
|
7月前
|
Android开发
Android教程之Android 用户界面-表格视图(GridView)
Android教程之Android 用户界面-表格视图(GridView)
55 1
|
Java Android开发
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo