GridView 网络视图

为什么80%的码农都做不了架构师？>>>   

知识点补充：

1.关于Map<String key ,Object value>:

 首先介绍一下什么是Map。在数组中我们是通过数组下标来对其内容索引的，而在Map中我们通过对象来对对象进行索引，用来索引的对象叫做key，其对应的对象叫做value。

如：  Map map=new HashMap();               
            map.put("a", "aaa");   

    HashMap中通过get()来获取value，通过put()来插入value，ContainsKey()则用来检验对象是否已经存在。可以看出，和ArrayList的操作相比，HashMap除了通过key索引其内容之外，别的方面差异并不大。 

 2.关于Android SimpleAdapter：

定义：这是一个简单的适配器，可以将静态数据映射到XML文件中定义好的视图。

 

构造函数：public SimpleAdapter (Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)

context   关联SimpleAdapter运行着的视图的上下文 。

data  一个Map的列表。在列表中的每个条目对应列表中的一行，应该包含所有在from中指定的条目resource              一个定义列表项目的视图布局的资源唯一标识。布局文件将至少应包含哪些在to中定义了的名称。

from       一个将被添加到Map上关联每一个项目的列名称的列表

to    应该在参数from显示列的视图。这些应该全是TextView。在列表中最初的N视图是从参数from中最初的N列获取的值。

 

 详情可以访问：http://www.cnblogs.com/over140/archive/2010/11/24/1886151.html

接下来 说一下主题相关内容：

首先我们得要有一个，gridview.xml

XML属性表如下 ：

 

属性名称	描述
android:columnWidth	设置列的宽度。
android:gravity	设置此组件中的内容在组件中的位置。可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical 可以多选，用“|”分开。关联方法：setGravity (int gravity)
android:horizontalSpacing	两列之间的间距。关联方法：setHorizontalSpacing(int)
android:numColumns	列数。如果为auto_fit表示为列数 自动设置。
android:stretchMode	缩放模式。关联方法：setStretchMode(int)
android:verticalSpacing	两行之间的间距。关联方法：setVerticalSpacing(int)

 

mygridview.xml:

 

<?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" >
    <GridView
		android:id="@+id/grid"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" 
		android:verticalSpacing="10dp"
		android:horizontalSpacing="10dp"
		
		android:numColumns="auto_fit"
		android:columnWidth="100dp"
		android:stretchMode="columnWidth">       
		<!-- 
android:stretchMode="columnWidth，缩放与列宽大小同步
android:numColumns="auto_fit" ，GridView的列数设置为自动 
android:columnWidth="90dp"，每列的宽度，也就是Item的宽度		
		 -->
    </GridView>

</LinearLayout>

效果图片：

 

这时还需要一个griditem.xml

<?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" >
   <ImageView android:id="@+id/griditem_pic"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:background="@drawable/ic_launcher"
		android:layout_gravity="center_horizontal">
	</ImageView>
	<TextView android:id="@+id/griditem_title"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center_horizontal"
		android:text="test">
	</TextView>

</LinearLayout>

其效果图：

 

最后 我们来看看mainActivity.java:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mygridview);
        
        GridView gridView = (GridView) findViewById(R.id.grid);
        //定义 一个list类型 引用变量contents ,然后将arraylist动态组创建对象传值给引用变量。
        //list 可以添加任何类型的对象 ，在这里只能添加Map<String,Object>类型。
        List<Map<String, Object>> contents = new ArrayList<Map<String, Object>>();
        for (int i = 0; i < 10; i++) {
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("PIC", R.drawable.s);
			map.put("TITLE", "Test Title");
			contents.add(map);//调用 add()方法，添加对象map.
		}
        SimpleAdapter adapter = new SimpleAdapter(this,
				(List<Map<String, Object>>) contents, R.layout.griditem,
				new String[] { "PIC", "TITLE" }, new int[] { R.id.griditem_pic,
						R.id.griditem_title, });
        //说白了一句，simpleadapter 起到的作用就是map的内容映射到 griditem.xml布局里，重新布局，不替换原来的图片。
		gridView.setAdapter(adapter);
		
    }

    @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;
    }
    
}

最终结果：

 

 

 

 

转载于:https://my.oschina.net/u/1773495/blog/306123