Android 滑动效果基础篇（四）—— Gallery + GridView

Android系统自带一个GridView和Gallery两个控件，GridView网格显示，Gallery单个浏览，两者结合起来可以真正实现Gallery浏览图片效果。

 

本示例通过GridView和Gallery两个控件，模仿实现一个完整的仿Gallery图像集的图片浏览效果。效果图如下：

 

1、GridView

首先，自定义一个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);    // 缩放图片使其长和宽一样

             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); // 设置点击监听事件

最后，设置GridView控件的点击监听事件

 

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的图片显示、监听事件后，现在点击图片，会启动一个Activity来显示当前点击的图片，此时显示图片的控件便是Gallery

首先，同GridView一样，自定义一个ImageAdapter图片适配器，用来填充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传来的图片位置position
ImageAdapter imgAdapter=new ImageAdapter(this);
galllery.setAdapter(imgAdapter);        // 设置图片ImageAdapter
galllery.setSelection(position);        // 设置当前显示图片

    Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );     // Gallery动画
    galllery.setAnimation(an);

此时，如果细心可以注意到，我们的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);
    }

    /** 是否向左滑动（true - 向左滑动； false - 向右滑动） */
    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();    // 获取当前图片的position
        int count = ia.getCount();      // 获取全部图片的总数count
        int kEvent;
        if (isScrollingLeft(e1, e2)) {
            if (p == 0 && isFirst) {
                Toast.makeText(this.getContext(), "已是第一页", 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(), "已到最后一页", 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>