Grid View 也是最近做的项目里面的UI之一,在Tab的一个标签里面嵌入Grid View。
先单独地把GridView拿出来理一遍吧,只是官方网站上的教程的资源都是静态的,没有涉及到数据的动态存取,这一点需要进一步的学习和探索,尤其是数据库SQLite的使用。
英文官方教程地址:http://developer.android.com/resources/tutorials/views/hello-gridview.html
Grid View (不知道中文翻译确切的该叫什么,就不翻译了吧)
GridView是一个以二维,可滚动的形式显示条目的ViewGroup.Grid条目使用ListAdapter自动地被嵌入到页面中。
在本教程中,我们会构建一个grid形式的图片缩略图。当一个图片被选中后,toast信息会显示图片的位置(以数字的形式)。
1.建立一个工程命名为 HelloGridView.
2.找一些你想用的图片,或者直接在官网上下载样例图片,并且把它们都保存到工程的res/drawable/路径。
3.打开 res/layout/main.xml文件并且插入如下代码:
<? xmlversion = "1.0" encoding = "utf-8" ?>
当条目被点击的时候,需要发生一些事情,实现一些功能,所以setOnItemClickListener()方法被传给一个新的对象AdapterView.OnItemClickListener。这个匿名的实例定义了返回方法OnItemClick()使得弹出一个Toast来显示所选的条目的编号。用户还可以将装个编号用于显示全幅的图片。
5.创建一个新的ImageAdapter类来扩展BaseAdapter:
先单独地把GridView拿出来理一遍吧,只是官方网站上的教程的资源都是静态的,没有涉及到数据的动态存取,这一点需要进一步的学习和探索,尤其是数据库SQLite的使用。
英文官方教程地址:http://developer.android.com/resources/tutorials/views/hello-gridview.html
Grid View (不知道中文翻译确切的该叫什么,就不翻译了吧)
GridView是一个以二维,可滚动的形式显示条目的ViewGroup.Grid条目使用ListAdapter自动地被嵌入到页面中。
在本教程中,我们会构建一个grid形式的图片缩略图。当一个图片被选中后,toast信息会显示图片的位置(以数字的形式)。
1.建立一个工程命名为 HelloGridView.
2.找一些你想用的图片,或者直接在官网上下载样例图片,并且把它们都保存到工程的res/drawable/路径。
3.打开 res/layout/main.xml文件并且插入如下代码:
<? xmlversion = "1.0" encoding = "utf-8" ?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnWidth="90dp" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center" /> GridView会填满整个屏幕,属性很容易解释。在main.xml布局设置好以后,就要设置内容,实例对象GridView通过findViewById(int)获得。然后使用setAdapter()方法来设置一个自定义适配器(ImageAdapter)(连接器,不知道用什么词语来说Adapter),作为所有将被显示的条目的源。ImageAdapter将在下一步定义。
其实呢,我觉得,在将来,如果要进行相关的关于GridView的开发,到官网上将次段代码复制到xml文件里就好,通常来说,这代表了最普遍的用法。 4.打开HelloGridView.java,插入如下代码来完善onCreate()方法: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridview = (GridView) findViewById(R.id.gridview); gridview.setAdapter(new ImageAdapter(this)); gridview.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View v, int position, long id) { Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show(); } }); }
当条目被点击的时候,需要发生一些事情,实现一些功能,所以setOnItemClickListener()方法被传给一个新的对象AdapterView.OnItemClickListener。这个匿名的实例定义了返回方法OnItemClick()使得弹出一个Toast来显示所选的条目的编号。用户还可以将装个编号用于显示全幅的图片。
5.创建一个新的ImageAdapter类来扩展BaseAdapter:
public class ImageAdapter extends BaseAdapter { private Context mContext; public ImageAdapter(Context c) { mContext = c; } public int getCount() { return mThumbIds.length; } public Object getItem(int position) { return null; } public long getItemId(int position) { return 0; } // create a new ImageView for each item referenced by the Adapter public View getView(int position, View convertView, ViewGroup parent) { ImageView imageView; if (convertView == null) { // if it's not recycled, initialize some attributes imageView = new ImageView(mContext); imageView.setLayoutParams(new GridView.LayoutParams(85, 85)); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setPadding(8, 8, 8, 8); } else { imageView = (ImageView) convertView; } imageView.setImageResource(mThumbIds[position]); return imageView; } // references to our images private Integer[] mThumbIds = { R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 }; } 首先,它实现了BaseAdapter里面一些需要的方法。构造器getCount()用于内部。通常来说,getItem(int)应该返回适配器中特定位置的实际对象(物件),但是此例中不作讨论。同样,getItemId(int)应该返回条目的行id,在这里也补需要。 第一个必要的方法是getView()。此方法为每个添加到适配器中的图片创建一个新的View,当此方法被调用时,一个View就被传入,通常来说这个View是一个可循环利用的对象。因此这里有一个检查,看这个对象是不是空对象。如果是空的,那么一个ImageView就会被实例化,并且按照需要的属性进行配置。 1)setLayoutParams(ViewGroup.LayoutParams)设置图片的宽度和高度,这样就可以实现无论drawable中图片本身大小是多少,各张图片都被重新设置或者裁剪为新的显示大小。 2)setScaleType(ImageView.ScaleType),声明怎样进行裁剪。本例中是朝中心进行裁剪。 3)setPadding(int,int,int,int)定义每一边的填充。 //我在我自己的应用中将此行注释掉了 如果传递给getView()的View不是空值,那么本地的ImageView就使用循环的对象来进行初始化。 在getView()方法的最后,传给方法的位置数值用来从mThumbIds队列中选择图片。---mThumbIds是ImageView的图片集中地。所有的图片都是用来定义drawable资源中的mThumbIds队列。 6.运行应用。