Android之模拟美图看看拖动看图（16）

阅读更多

这节课我们进入深入人心期待已久的美图看看阅览器制作，不过是手机android版的，上节课的图片切换大师我们已经见识，现在我们来认识拖拉图片高手

Gallery

对它的理解可以理解为Listview拖动，不过换成水平

这节课两重一要

两重，实现Gallery设置图片集要使用到setAdapter（）方法，呵呵，跟listview又一样，两种方法

1.继承BaseAdapter方法

2.SimpleAdapter    前面我们使用过，得心应手啊

我们先用1方法

布局文件代码：

    


很简单，拖动大师单身出马
接下来新建一个class：
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;

public class GalleryAdapter extends BaseAdapter{

	private int[] image=new int[]{
			R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4
	,R.drawable.a5,R.drawable.a6,R.drawable.a7,R.drawable.a8,R.drawable.a9};
	private Context mycontext;
	
	public GalleryAdapter(Context c){
		this.mycontext=c;
	}
	public int getCount() {
		return this.image.length;
		
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return this.image[position];
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return this.image[position];
	}

	@Override
	//其实就是定义实现了一个转换工厂的作用，ViewFactory类似
	public View getView(int position, View arg1, ViewGroup arg2) {
		ImageView imageview=new ImageView(this.mycontext);
		imageview.setBackgroundColor(0xFFFFFFFF);//设置背景
		imageview.setScaleType(ImageView.ScaleType.CENTER);//居中
		imageview.setImageResource(this.image[position]);
		//自适应图片
		imageview.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
		
		
		return imageview;
	}

}

封装成一个适配器类。现在我们可以用在MainActivity里了
public class MainActivity extends Activity {

	private Gallery gallery=null;
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		this.gallery=(Gallery)super.findViewById(R.id.gallery);
		this.gallery.setAdapter(new GalleryAdapter(this));
		this.gallery.setOnItemClickListener(new ItemListener());
	}

	
	
	private class ItemListener implements OnItemClickListener{

		@Override
		public void onItemClick(AdapterView arg0, View v, int position,
				long id) {
			// TODO Auto-generated method stub
			Toast.makeText(MainActivity.this, String.valueOf(position), Toast.LENGTH_SHORT).show();
			
		}
		
	}

 

其实我不太明白Gallery出来被划线，难道是已经过时了？虽然不太影响使用。

这里我们定义一个方法监听到我们选择了哪些图片，用信息提示出来

显示效果如下：

 

 实现拖动效果

现在重头戏来了，我们用第二种方法实现美图看看，在以后工作中我建议用第二种方法，符合MVC设计模式，而且一要就是java反射机制，前面的添加图片都是我们一个个打入位置名字，现实生活中不可能那么麻烦，为了方便动态取出所有图片资源java.lang.reflect.Field;必不可少，建议大家多去看看java的反射机制，这个在面试中经常考到。

还记得我们学习listview的模板，对，我们先建立一个模板用于显示图片

Grid_Layout.xml

    



然后是布局文件：
这里切换大师在上，拖动大师在下


    
    

    

 

MainActivity文件：

 

private Gallery gallery=null;
	private List> list=new ArrayList>();
	private SimpleAdapter simpleadapter=null;
	private ImageSwitcher imageswitch=null;
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		this.initAdapter();//初始化适配器
	
		this.gallery=(Gallery)super.findViewById(R.id.gallery1);//取得对象
		
		this.imageswitch=(ImageSwitcher)super.findViewById(R.id.imageSwitcher1);
		this.imageswitch.setBackgroundColor(Color.BLACK);
		this.imageswitch.setFactory(new ViewFactoryImpl());//设置工厂
		//设置图片进入进出特效动画
		this.imageswitch.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
		this.imageswitch.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
		this.gallery.setAdapter(this.simpleadapter);//设置适配器
		this.gallery.setOnItemClickListener(new ItemListener());
		this.gallery.setBackgroundColor(Color.BLACK);
//		this.imageswitch.setImageResource(image[foot++]);
//		this.previous.setOnClickListener(new Previouslistener());
//		this.next.setOnClickListener(new Nextlistener());
		
	}
	private class ItemListener implements OnItemClickListener{

		@Override
		public void onItemClick(AdapterView arg0, View arg1, int position,
				long id) {
			// TODO Auto-generated method stub
			Map map=(Map)MainActivity.this.simpleadapter.getItem(position);
			MainActivity.this.imageswitch.setImageResource(map.get("img"));
			
		}
		
	}
	private class ViewFactoryImpl implements ViewFactory{

		@Override
		public View makeView() {
			ImageView imageview=new ImageView(MainActivity.this);
			imageview.setBackgroundColor(0xFFFFFFFF);//设置背景
			imageview.setScaleType(ImageView.ScaleType.CENTER);//居中
			//自适应图片
			imageview.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
			
			
			return imageview;
			// TODO Auto-generated method stub
			
		}
		
	}

	private void initAdapter() {
		// TODO Auto-generated method stub
		Field[] field=R.drawable.class.getDeclaredFields();//取得全部属性，反射机制动态取图
		for(int i=0;i map=new HashMap();
				try {
					map.put("img", field[i].getInt(R.drawable.class));//图片资源放入map
				} catch (IllegalAccessException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				} catch (IllegalArgumentException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				this.list.add(map);    //保存map
			}
		}
		//使用参见listview博客
		this.simpleadapter=new SimpleAdapter(this,this.list,R.layout.grid_layout,new String[]{"img"},
				new int[]{R.id.img});
		
	}

 

效果如下：当然大家可以看到我注释掉的代码，可以实现添加按键切换图片，这个可以使用ImageButton实现，会更好看些，美图看看是鼠标进入范围显示按钮，这个有兴趣的可以自己拓展。

 

 

 

下面是一排预览，点击图片显示在中央

 

 

• 
• 大小: 115.9 KB

• 
• 大小: 526.1 KB

• 查看图片附件