快捷導(dǎo)航

Android編程滑動(dòng)效果之Gallery+GridView實(shí)現(xiàn)圖片預(yù)覽功能(附demo源碼下載)

更新時(shí)間：2016年02月12日 11:52:24 作者：陽(yáng)光島主

這篇文章主要介紹了Android編程滑動(dòng)效果之Gallery+GridView實(shí)現(xiàn)圖片預(yù)覽功能,結(jié)合實(shí)例形式分析了Android通過(guò)GridView和Gallery兩個(gè)控件模仿Gallery圖像集圖片預(yù)覽功能,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了Android編程滑動(dòng)效果之Gallery+GridView實(shí)現(xiàn)圖片預(yù)覽功能。分享給大家供大家參考，具體如下：

Android系統(tǒng)自帶一個(gè)GridView和Gallery兩個(gè)控件，GridView網(wǎng)格顯示，Gallery單個(gè)瀏覽，兩者結(jié)合起來(lái)可以真正實(shí)現(xiàn)Gallery瀏覽圖片效果。

本示例通過(guò)GridView和Gallery兩個(gè)控件，模仿實(shí)現(xiàn)一個(gè)完整的仿Gallery圖像集的圖片瀏覽效果。效果圖如下：

1、GridView

首先，自定義一個(gè)GridImageAdapter圖片適配器，用于填充GridView控件的圖片

public class GridImageAdapter extends BaseAdapter {
  private Context mContext;
  Drawable btnDrawable;
  public GridImageAdapter(Context context) {
    mContext = context;
    Resources resources = context.getResources();
    btnDrawable = resources.getDrawable(R.drawable.bg);
  }
  @Override
  public int getCount() {
    return ImageSource.mThumbIds.length;
  }
  @Override
  public Object getItem(int position) {
    return position;
  }
  @Override
  public long getItemId(int position) {
    return position;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    ImageViewExt imageView;
    int space;
    if (convertView == null) {
      imageView = new ImageViewExt(mContext);
      if (imageCol == 5) {
        space = dm.heightPixels / imageCol - 6;
        imageView.setLayoutParams(new GridView.LayoutParams(space, space));
      } else {
        space = dm.widthPixels / imageCol - 6;
        imageView.setLayoutParams(new GridView.LayoutParams( space, space));
      }
      imageView.setAdjustViewBounds(true);
      imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);  // 縮放圖片使其長(zhǎng)和寬一樣
       imageView.setPadding(3, 3, 3, 3);
    } else {
      imageView = (ImageViewExt) convertView;
    }
    imageView.setImageResource(ImageSource.mThumbIds[position]);
    return imageView;
  }
}

然后，用GridImageAdapter填充GridView

gridView = (GridView) findViewById(R.id.myGrid);
gridImageAdapter = new GridImageAdapter(this);
gridView.setAdapter(gridImageAdapter);
gridView.setOnItemClickListener(listener); // 設(shè)置點(diǎn)擊監(jiān)聽(tīng)事件

最后，設(shè)置GridView控件的點(diǎn)擊監(jiān)聽(tīng)事件

AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {
    Intent intent = new Intent();
    intent.setClass(GridViewActivity.this, GalleryActivity.class);
    intent.putExtra("position", position);
    startActivity(intent);
  }
};

2、Gallery

完成了GridView的圖片顯示、監(jiān)聽(tīng)事件后，現(xiàn)在點(diǎn)擊圖片，會(huì)啟動(dòng)一個(gè)Activity來(lái)顯示當(dāng)前點(diǎn)擊的圖片，此時(shí)顯示圖片的控件便是Gallery

首先，同GridView一樣，自定義一個(gè)ImageAdapter圖片適配器，用來(lái)填充Gallery

public class ImageAdapter extends BaseAdapter {
  private Context mContext;
  private int mPos;
  public ImageAdapter(Context context) {
    mContext = context;
  }
  public void setOwnposition(int ownposition) {
    this.mPos = ownposition;
  }
  public int getOwnposition() {
    return mPos;
  }
  @Override
  public int getCount() {
    return ImageSource.mThumbIds.length;
  }
  @Override
  public Object getItem(int position) {
    mPos=position;
    return position;
  }
  @Override
  public long getItemId(int position) {
    mPos=position;
    return position;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    mPos=position;
    ImageView imageview = new ImageView(mContext);
    imageview.setBackgroundColor(0xFF000000);
    imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
    imageview.setLayoutParams(new myGallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    imageview.setImageResource(ImageSource.mThumbIds[position]);
    return imageview;
  }
}

然后，用ImageAdapter填充Gallery

myGallery galllery = (myGallery) findViewById(R.id.mygallery);
Intent intent = getIntent();
position = intent.getIntExtra("position", 0); // 獲取GridViewActivity傳來(lái)的圖片位置position
ImageAdapter imgAdapter=new ImageAdapter(this);
galllery.setAdapter(imgAdapter); // 設(shè)置圖片ImageAdapter
galllery.setSelection(position); // 設(shè)置當(dāng)前顯示圖片
  Animation an= AnimationUtils.loadAnimation(this,R.anim.scale ); // Gallery動(dòng)畫
  galllery.setAnimation(an);

此時(shí)，如果細(xì)心可以注意到，我們的Gallery也是自己定義的myGallery，具體定義如下：

public class myGallery extends Gallery {
  boolean isFirst = false;
  boolean isLast = false;
  public myGallery(Context context) {
    super(context);
  }
  public myGallery(Context context, AttributeSet paramAttributeSet) {
    super(context, paramAttributeSet);
  }
  /** 是否向左滑動(dòng)（true - 向左滑動(dòng)； false - 向右滑動(dòng)） */
  private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {
    return e2.getX() > e1.getX();
  }
  @Override
  public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    ImageAdapter ia = (ImageAdapter) this.getAdapter();
    int p = ia.getOwnposition(); // 獲取當(dāng)前圖片的position
    int count = ia.getCount(); // 獲取全部圖片的總數(shù)count
    int kEvent;
    if (isScrollingLeft(e1, e2)) {
      if (p == 0 && isFirst) {
        Toast.makeText(this.getContext(), "已是第一頁(yè)", Toast.LENGTH_SHORT).show();
      } else if (p == 0) {
        isFirst = true;
      } else {
        isLast = false;
      }
      kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
    } else {
      if (p == count - 1 && isLast) {
        Toast.makeText(this.getContext(), "已到最后一頁(yè)", Toast.LENGTH_SHORT).show();
      } else if (p == count - 1) {
        isLast = true;
      } else {
        isFirst = false;
      }
      kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
    }
    onKeyDown(kEvent, null);
    return true;
  }
}

GalleryActivity的布局文件gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:orientation="horizontal"
  android:padding="10dip" >
  <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:padding="2dip" >
    <com.homer.gridgallery.myGallery
      android:id="@+id/mygallery"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:spacing="16dp" />
  </RelativeLayout>
</LinearLayout>

完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Android開(kāi)發(fā)動(dòng)畫技巧匯總》、《Android開(kāi)發(fā)入門與進(jìn)階教程》及《Android控件用法總結(jié)》。

希望本文所述對(duì)大家Android程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: