介绍
网格视图(
GridView
)是按照行、列分布的方式来显示多个组件,通常用于显示图片或图标等。
例如,
QQ
相册相片预览界面(如图
4.26
所示),以及口袋购物浏览商品界面(如图
4.27
所示), 都应用了网格视图。
在使用网格视图时,需要在屏幕上添加
GridView
组件,通常在
XML
布局文件中使用
<GridView>
标记实现,其基本语法如下:
<GridView
属性列表
>
</GridView>
XML属性
GridView
组件支持的
XML
属性如表
XML属性 | 描述 |
android:columnWidth | 用于设置列的宽度 |
android:gravity | 用于设置对齐方式 |
android:horizontalSpacing | 用于设置各元素之间的水平间距 |
android:verticalSpacing | 用于设置各元素之间的垂直间距 |
android:numColumns | 用于设置列数,其属性值通常为大于 1 的值,如果只有 1 列,那么最好使用 ListView 实现 |
android:stretchMode | 用于设置拉伸模式,其中属性值可以是 none(不拉伸)、 spacingWidth(仅拉伸元素之间的间距)、columnWidth(仅拉伸表格元素本身)、spacingWidthUniform(表格元素本身、元素之间的间距一起拉伸) |
例子
下面通过一个具体的实例演示如何通过 BaseAdapter 适配器指定内容的方式创建 GridView
定制GridView的界面
定义GridView布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="15dp">
<GridView
android:id="@+id/gv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="3"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp" />
</LinearLayout>
定义menu_item.xml
定制自己所要展示的效果,这里我用的LinearLayout,设置为图片在上,文字在下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<ImageView
android:id="@+id/menu_img"
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/menu_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"
android:textColor="@color/orange"
android:gravity="center"
android:layout_marginTop="10dp" />
</LinearLayout>
定义实体类MenuItem.java
public class MenuItem {
String menuName;
int menuDrawableId;
public MenuItem(String menuName, int menuDrawableId) {
this.menuName = menuName;
this.menuDrawableId = menuDrawableId;
}
}
定义适配器MenuAdapter.java
public class MenuAdapter extends BaseAdapter {
private List<MenuItem> dataList;
public MenuAdapter(List<MenuItem> dataList){
this.dataList=dataList;
}
@Override
public int getCount() {
return dataList.size();
}
@Override
public Object getItem(int position) {
return dataList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View menuView = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_grid_item, null);
ImageView imageViewMenu=(ImageView)menuView.findViewById(R.id.menu_img);
TextView tvMenuName=(TextView) menuView.findViewById(R.id.menu_title);
imageViewMenu.setImageResource(dataList.get(position).menuDrawableId);
tvMenuName.setText(dataList.get(position).menuName);
return menuView;
}
}
编写MainActivity
public class GridViewActivity extends AppCompatActivity {
private GridView gridView;
private List<MenuItem> dataList;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grid_view);
initMenu();
gridView = (GridView) findViewById(R.id.gv);
MenuAdapter menuAdapter=new MenuAdapter(dataList);
gridView.setAdapter(menuAdapter);
}
private void initMenu(){
dataList=new ArrayList<>();
dataList.add(new MenuItem("地图",R.drawable.menu1));
dataList.add(new MenuItem("基金",R.drawable.menu2));
dataList.add(new MenuItem("地狱",R.drawable.menu3));
dataList.add(new MenuItem("管家",R.drawable.menu4));
dataList.add(new MenuItem("图片",R.drawable.menu5));
dataList.add(new MenuItem("理财",R.drawable.menu6));
dataList.add(new MenuItem("购物",R.drawable.menu7));
}
}
效果