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声明：

<Galleryandroid: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：

<ImageViewandroid: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声明在主活动里面：

<Galleryandroid:id=”@+id/gallery1”android:layout_width=”fill_parent”android:layout_height=”wrap_content” /><ImageSwitcherandroid: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(newImageSwitcher.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中的排布。