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"?>

<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"

? ? />

?

轉載于:https://www.cnblogs.com/Free-Thinker/p/3267901.html

總結

以上是生活随笔為你收集整理的Android的GridView和Gallery结合Demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。