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

PrisonJoker

2015-04-08

关注关注

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

Gallery

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

这节课两重一要

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

1.继承BaseAdapter方法

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

我们先用1方法

布局文件代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    
    tools:context=".MainActivity" >

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
很简单，拖动大师单身出马
接下来新建一个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出来被划线，难道是已经过时了？虽然不太影响使用。

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

显示效果如下：

Android之模拟美图看看拖动看图（16）
实现拖动效果

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

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

Grid_Layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:background="#FFFFFF"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center"
         />

</LinearLayout>

然后是布局文件：
这里切换大师在上，拖动大师在下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    
    android:gravity="bottom"   //设置置于底部
    android:orientation="vertical"
    
    tools:context=".MainActivity" >

    <ImageSwitcher
        android:id="@+id/imageSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ImageSwitcher>

    <Gallery
        android:id="@+id/gallery1"
        android:padding="3px"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

MainActivity文件：

private Gallery gallery=null;
	private List<Map<String,Integer>> list=new ArrayList<Map<String,Integer>>();
	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<String,Integer> map=(Map<String,Integer>)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<field.length;i++){
			if(field[i].getName().startsWith("a")){
				Map<String,Integer> map=new HashMap<String,Integer>();
				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实现，会更好看些，美图看看是鼠标进入范围显示按钮，这个有兴趣的可以自己拓展。

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