今天我们来看一下网格视图和最常用的适配器BaseAdapter:
贴代码:
网格视图layout:
<GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridView1" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:columnWidth="90dp" android:numColumns="3" android:stretchMode="columnWidth" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" > </GridView>
主程序Activity:
package com.example.demo_ui3; import adapter.ImageAdapter; import android.os.Bundle; import android.app.Activity; import android.content.Context; import android.view.Menu; import android.view.View; import android.widget.AdapterView; import android.widget.GridView; import android.widget.Toast; public class MainActivity extends Activity { private Context ctx = this; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); GridView grid = (GridView) findViewById(R.id.gridView1); grid.setAdapter(new ImageAdapter(ctx)); grid.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View v, int position, long id) { showToast("position:"+position+",id:"+id); } }); } @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; } public void showToast(String words){ Toast.makeText(ctx, words, Toast.LENGTH_SHORT).show(); } }
BaseAdapter 的实现
package adapter; import com.example.demo_ui3.R; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.Gallery; import android.widget.ImageView; public class ImageAdapter extends BaseAdapter { private Context ctx; private int[] imgs = { R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, R.drawable.img5, R.drawable.img6, R.drawable.img7, R.drawable.img8, R.drawable.img9 }; public ImageAdapter(Context ctx) { this.ctx = ctx; } @Override public int getCount() { return imgs.length; } @Override public Object getItem(int position) { return imgs[position]; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ImageView view = new ImageView(ctx); view.setImageResource(imgs[position]); return view; } }
解释篇:
代码很简单吧!首先从MainActivity开始说,我们看到 activity_main.xml 就知道里面显示的内容就只有一个网格视图。里面配置的属性:
<GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridView1" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:columnWidth="90dp" android:numColumns="3" android:stretchMode="columnWidth" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" > </GridView>
android:verticalSpacing 水平间距
android:horizontalSpacing 垂直间距
android:columnWidth 一个格子占用的宽度
android:columns 一行有多少个格子
android:stretchMode 伸展的参照
android:gravity 格子中的元素重力选项
这些是最基本的,大家可以去查一下相关资料,了解一下其他的属性
我们来看主程序是怎么加载网格视图的内容的:
GridView grid = (GridView) findViewById(R.id.gridView1); grid.setAdapter(new ImageAdapter(ctx));我们并没有看到具体的显示数据在哪里,因为都被写到了ImageAdapter中,这样写肯定是不科学的,这里只是为了做演示,所以写的简单一点。其实我们要显示的内容也应该通过一个list或者什么集合类当做参数传入,这样可扩张性更好。
我们来看看ImageAdapter的实现:
public class ImageAdapter extends BaseAdapter { private Context ctx; private int[] imgs = { R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, R.drawable.img5, R.drawable.img6, R.drawable.img7, R.drawable.img8, R.drawable.img9 }; public ImageAdapter(Context ctx) { this.ctx = ctx; } @Override public int getCount() { return imgs.length; } @Override public Object getItem(int position) { return imgs[position]; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ImageView view = new ImageView(ctx); view.setImageResource(imgs[position]); return view; } }注意,只要是集成与BaseAdapter都需要重写以上@Override的方法,其中:
构造函数:主要传入所属activity的Context, 以及一些初始化工作。
getCount() :得到要显示的资源的条目总数。
getItem():得到某个位置上要显示的资源。
getItemId() :得到位置的ID。
getView() :得到要显示的视图。
最后一个getView()方法是最重要的,做的工作就是构造一个视图给网格视图的某一个格子,就是在构造要填充的数据。
我们可以看到这里只是简单的构造了一个图片,然后设置要显示的图片,最后将图片view返回,这样系统就会自动将这个view放在相应的位置上。
当然也可以构造比较复杂的内容,比如在一个layout中有图片有文字,这就需要Inflater来实现,我们将在后面展示。
好了,今日完毕。