704
Android的GridView和Gallery結合Demo
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:andro
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:andro
android:
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:andro
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:
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:spacing="16dp" />
</RelativeLayout>
</LinearLayout>
Demo下載地址： gridGalleryDemo.zip下載
最後更新：2017-04-02 17:09:28