GridView--网格视图、ImageSwitcher--图像切换器
==》
GridView,用于在界面上按行、列的分布形式显示多个组件;GridView和ListView父类相同——AbsListView,两者的主要区别是ListView属单方向分布,GridView属两个方向分布。
GridView也是通过Adapter提供显示数据——可通过SimpleAdapter或者自定义方式(开发重写BaseAdapter)提供数据显示。
GridView常用XML属性:
android:columnWidth | setcolumnWidth(int) | 设置列的宽度 |
android:gravity | setGravity(int) | 设置对其方式 |
android:horizontalSpacing | setHorizontalSpacing(int) | 设置各元素之间的水平间距 |
android:numColumns | setNumColumns(int) | 设置列数 |
android:stretchMode | setStretchMode(int) | 设置拉伸模式 |
android:verticalSpacing | setVerticalSpacing(int) | 设置各元素 |
注意:
GridView在使用时,android:columnWidth属性设置一般都大于“1”,默认为1.
android:stretchMode支持的属性:
NO_STRETCH:不拉伸
STRETCH_SPACING:仅拉伸元素之间的间距
STRETCH_SPACING_UNIFORM:表格元素本身、元素之间的间距一起拉伸
STRETCH_SPACING_COLUMN_WIDTH:仅拉伸元素表格元素本身
ImageSwitcher
==>
ImageSwitcher由FrameLayout派生而来,ImageSwitcher和ImageView很相似,都用于显示图片。
ImageSwitcher比后者多了一个功能——显示的图片切换时可以设置动画效果。
使用ImageSwitcher需要为其设置一个ImageSwitcher.ViewFactory,
实现ImageSwitcher.ViewFactory时需要实现一个makeView()——该方法通常返回一个ImageView,而ImageSwitcher则负责显示这个ImageView.
实例一:
布局文件==》
<LinearLayout 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"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".MainActivity" >
<GridView
android:id="@+id/gvcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="2pt"
android:numColumns="4"
android:verticalSpacing="2pt" />
<ImageSwitcher
android:id="@+id/imgswitcher"
android:layout_gravity="center_horizontal"
android:layout_width="320dp"
android:layout_height="320dp" />
</LinearLayout>
cell.xml==>
<?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/imgview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
代码实现==》
package com.example.mygridview;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.os.Build;
import android.os.Bundle;
import android.annotation.TargetApi;
import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.ViewSwitcher.ViewFactory;
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class MainActivity extends Activity
{
private int[] ImageIds = new int[]
{ R.drawable.one, R.drawable.tw, R.drawable.th, R.drawable.eight, R.drawable.ele,
R.drawable.five, R.drawable.four, R.drawable.nice, R.drawable.seven, R.drawable.six,
R.drawable.sl, R.drawable.ss, R.drawable.sw, R.drawable.ten, R.drawable.tw,
R.drawable.oneowne };
private ImageSwitcher Switcher;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
for (int i = 0; i < ImageIds.length; i++)
{
Map<String, Object> item = new HashMap<String, Object>();
item.put("image", ImageIds[i]);
list.add(item);
}
Switcher = (ImageSwitcher) this.findViewById(R.id.imgswitcher);
// 设置图片更换的动画效果
Switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
Switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
// 为ImageSwitcher设置图片切换的动画效果
Switcher.setFactory(new ViewFactory()
{
@Override
public View makeView()
{
ImageView img = new ImageView(MainActivity.this);
img.setBackgroundColor(0xff0000);
img.setScaleType(ImageView.ScaleType.FIT_CENTER);
img.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
return img;
}
});
// 创建一个SimpleAdapter
SimpleAdapter adaper = new SimpleAdapter(this, list, R.layout.cell, new String[]
{ "image" }, new int[]
{ R.id.imgview });
GridView gv = (GridView) this.findViewById(R.id.gvcontent);
gv.setAdapter(adaper);
// 以下为两种处理事件的方式
// 方式一,建议使用
gv.setOnItemClickListener(new myGridViewItemOnListener());
// 方式二
gv.setOnItemClickListener(new OnItemClickListener()
{
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{
// 显示当前被选中的图片
Switcher.setImageResource(ImageIds[position % ImageIds.length]);
}
});
}
private class myGridViewItemOnListener implements OnItemClickListener
{
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{
// 显示当前被选中的图片
Switcher.setImageResource(ImageIds[position % ImageIds.length]);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
注意:单击GridView中的图片ImageSwitcher会显示对应的图片信息。
运行效果如下: