网格视图在Android应用程序中的使用

原创 2015年07月10日 18:34:43

网格视图是在应用程序中比较常见的视图。
首先介绍一下GridView类,GridView类位于android.widget包下,该视图是将其他空间以二维格式显示到表格中的,而这些控件全部来自于ListAdapter适配器。
这里写图片描述
GridView类的属性同样有两种配置方式,即XML属性配置和Java代码中配置。如表中列出了常见的属性和方法。
这里写图片描述
其次,介绍一下网格视图的使用,下面将通过一个完整的案列详细介绍网格视图的使用方法,在该案例中同样列出了各个动漫名人,包括其照片及描述,案例的开发步骤如下:

  1. 创建一个新的Android项目,名称为Samples_6_2.
  2. 将要用到的图片资源存放到res/drawable-mdpi目录下,如下图所示。
    这里写图片描述
  3. 定义程序中要用到的字符串资源,修改res/values目录下的strings.xml文件。
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Samples_6_2</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="hello">当前无选中选项</string>
    <string name="a">江户川柯南</string>
    <string name="b">灰原哀</string>
    <string name="c">工藤一新</string>
    <string name="d">毛利兰</string>
    <string name="e">怪盗基德</string>

    <string name="adis">中毒后,身体成6岁小学生的模样</string>
    <string name="bdis">原黑衣组织成员,服毒后变成小学生模样</string>
    <string name="cdis">著名高中生侦探</string>
    <string name="ddis">女主角</string>
    <string name="edis">充满传奇色彩超级怪盗</string>
</resources>
  1. 在res/values目录下创建colors.xml文件,并添加颜色属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#CD3333</color>
    <color name="green">#00FF7F</color>
    <color name="blue">#0000AA</color>
    <color name="white">#FFFFFF</color>
    <color name="black">#050505</color>
    <color name="gray">#737373</color>
</resources>
  1. 打开res/layout目录下的activity_main.xml文件,修改其内容。
<?xml version="1.0" encoding="UTF-8"?>
<!-- 定义一个线性布局 -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- 添加一个TextView控件 -->
    <TextView 
        android:id="@+id/TextView01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"
        android:textColor="@color/green"
        android:textSize="24dip"/>
    <!-- 添加一个GridView控件 -->
    <GridView 
        android:id="@+id/GridView01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:verticalSpacing="5dip"
        android:horizontalSpacing="5dip"
        android:stretchMode="columnWidth"/>
</LinearLayout>
  1. res/layout目录下创建grid_row.xml文件,并添加GridView控件的布局内容。
<?xml version="1.0" encoding="utf-8"?>
<!-- 添加一个水平线性布局 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <!-- 添加一个ImageView控件 -->
    <ImageView 
        android:id="@+id/ImageView01"
        android:scaleType="fitXY"
        android:layout_width="100dip"
        android:layout_height="98dip"/>
    <!-- 添加一个TextView控件 -->
    <TextView 
        android:id="@+id/TextView02"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:textColor="@color/green"
        android:textSize="24dip"
        android:paddingLeft="5dip"/>
    <!-- 添加一个TextView控件 -->
    <TextView 
        android:id="@+id/TextView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="24dip"
        android:paddingLeft="5dip"/>

</LinearLayout>
  1. 接下来是对Activity类的编写,MainActivity.java类
package com.example.samples_6_2;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.HashMap;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.AdapterView;
import android.view.View;
import android.widget.TextView;
import android.widget.LinearLayout;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity {
    //所有资源字符串id的数组
    int [] nameIds={R.string.a,R.string.b,R.string.c,R.string.d,R.string.e};
    //所有资源图片id的数组
    int [] drawableIds={R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
    //所有描述字符串id数组
    int [] msgIds={R.string.adis,R.string.bdis,R.string.cdis,R.string.ddis,R.string.edis};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//设置当前显示的用户界面
        //得到GridView的引用
        GridView gv=(GridView)this.findViewById(R.id.GridView01);
        //创建适配器
        SimpleAdapter sca=new SimpleAdapter(
                this,   //Context
                generateDataList(),                 //数据List
                R.layout.grid_row,                  //行对应layout的id
                new String[]{"col1","col2","col3"},     //列名列表  
                new int[]{R.id.ImageView01,R.id.TextView02,R.id.TextView03});   //列对应控件Id列表
        gv.setAdapter(sca); //为GridView设置数据适配器
        gv.setOnItemSelectedListener(new OnItemSelectedListener()
        {
              public void onItemSelected(AdapterView<?> arg0,View arg1, int arg2, long arg3)
              {
                  //获取主界面TextView
                  TextView tv=(TextView)MainActivity.this.findViewById(R.id.TextView01);
                  //获取当前选中选项对应的LinearLayout
                  LinearLayout ll=(LinearLayout)arg1;
                  //获取其中的TextView
                  TextView tvn=(TextView)ll.getChildAt(1);
                  //获取其中的TextView
                  TextView tvnL=(TextView)ll.getChildAt(2);
                  StringBuilder sb=new StringBuilder();
                  //获取姓名信息
                  sb.append(tvn.getText());
                  sb.append("  ");
                  //获取描述信息
                  sb.append(tvnL.getText());
                  tv.setText(sb.toString());
              }
              public void onNothingSelected(android.widget.AdapterView<?> arg0)
              {

              }
        });
        gv.setOnItemClickListener(new OnItemClickListener()
        {
              public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3)
              {
                  //获取主界面TextView
                  TextView tv=(TextView)MainActivity.this.findViewById(R.id.TextView01);
                  //获取当前选中选项对应的LinearLayout
                  LinearLayout ll=(LinearLayout)arg1;
                  //获取其中的TextView
                  TextView tvn=(TextView)ll.getChildAt(1);
                  //获取其中的TextView
                  TextView tvnL=(TextView)ll.getChildAt(2);
                  StringBuilder sb=new StringBuilder();
                  //获取姓名信息
                  sb.append(tvn.getText());
                  sb.append("  ");
                  //获取描述信息
                  sb.append(tvnL.getText());
                  tv.setText(sb.toString());
              }
        });
    }

    public List<? extends Map<String,?>> generateDataList() //得到数据
    {
        ArrayList<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
        int rowCounter=drawableIds.length;  //得到表格的行数
        //循环生成每行包含对应各个列数据的Map;col1、col2、col3为列名
        for(int i=0;i<rowCounter;i++)
        {
            HashMap<String,Object> hmap=new HashMap<String,Object>();
            //第一列为图片
            hmap.put("col1", drawableIds[i]);
            //第二列为姓名
            hmap.put("col2", this.getResources().getString(nameIds[i]));
            //第三列为描述
            hmap.put("col3", this.getResources().getString(msgIds[i]));
            list.add(hmap);
        }
        return list;
    }

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

}
  1. 运行效果如下图所示:
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Android应用开发学习笔记之网格视图

作者:刘昊昱  博客:http://blog.csdn.net/liuhaoyutz   本文我们来学习一个使用表格视图的程序,下图是该程序的运行效果: 该程序主Activity文件内容如下: ...

Android基础入门教程——2.4.9 GridView(网格视图)的基本使用

Android基础入门教程——2.4.9 GridView(网格视图)的基本使用标签(空格分隔): Android基础入门教程本节引言: 本节给大家介绍的是第二个Adapter类的控件——Grid...

Android网格视图

  • 2012-10-11 11:22
  • 147KB
  • 下载

Android应用程序窗口(Activity)的视图对象(View)的创建过程分析

从前文可知道,每一个Activity组件都有一个关联的Window对象,用来描述一个应用程序窗口。每一个应用程序窗口内部又包含有一个View对象,用来描述应用程序窗口的视图。应用程序窗口视图是真正用来...

Android应用程序窗口(Activity)的视图对象(View)的创建过程分析

从前文可知道,每一个Activity组件都有一个关联的Window对象,用来描述一个应用程序窗口。每一个应用程序窗口内部又包含有一个View对象,用来描述应用程序窗口的视图。应用程序窗口视图是真正用来...

阅读《Android 从入门到精通》(22)——网格视图

网格视图(GridView) 继承于 AdapterView 类,通常需要和列表适配器 ListAdapter 配合使用 GridView 类方法 GridView 示例 完整工程: 1.Mai...

【Android开发】高级组件-网格视图

网格视图(GridView)是按照行、列分布式的方式来显示多个组件,通常用于显示图片或是图标等。在使用网格视图时,首先要在屏幕上添加GridView组件,通常使用标记在XML布局文件中添加,其基本语法...

Android UI控件详解-GridView(网格视图)

xml布<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http...

步步为营_Android开发课[22]_用户界面之GridView(网格视图)

Focus on technology, enjoy life!—— QQ:804212028 浏览链接:http://blog.csdn.net/y18334702058/article/det...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)