Android實現仿Windows7圖片預覽窗格效果

Android實現仿Windows7圖片預覽窗格效果

本例項將顯示類似於windows7提供的圖片預覽窗格效果,單擊任意一張圖片,可以在右側顯示該圖片的預覽效果。

效果如圖所示:

具體實現方法:
res/layout/main.xml:


<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="horizontal" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:id="@ id/layout1" 
> 
<GridView android:id="@ id/gridView1" 
android:layout_height="match_parent" 
android:layout_width="440px" 
android:layout_marginTop="10px" 
android:horizontalSpacing="3px" 
android:verticalSpacing="3px" 
android:numColumns="3"/> 
<!-- 新增一個影象切換器 --> 
<ImageSwitcher 
android:id="@ id/imageSwitcher1" 
android:padding="10px" 
android:layout_width="match_parent" 
android:layout_height="match_parent"/> 
</LinearLayout> 

MainActivity:


package com.example.test; 
import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.ViewGroup.LayoutParams; 
import android.view.animation.AnimationUtils; 
import android.widget.AdapterView; 
import android.widget.AdapterView.OnItemClickListener; 
import android.widget.BaseAdapter; 
import android.widget.GridView; 
import android.widget.ImageSwitcher; 
import android.widget.ImageView; 
import android.widget.ViewSwitcher.ViewFactory; 
public class MainActivity extends Activity { 
private int[] imageId=new int []{R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4, 
R.drawable.img5,R.drawable.img6,R.drawable.img7,R.drawable.img8,R.drawable.img9}; 
private ImageSwitcher imageSwitcher; 
@Override 
public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.main); 
imageSwitcher=(ImageSwitcher)findViewById(R.id.imageSwitcher1);//獲取影象切換器 
//設定動畫效果 
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));//設定淡入動畫 
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));//設定淡出動畫 
imageSwitcher.setFactory(new ViewFactory() { 
@Override 
public View makeView() { 
//例項化一個ImageView物件 
ImageView imageView=new ImageView(MainActivity.this); 
//設定保持縱橫比居中縮放影象 
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); 
imageView.setLayoutParams(new ImageSwitcher.LayoutParams( 
LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); 
return imageView;//返回imageView物件 
} 
}); 
imageSwitcher.setImageResource(R.drawable.img3);//設定預設顯示的影象 
GridView gridview=(GridView)findViewById(R.id.gridView1); 
BaseAdapter adapter=new BaseAdapter(){ 
@Override 
public View getView(int position, View convertView, ViewGroup parent) { 
ImageView imageView = null;//宣告一個ImageView物件 
if(convertView==null){ 
imageView=new ImageView(MainActivity.this);//例項化ImageView物件 
/****************設定影象的寬度和高度*******************/ 
imageView.setAdjustViewBounds(true); 
imageView.setMaxWidth(150); 
imageView.setMaxHeight(113); 
/*********************************************************/ 
imageView.setPadding(5, 5, 5, 5); 
}else{ 
imageView=(ImageView)convertView; 
} 
imageView.setImageResource(imageId[position]); 
return imageView; 
} 
//功能:獲得當前選項的id 
@Override 
public long getItemId(int position) { 
return position; 
} 
//功能:獲得當前選項 
@Override 
public Object getItem(int position) { 
return position; 
} 
//獲得數量 
@Override 
public int getCount() { 
return imageId.length; 
} 
}; 
gridview.setAdapter(adapter); 
gridview.setOnItemClickListener(new OnItemClickListener() { 
@Override 
public void onItemClick(AdapterView<?> parent, View view, int position, 
long id) { 
//顯示選中的照片 
imageSwitcher.setImageResource(imageId[position]); 
} 
}); 
} 
} 

執行效果與開頭描述相同,成功實現。