Android -- （10）,Gallery ImageView

时间：2013/1/15

这篇文章介绍几个显示image的view。这个得截图，不能懒了。

一 ，Gallery and ImageView Views

1.Gallery View

--gallery是一种可以水平滚动来展示图片的控件。（center-locked, horizontal scrolling list）

（1）第一个还是介绍gallery的xml声明：

<Gallery
android:id=”@+id/gallery1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />

再在res/value里面新建一个名为attr的xml文件，内容是：

<?xml version="1.0" encoding="utf-8"?>

<resources>
<declare-styleable name="Gallery1">
<attr name="android:galleryItemBackground" />
</declare-styleable>
</resources>

（2）在例子里面，我们把几张图片放进了项目的res/drawable-mdpi文件夹里面。

（3）然后在主活动里面定义一个数组，里面的是这些图片的路径：

//---the images to display---
Integer[] imageIDs = {
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3,
R.drawable.pic4,
R.drawable.pic5,
R.drawable.pic6,
R.drawable.pic7
};

（4）然后在主活动里面创建一个叫做ImageAdapter的类，继承baseAdapter，用这里类把我们的图片和控件gallery绑定起来。BaseAdapter这个类就充当了AdapterView（这里是gallery）和所需要绑定的数据之间的桥梁，还有其他AdapterView 例如：ListView，GridView，Spinner，Gallery。

在这里类里面，我们要实现如下方法：

public class ImageAdapter extends BaseAdapter {
public ImageAdapter(Context c) { ... }
//---returns the number of images---
public int getCount() { ... }
//---returns the item---
public Object getItem(int position) { ... }
//---returns the ID of an item---
public long getItemId(int position) { ... }
//---returns an ImageView view---
public View getView(int position, View convertView,
ViewGroup parent) { ... }
}

这里实现如下：

 public class ImageAdapter extends BaseAdapter
    {
    	Context context;
    	int itemBackground;
    	public ImageAdapter(Context c)
    	{
    		context=c;
    		TypedArray a=obtainStyledAttributes(R.styleable.Gallery1);
    		itemBackground=a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 0);
    		a.recycle();
    	}
    	public int getCount()
    	{
    		return imageIDs.length;
    		
    	}
    	public Object getItem(int position)
    	{
    		return position;
    		
    	}
    	public long getItemId(int position)
    	{
    		return position;
    	}
    	public View getView(int position,View convertView,ViewGroup parent)
    	{
    		ImageView imageView;
    		if(convertView == null)
    		{
    			imageView=new ImageView(context);
    			imageView.setImageResource(imageIDs[position]);
    			imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    			imageView.setLayoutParams(new Gallery.LayoutParams(150,120));
    			
    		}
    		else
    		{
    			imageView=(ImageView)convertView;
    		}
    		imageView.setBackgroundResource(itemBackground);
    		return imageView;	
    	}
    }

额，这里我们把这个类和对应的gallery结合起来：

用setAdapter方法：

 gallery.setAdapter((new ImageAdapter(this)));

我们再在主活动的xml文件里面加入一个ImageView：

<ImageView
android:id=”@+id/image1”
android:layout_width=”320dp”
android:layout_height=”250dp”
android:scaleType=”fitXY” />

然后当我们选择了gallery里面的某个picture的时候，就可以用imageView将大图显示出来，于是我们设置了gallery的OnItemClickListener：

gallery.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View v,
int position, long id)
{
Toast.makeText(getBaseContext(),
“pic” + (position + 1) + “ selected”,
Toast.LENGTH_SHORT).show();
//---display the images selected---
ImageView imageView =
(ImageView) findViewById(R.id.image1);
imageView.setImageResource(imageIDs[position]);
}
});

效果如下图所示：

二,ImageSwitcher

--一种比ImageView更炫酷的展示图片的控件，这里我们也和gallery一起使用。

（1）也是先将gallery和ImageSwitcher声明在主活动里面：

<Gallery
android:id=”@+id/gallery1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />
<ImageSwitcher
android:id=”@+id/switcher1”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:layout_alignParentLeft=”true”
android:layout_alignParentRight=”true”
android:layout_alignParentBottom=”true” />

（2）同样在res/value中设置好attr.xml:

<?xml version=”1.0” encoding=”utf-8”?>
<resources>
<declare-styleable name=”Gallery1”>
<attr name=”android:galleryItemBackground” />
</declare-styleable>
</resources>

（3）同样，在主活动创建一个ImageAdapter类，继承BaseAdapter类：

public class ImageAdapter extends BaseAdapter
{
private Context context;
private int itemBackground;
public ImageAdapter(Context c)
{
context = c;
//---setting the style---
TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
itemBackground = a.getResourceId(
R.styleable.Gallery1_android_galleryItemBackground, 0);
a.recycle();
}
//---returns the number of images---
public int getCount()
{
return imageIDs.length;
}
//---returns the item---
public Object getItem(int position)
{
return position;
}
//---returns the ID of an item---
public long getItemId(int position)
{
return position;
}
//---returns an ImageView view---
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView = new ImageView(context);
imageView.setImageResource(imageIDs[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
imageView.setBackgroundResource(itemBackground);
return imageView;
}
}

同样，这个ImageAdapter也是将图片和gallery连接起来的。

（4）这次的主活动要实现ViewFactory接口，并且将其onCreate方法设置为如下：

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher1);
imageSwitcher.setFactory(this);
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));
Gallery gallery = (Gallery) findViewById(R.id.gallery1);
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent,
View v, int position, long id)
{
imageSwitcher.setImageResource(imageIDs[position]);
}
});
}

其中ImageSwitcher的setInAnimation和setOutAnimation是设置动画的方法，而onItemClickListener设置了当gallery中某个图片被选中的时候，用ImageSwitcher的setResources方法来设置ImageSwitcher中的图片。
（5）因为实现了ViewFactory接口，所以要实现makeView方法（在主活动中）：

public View makeView()
{
ImageView imageView = new ImageView(this);
imageView.setBackgroundColor(0xFF000000);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams(new
ImageSwitcher.LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));
return imageView;
}

这方法创建了加入到ImageSwitcher中的控件，在这里我们用的是ImageView。然后在用ImageSwitcher的setfactory方法将主活动类（实现了viewfactory接口）设置成ImageSwitcher的viewfactory。

三，GridView

---GridView创建一个二维的滚动grid，可以用GridView和ImageView来二维展示图片.如下：

（1）GridView的声明如下：

<GridView
       android:layout_width="fill_parent"
       android:id="@+id/gridView"
       android:layout_height="fill_parent"
       android:numColumns="auto_fit"
       android:verticalSpacing="10dp"
       android:horizontalSpacing="10dp"
       android:columnWidth="90dp"
       android:stretchMode="columnWidth"
       android:gravity="center"
       />

（2）整个主活动的代码跟上面的差异不大，先贴出来：

package com.example.grid;

import android.os.Bundle;
import android.content.Context;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends Activity {
	Integer[] imageIDs = {
			R.drawable.pic1,
			R.drawable.pic2,
			R.drawable.pic3,
			R.drawable.pic4,
			R.drawable.pic5,
			R.drawable.pic6,
			R.drawable.pic7
			};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gridView=(GridView)findViewById(R.id.gridView);
        gridView.setAdapter(new ImageAdapter(this));
        gridView.setOnItemClickListener(new OnItemClickListener()
        {
        	public void onItemClick(AdapterView parent,View v,int position,long id)
        	{
        		Toast.makeText(getBaseContext(), "selected "+(position+1), Toast.LENGTH_SHORT).show();
        	}
        });
    }
    public class ImageAdapter extends BaseAdapter
    {
    	private Context context;
    	public ImageAdapter(Context c) 
    	{
    		context=c;
    	}
    	public Object getItem(int position) {
    		return position;
    		}
    	public int getCount()
    	{
    		return 	imageIDs.length;
    	}
    	public Object getCount(int position)
    	{
    		return position;
    	}
    	public long getItemId(int position)
    	{
    		return position;
    	}
    	public View getView(int position,View convertView,ViewGroup parent)
    	{
    		ImageView imageView;
    		if(convertView==null)
    		{
    			imageView=new ImageView(context);
    			imageView.setLayoutParams(new GridView.LayoutParams(85,85) );
    			imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    			imageView.setPadding(5, 5, 5, 5);
    		}
    		else imageView=(ImageView)convertView;
    		imageView.setImageResource(imageIDs[position]);
    		return imageView;
    	}
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

也是先将几幅图片放在res/drawable-mdpi处，然后用一个数组将他们的id集合起来，然后findViewById，再setAdapter。然后GridView控件再用Adapter中getView返回一个GridView处理的对象（这里是GridView）。然后在屏幕上展示出来。注意其中的getView方法指定了图片的大小，然后用setpadding来指定每个图片在GridView中的排布。