今天我们来看一下网格视图和最常用的适配器BaseAdapter:
- GridView
- BaseAdapter
贴代码:
1. res/layout/main_activity.xml
网格视图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>
2. src/com.example.demo_ui3/MainActivity.java
主程序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();
}
}
3. src/adapter/ImageAdapter.java
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来实现,我们将在后面展示。
好了,今日完毕。