一.GridView(網格視圖):
我們可以將GridView和一個ImageView配合使用來顯示一系列的圖像。
GridView屬性介紹:
android:columnWidth 設置列的寬度。
android:verticalSpacing 設置兩行之間的間距。
android:horizontalSpacing 設置兩列之間的間距。
android:stretchMode 設置縮放模式。
android:numColumns 設置顯示的列數。
android:gravity 設置此組件中的內容在組件中的位置。可選的值有:top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多選,用“|”分開。
實例演示:
佈局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<GridView
android:id="@+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:numColumns="3" >
</GridView>
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
實現代碼:
public class MainActivity extends Activity {
//可以自己設置圖片,圖片大小不宜過大。
Integer[] img = {
R.drawable.img1,
R.drawable.img2,R.drawable.img3,
R.drawable.img4,R.drawable.img5,
R.drawable.img8,R.drawable.img9,
};
private ImageView imgView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imgView = (ImageView)findViewById(R.id.img);
GridView gird = (GridView)findViewById(R.id.gridView1);
gird.setAdapter(new ImageAdapter(this));
gird.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
imgView.setBackgroundResource(img[arg2]);
Toast.makeText(getApplicationContext(), "點擊了"+arg2, Toast.LENGTH_SHORT).show();
}
});
}
public class ImageAdapter extends BaseAdapter{
public Context context;
public ImageAdapter(Context context){
this.context = context;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return img.length;
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ImageView imageView;
if(convertView == null){
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(85,85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(5, 5, 5, 5);
}else{
imageView = (ImageView)convertView;
}
imageView.setImageResource(img[position]);
return imageView;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<GridView
android:id="@+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:numColumns="3" >
</GridView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingBottom="6dip"
>
<ImageView
android:id="@+id/image_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="@+id/text_item"
android:layout_below="@+id/image_item"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
public class MainActivity extends Activity {
private GridView gv;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//準備要添加的數據條目
List<Map<String, Object>> items = new ArrayList<Map<String,Object>>();
for (int i = 0; i < 9; i++) {
Map<String, Object> item = new HashMap<String, Object>();
item.put("imageItem", R.drawable.ic_launcher);//使用系統默認圖標
item.put("textItem", "icon" + i);//按序號添加ItemText
items.add(item);
}
//實例化一個適配器,第二個參數是需要綁定的數據,第三個參數是實現的佈局方式,第四和第五個參數是實現組件與數據的綁定。
SimpleAdapter adapter = new SimpleAdapter(this,
items,
R.layout.main,
new String[]{"imageItem", "textItem"},
new int[]{R.id.image_item, R.id.text_item});
//獲得GridView實例
gv = (GridView)findViewById(R.id.gridView1);
//爲GridView設置適配器
gv.setAdapter(adapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
運行圖片: