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下载