Android开发UI组件GridView网格视图

释放双眼,带上耳机,听听看~!

GridView(网格视图)

概述

GridView用于在界面上按行、列分布的方式来显示多个组件
        GridView和ListView有共同的父类 : AbsListView
        区别:ListView只显示一列,而GridView可以显示多列
        GridView也需要通过Adapter来提供显示的数据

XML属性

android:columnWidth setColumnWidth(int) 设置列的宽度
android:gravity setGravity(int) 设置对齐方式
android:horizontalSpacing setHorizontalSpacing(int) 设置各元素之间的水平间距
android:numColumns setNumColumns(int) 设置列数
android:verticalSpacing setVerticalSpacing(int) 设置各元素之间 的垂直间距

案例:带预览的图片

Android_GridView/res/layout_mian.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
>
<!-- 定义一个GridView组件 -->
<GridView
android:id="@+id/grid01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="1pt"
android:verticalSpacing="1px"
android:numColumns="4"
android:gravity="center"
/>
<!-- 定义一个ImageView组件 -->
<ImageView android:id="@+id/image01"
android:layout_width="240dp"
android:layout_height="240dp"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>

Android_GridView/res/cell.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:padding="2pt"
>
<ImageView
android:id="@+id/image1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
</LinearLayout>

java代码

package com.example.android_gridview;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
public class MainActivity extends Activity {
GridView grid;
ImageView image;
int[] imageIds = new int[]
{
R.drawable.one,
R.drawable.two,
R.drawable.three,
R.drawable.four,
R.drawable.one_one,
R.drawable.two_two,
R.drawable.three_three,
R.drawable.four_four
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//创建一个List对象,List对象的元素是Map
List<Map<String,Object>> listItems = new ArrayList<Map<String,Object>>();
for(int i = 0 ; i < imageIds.length; i++){
Map<String,Object> listItem = new HashMap<String,Object>();
listItem.put("image", imageIds[i]);
listItems.add(listItem);
}
//获取显示图片的 ImageView
image = (ImageView) findViewById(R.id.image01);
grid = (GridView) findViewById(R.id.grid01);
//创建一个SimpleAdapter
SimpleAdapter simpleAdapter = new SimpleAdapter (this,
listItems,R.layout.cell,new String[] {"image"},new int[] {R.id.image1});
//为GridView设置Adapter
grid.setAdapter(simpleAdapter);
//添加列表项被选中的监听器
grid.setOnItemSelectedListener(new OnItemSelectedListener()
{
@Override
public void onItemSelected(AdapterView<?> parent, View view,
int position, long id) {
// TODO Auto-generated method stub
//显示当前被选中的图片
image.setImageResource(imageIds[position]);
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub
}
});
//添加列表被单击的监听器
grid.setOnItemClickListener(new OnItemClickListener()
{
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
// TODO Auto-generated method stub
//显示被单击的图片
image.setImageResource(imageIds[position]);
}
});
}
@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;
}
}

调试效果

人已赞赏
Android文章

Android开发规范

2020-1-18 16:59:04

Android文章

Android MVP+Retrofit+RxJava实践小结

2020-1-18 21:00:27

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索