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

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

Demo效果如下:

1、首页Activity页面,GridViewActivity.java介绍:

  1. public class GridViewActivity extends Activity {
  2. private DisplayMetrics dm;
  3. private GridImageAdapter ia;
  4. private GridView g;
  5. private int imageCol = 3;
  6. @Override
  7. protected void onCreate(Bundle savedInstanceState) {
  8. // TODO Auto-generated method stub
  9. super.onCreate(savedInstanceState);
  10. // requestWindowFeature(Window.FEATURE_NO_TITLE);
  11. ia = new GridImageAdapter(this);
  12. setContentView(R.layout.mygridview);
  13. g = (GridView) findViewById(R.id.myGrid);
  14. g.setAdapter(ia);
  15. g.setOnItemClickListener(new OnItemClick(this));
  16. // 得到屏幕的大小
  17. dm = new DisplayMetrics();
  18. getWindowManager().getDefaultDisplay().getMetrics(dm);
  19. }
  20. /**
  21. * 屏幕切换时进行处理 如果屏幕是竖屏,则显示3列,如果是横屏,则显示4列
  22. */
  23. @Override
  24. public void onConfigurationChanged(Configuration newConfig) {
  25. try {
  26. super.onConfigurationChanged(newConfig);
  27. // 如果屏幕是竖屏,则显示3列,如果是横屏,则显示4列
  28. if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
  29. imageCol = 4;
  30. } else if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
  31. imageCol = 3;
  32. }
  33. g.setNumColumns(imageCol);
  34. g.setAdapter(new ImageAdapter(this));
  35. // ia.notifyDataSetChanged();
  36. } catch (Exception ex) {
  37. ex.printStackTrace();
  38. }
  39. }
  40. /**
  41. *
  42. * @author 空山不空 点击具体的小图片时,会链接到GridViewActivity页面,进行加载和展示
  43. */
  44. public class OnItemClick implements OnItemClickListener {
  45. public OnItemClick(Context c) {
  46. mContext = c;
  47. }
  48. @Override
  49. public void onItemClick(AdapterView aview, View view, int position,
  50. long arg3) {
  51. Intent intent = new Intent();
  52. intent.setClass(GridViewActivity.this, GalleryActivity.class);
  53. intent.putExtra("position", position);
  54. GridViewActivity.this.startActivity(intent);
  55. }
  56. private Context mContext;
  57. }
  58. /**
  59. *
  60. * @author 空山不空 设置GridView的图片适配器
  61. */
  62. public class GridImageAdapter extends BaseAdapter {
  63. Drawable btnDrawable;
  64. public GridImageAdapter(Context c) {
  65. mContext = c;
  66. Resources resources = c.getResources();
  67. btnDrawable = resources.getDrawable(R.drawable.bg);
  68. }
  69. public int getCount() {
  70. return ImageSource.mThumbIds.length;
  71. }
  72. public Object getItem(int position) {
  73. return position;
  74. }
  75. public long getItemId(int position) {
  76. return position;
  77. }
  78. public View getView(int position, View convertView, ViewGroup parent) {
  79. ImageViewExt imageView;
  80. if (convertView == null) {
  81. imageView = new ImageViewExt(mContext);
  82. // 如果是横屏,GridView会展示4列图片,需要设置图片的大小
  83. if (imageCol == 4) {
  84. imageView.setLayoutParams(new GridView.LayoutParams(
  85. dm.heightPixels / imageCol - 6, dm.heightPixels
  86. / imageCol - 6));
  87. } else {// 如果是竖屏,GridView会展示3列图片,需要设置图片的大小
  88. imageView.setLayoutParams(new GridView.LayoutParams(
  89. dm.widthPixels / imageCol - 6, dm.widthPixels
  90. / imageCol - 6));
  91. }
  92. imageView.setAdjustViewBounds(true);
  93. imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  94. } else {
  95. imageView = (ImageViewExt) convertView;
  96. }
  97. imageView.setImageResource(ImageSource.mThumbIds[position]);
  98. return imageView;
  99. }
  100. private Context mContext;
  101. }
  102. }

复制代码

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

2、ImageViewExt.java文件

  1. /**
  2. *
  3. * @author 空山不空
  4. * 扩展ImageView类,将图片加上边框,并且设置边框为灰色
  5. */
  6. public class ImageViewExt extends ImageView {
  7. //将图片加灰色的边框
  8. private int color;
  9. public ImageViewExt(Context context) {
  10. super(context);
  11. // TODO Auto-generated constructor stub
  12. color=Color.GRAY;
  13. }
  14. public ImageViewExt(Context context, AttributeSet attrs) {
  15. super(context, attrs);
  16. // TODO Auto-generated constructor stub
  17. color=Color.GRAY;
  18. }
  19. @Override
  20. protected void onDraw(Canvas canvas) {
  21. // TODO Auto-generated method stub
  22. super.onDraw(canvas);
  23. //画边框
  24. Rect rec=canvas.getClipBounds();
  25. rec.bottom--;
  26. rec.right--;
  27. Paint paint=new Paint();
  28. paint.setColor(color);
  29. paint.setStrokeWidth(5);
  30. paint.setStyle(Paint.Style.STROKE);
  31. canvas.drawRect(rec, paint);
  32. }
  33. }

复制代码

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

3、相册GalleryActivity.java

  1. /**
  2. *
  3. * @author 空山不空
  4. * Gallery图片页面,通过Intent得到GridView传过来的图片位置,加载图片,再设置适配器
  5. */
  6. public class GalleryActivity extends Activity {
  7. public int i_position = 0;
  8. private DisplayMetrics dm;
  9. @Override
  10. public void onCreate(Bundle savedInstanceState) {
  11. super.onCreate(savedInstanceState);
  12. requestWindowFeature(Window.FEATURE_NO_TITLE);
  13. setContentView(R.layout.mygallery);
  14. dm = new DisplayMetrics();
  15. getWindowManager().getDefaultDisplay().getMetrics(dm);
  16. // 获得Gallery对象
  17. GalleryExt  g = (GalleryExt) findViewById(R.id.ga);
  18. //通过Intent得到GridView传过来的图片位置
  19. Intent intent = getIntent();
  20. i_position = intent.getIntExtra("position", 0);
  21. // 添加ImageAdapter给Gallery对象
  22. ImageAdapter ia=new ImageAdapter(this);
  23. g.setAdapter(ia);
  24. g.setSelection(i_position);
  25. //加载动画
  26. Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );
  27. g.setAnimation(an);
  28. }
  29. }

复制代码

这里有三点:

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

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

(3)、ImageAdapter图片适配器,用来加载图片

4、GalleryExt.java文件

  1. /**
  2. *
  3. * @author 空山不空
  4. * 扩展Gallery组件,设置滑动一次只加载一张图片,并且,
  5. * 如果是第一张图片时,向左滑动会提示“已到第一页”
  6. * 如果是最后一张图片时,向右滑动会提示“已到第后页”
  7. */
  8. public class GalleryExt extends Gallery {
  9. boolean is_first=false;
  10. boolean is_last=false;
  11. public GalleryExt(Context context) {
  12. super(context);
  13. // TODO Auto-generated constructor stub
  14. }
  15. public GalleryExt(Context context,AttributeSet paramAttributeSet)
  16. {
  17. super(context,paramAttributeSet);
  18. }
  19. private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2)
  20. {
  21. return e2.getX() > e1.getX();
  22. }
  23. @Override
  24. public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX,
  25. float distanceY) {
  26. //通过重构onFling方法,使Gallery控件滑动一次只加载一张图片
  27. //获取适配器
  28. ImageAdapter ia=(ImageAdapter)this.getAdapter();
  29. //得到当前图片在图片资源中的位置
  30. int p=ia.getOwnposition();
  31. //图片的总数量
  32. int count=ia.getCount();
  33. int kEvent;
  34. if(isScrollingLeft(e1, e2)){
  35. //Check if scrolling left
  36. if(p==0&&is_first){
  37. //在第一页并且再往左移动的时候,提示
  38. Toast.makeText(this.getContext(), "已到第一页", Toast.LENGTH_SHORT).show();
  39. }else if(p==0){
  40. //到达第一页时,把is_first设置为true
  41. is_first=true;
  42. }else{
  43. is_last=false;
  44. }
  45. kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
  46. }  else{
  47. //Otherwise scrolling right
  48. if(p==count-1&&is_last){
  49. Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();
  50. }else if( p==count-1){
  51. is_last=true;
  52. }else{
  53. is_first=false;
  54. }
  55. kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
  56. }
  57. onKeyDown(kEvent, null);
  58. return true;
  59. }

复制代码

5、ImageAdapter.java文件

  1. /**
  2. *
  3. * @author 空山不空
  4. *  图片适配器,用来加载图片
  5. */
  6. public class ImageAdapter extends BaseAdapter {
  7. //图片适配器
  8. // 定义Context
  9. private int ownposition;
  10. public int getOwnposition() {
  11. return ownposition;
  12. }
  13. public void setOwnposition(int ownposition) {
  14. this.ownposition = ownposition;
  15. }
  16. private Context mContext;
  17. // 定义整型数组 即图片源
  18. // 声明 ImageAdapter
  19. public ImageAdapter(Context c) {
  20. mContext = c;
  21. }
  22. // 获取图片的个数
  23. public int getCount() {
  24. return ImageSource.mThumbIds.length;
  25. }
  26. // 获取图片在库中的位置
  27. public Object getItem(int position) {
  28. ownposition=position;
  29. return position;
  30. }
  31. // 获取图片ID
  32. public long getItemId(int position) {
  33. ownposition=position;
  34. return position;
  35. }
  36. public View getView(int position, View convertView, ViewGroup parent) {
  37. ownposition=position;
  38. ImageView imageview = new ImageView(mContext);
  39. imageview.setBackgroundColor(0xFF000000);
  40. imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
  41. imageview.setLayoutParams(new GalleryExt.LayoutParams(
  42. LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  43. imageview.setImageResource(ImageSource.mThumbIds[position]);
  44. // imageview.setAdjustViewBounds(true);
  45. // imageview.setLayoutParams(new GridView.LayoutParams(320, 480));
  46. // imageview.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
  47. return imageview;
  48. }
  49. }

复制代码

6、配置文件

(1)AndroidManifest.xml :

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3. package="com.ajie"
  4. android:versionCode="1"
  5. android:versionName="1.0">
  6. <application android:icon="@drawable/icon"  android:label="@string/app_name">
  7. <activity android:name=".GalleryActivity"  android:label="@string/title"  />
  8. <activity android:name=".GridViewActivity"  android:label="@string/app_name"   android:configChanges="orientation|keyboardHidden" >
  9. <intent-filter>
  10. <action android:name="android.intent.action.MAIN" />
  11. <category android:name="android.intent.category.LAUNCHER" />
  12. </intent-filter>
  13. </activity>
  14. </application>
  15. </manifest>

复制代码

(2)mygridview.xml,即GridView页面

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/myGrid"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. android:verticalSpacing="6dp"
  7. android:numColumns="3"
  8. android:paddingTop="5dp"
  9. android:stretchMode="columnWidth"
  10. android:gravity="fill_vertical|fill_horizontal"
  11. />

复制代码

(3)mygallery.xml,加载图片页面

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/myGrid"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. android:verticalSpacing="6dp"
  7. android:numColumns="3"
  8. android:paddingTop="5dp"
  9. android:stretchMode="columnWidth"
  10. android:gravity="fill_vertical|fill_horizontal"
  11. />

转载于:https://www.cnblogs.com/Free-Thinker/p/3267901.html

Android的GridView和Gallery结合Demo相关推荐

  1. android 使用GridView实现Gallery的效果,并且从最左边开始

    1.首先设计man.xml这里使用HorizontalScrollView结合GridView实现Gallery的左右滚动效果,并且解决了Gallery从中间开始的问题,GridView可以从最左边开 ...

  2. Android 使用GridView+仿微信图片上传功能(附源代码)

    由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下 ...

  3. Android实现GridView的item长按拖动删除完美实现(带动画效果)

    领导这几天让做一个项目,就是可以实现像支付宝首页一样的可以长按拖动,删除的界面,以前没做过,领导让我做的时候觉得简直是老虎吃天,无从下手啊,可是领导的任务还是要实现的,没办法,就自己网上找咯,但是网上 ...

  4. Android中GridView的实现实例

    实现效果: activity文件代码: package com.tmacsky; import android.app.Activity; import android.os.Bundle; impo ...

  5. Android中用GridView实现九宫格的两种方法

    1.传统办法:实现一个继承BaseAdapter的 ImageAdapter java代码如下: [java] view plaincopy package com.test; import andr ...

  6. Android中用GridView实现九宫格的两种方法(转)

    Android中用GridView实现九宫格的两种方法 http://blog.csdn.net/shakespeare001/article/details/7768455 1.传统办法:实现一个继 ...

  7. android gridview行分割线,Android使用GridView实现表格分割线效果

    使用gridview实现表格分割线效果,网格布局表格布局也是可以实现的. 效果如下: 1.主函数代码: package com.example.qd.douyinwu; import android. ...

  8. android gridview横向显示图片,Android使用Gridview单行横向滚动显示

    本文实例为大家分享了Android使用Gridview单行横向滚动显示的具体代码,供大家参考,具体内容如下 要想实现滚动显示,layout布局里必须要使用HorizontalScrollView,才能 ...

  9. Android 使用GridView以表格的形式显示多张图片

    GridView用于在界面上按行.列分布的方式来显示多个组件(而ListView只是以按行的方式) 课程目标  学会使用GridView制作二维布局界面(行.列分布)  数据源(集合) --> ...

最新文章

  1. 初等数学O 集合论基础 第四节 二元关系、等价类与运算
  2. Chocolates
  3. conn.execute
  4. asc怎么用 linux zip_linux的asc文件怎么打开
  5. mvn dependency命令
  6. springboot 乱码之URLDecoder解析
  7. chrome浏览器 json插件【WEB前端助手】
  8. android 模拟蓝牙,【android 模拟器支持蓝牙】 CSDN
  9. webpack4.0关闭开发环境的代码压缩UglifyJsPlugin
  10. Pr入门系列之六:使用标记
  11. A - Chloe and the sequence
  12. 重装后显示计算机无法联网,Win10重装系统后无法联网如何解决
  13. Apache Thrift 介绍
  14. Don‘t Stop Pretraining: Adapt Language Models to Domains and Tasks
  15. Flutter如何集成第三方插件
  16. Harbor私有镜像仓库——高可用
  17. 小米及其他Android手机无法连接mac解决方案
  18. WIN10下安装SQL SERVER 2017
  19. QT的控件加载显示图标或图片
  20. 一键复制 — vue

热门文章

  1. Citrix桌面及应用虚拟化系列之三:活动目录架构准备
  2. 给文本框添加模糊搜索功能(“我记录”MVC框架下实现)
  3. [置顶] 总结工作中常用到的linux命令
  4. 安装DNN时可能出现的错误
  5. 无法启动 MS DTC 事务管理器。LogInit 返回错误 0x2. 怎么办?
  6. 平滑动画 每秒60帧 -- 16ms内绘完一帧
  7. Spring Hello World
  8. python基础:zip和dict详解
  9. Hibernate----Hibernate小配置
  10. 移动app测试流程与测试点