ImageSwitcher&Gallery组件和GridView组件的使用

第一、切换图片（ImageSwitcher&Gallery）组件的使用，最终实现在屏幕上方展示一个大图，在屏幕下方是一组可以滚动的图片。

第二、网格试图（GridView）的使用，最终实现上面显示图片和图片名称，下面显示网格图的大图，（点击各网格图实现查看大图）。

项目列表图图如下：

下面让我们来看一下上述功能的具体实现：

首先是程序入口MainActivity相关文件，然后将要要实现的功能添加到activity_main.xml文件中，使用按钮单击事件来实现相应的功能。

下面展示的是MainActivity.java文件代码以及与之相对应的activity_main.xml文件

public class MainActivity extends Activity {   
                                                                           
    Button button1,button2;   
    @Override   
    public void onCreate(Bundle savedInstanceState) {   
        super.onCreate(savedInstanceState);   
        setContentView(R.layout.activity_main);   
        button1=(Button) findViewById(R.id.button1);   
        button2=(Button) findViewById(R.id.button2);   
        //imageSwitcher&Gallery组件单击事件   
        button1.setOnClickListener(new View.OnClickListener() {   
            @Override   
            public void onClick(View v) {   
                Intent intent1=new Intent(MainActivity.this,ImageSwitcherActivity.class);   
                startActivity(intent1);   
            }   
        });   
        //GridView组件单击事件   
        button2.setOnClickListener(new View.OnClickListener() {   
            @Override   
            public void onClick(View v) {   
                Intent intent2=new Intent();   
                intent2.setClass(MainActivity.this,GridViewActivity.class);   
                startActivity(intent2);   
            }   
        });   
    }   
                                                                           
    @Override   
    public boolean onCreateOptionsMenu(Menu menu) {   
        getMenuInflater().inflate(R.menu.activity_main, menu);   
        return true;   
    }   
}

布局文件此处就省略了。（因为很简单）

然后创建所需要的Android  Activity文件，这里我们定义为ImageSwitcherActivity.java文件，与之相关联的布局文件是activity_image_switcher.xml文件

ImageSwitcherActivity.java文件

public class ImageSwitcherActivity extends Activity implements ViewFactory, OnItemSelectedListener {   
                                                            
    ImageSwitcher imgswitcher;   
    @Override   
    public void onCreate(Bundle savedInstanceState) {   
        super.onCreate(savedInstanceState);   
        //requestWindowFeature(Window.FEATURE_NO_TITLE);   
        setContentView(R.layout.activity_image_switcher);   
        setTitle("ImageSwitcher");   
        imgswitcher=(ImageSwitcher) findViewById(R.id.imageswitcher);   
        imgswitcher.setFactory(this);   
        imgswitcher.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.fade_in));   
        imgswitcher.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.fade_out));   
                                                                    
        Gallery gallery=(Gallery) findViewById(R.id.gallery);   
        gallery.setAdapter(new ImageAdapter(ImageSwitcherActivity.this));//设置图片适配器   
        gallery.setOnItemSelectedListener(this);//设置监听器   
    }   
                                                            
    @Override   
    public boolean onCreateOptionsMenu(Menu menu) {   
        getMenuInflater().inflate(R.menu.activity_image_switcher, menu);   
        return true;   
    }   
                                                            
    @Override   
    public View makeView() {   
        ImageView imgview=new ImageView(this);   
        imgview.setBackgroundColor(0xFF000000);   
        //控制为了使图片适合 ImageView 的大小，按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的中间   
        imgview.setScaleType(ImageView.ScaleType.FIT_CENTER);   
        imgview.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));   
        return imgview;   
    }   
                                                            
    @Override   
    public void onItemSelected(AdapterView<?> arg0, View arg1, int position,   
            long arg3) {   
        imgswitcher.setImageResource(new ImageAdapter().image[position]);   
    }   
                                                            
    @Override   
    public void onNothingSelected(AdapterView<?> arg0) {   
    }   
}

与之相关联的布局文件，还有抽出来的类的文件分别如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >   
    <ImageSwitcher
        android:id="@+id/imageswitcher"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />   
    <Gallery
        android:id="@+id/gallery"
        android:background="#55000000"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:gravity="center_vertical"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:spacing="16dp"
        />   
                                                       
</RelativeLayout>

public class ImageAdapter extends BaseAdapter {   
                                                          
    public ImageAdapter(){}   
    private Context context;   
    public ImageAdapter(Context c)   
    {   
        context=c;   
    }   
    @Override   
    public int getCount() {   
        return image.length;   
    }   
                                                      
    @Override   
    public Object getItem(int position) {   
        return position;   
    }   
                                                      
    @Override   
    public long getItemId(int position) {   
        return position;   
    }   
                                                      
    @Override   
    public View getView(int position, View convertView, ViewGroup parent) {   
        ImageView imgview=new ImageView(context);   
        //通过资源ID设置该 ImageView 显示的内容   
        imgview.setImageResource(image[position]);   
        ///设置该属性为真可以在 ImageView 调整边界时保持图片的纵横比例   
        imgview.setAdjustViewBounds(true);   
        imgview.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));   
        return imgview;   
    }   
    //图片资源数组   
    public Integer[] image=   
        {   
            R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,R.drawable.f   
        };   
}

GridView 组件的使用与之相似，GridViewActivity.java文件：

public class GridViewActivity extends Activity {   
                                           
    private GridView gridview;   
    private ImageView imageshow;   
    int[] images;   
    int[] textviews;   
    @Override   
    public void onCreate(Bundle savedInstanceState) {   
        super.onCreate(savedInstanceState);   
        setContentView(R.layout.activity_grid_view);   
        setTitle("GridView");   
        gridview=(GridView) findViewById(R.id.gridview);   
        imageshow=(ImageView) findViewById(R.id.imageshow);   
        images=new GridViewAdapter().image;   
        List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();   
        for(int i=0;i<images.length;i++)   
        {   
            Map<String,Object> map=new HashMap<String,Object>();   
            map.put("Image",images[i]);   
            map.put("text","图片"+String.valueOf(i));   
            list.add(map);   
        }   
        SimpleAdapter adapter=new SimpleAdapter(this,list, R.layout.gridview_item,new String[]{"Image","text"},new int[]{R.id.image,R.id.textview});   
        gridview.setAdapter(adapter);//为GridView设置数据配置器   
        imageshow.setImageResource(images[0]);   
        gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {   
            @Override   
            public void onItemClick(AdapterView<?> adapter, View view, int position,   
                    long arg3) {   
                Map<String,Object> item=(HashMap<String,Object>) adapter.getItemAtPosition(position);   
                setTitle((String) item.get("text"));   
                imageshow.setImageResource(images[position]);   
            }   
        });   
    }   
                                           

activity_grid_view.xml布局文件还有一个资源文件grid_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    >   
                                          
    <GridView
        android:id="@+id/gridview"
        android:numColumns="3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="20dp"
        >   
    </GridView>   
     <ImageView
        android:id="@+id/imageshow"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        />   
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>   
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >   
                                       
    <ImageView
        android:id="@+id/image"
        android:layout_width="80dp"
                          
        />   
                                   
    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:gravity="center"
        />   
</LinearLayout>

这里我按文中写了一个GridView的例子：http://download.youkuaiyun.com/detail/kluing/7620473

我还写了一个比较简单的没有text的例题这个不用积分哦：http://download.youkuaiyun.com/detail/kluing/7620711