android基础入门GridView视图(12)

一.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;@Overrideprotected 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() {@Overridepublic 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;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn img.length;}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {// TODO Auto-generated method stubImageView 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;}}@Overridepublic 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;}}

运行效果：

第二种实现方式：
主界面布局(activity_main.xml)：

<?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>

显示布局(main.xml)：

<?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);      }@Overridepublic 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;}}

运行图片：

更多相关文章

随机推荐