android学习笔记(32)网格视图(GridView )和图形切换器(ImageSwitcher ) 功能和用法

文章标签: android,android-gridview
2015-1-1 21:17:41     人阅读    

       GridView用于在界面上按行、列分布的方式来显示多个组件。
          GridView 和 ListView 有共同的父类:AbsListView,因此 GridView 和 ListView 具有一定 的相似性。GridView与ListView的主要区别在于:ListView只是在一个方向上分布;而 GridView则会在两个方向上分布。
与ListView类似的是,GridView也需要通过Adapter来提供显示的数据:幵发者既可通 过SimpleAdapter来为GridView提供数据,也可通过开发      BaseAdaptei•的子类来为GridView 提供数据。不管使用哪种方式,GridView与ListView的用法基本是一致的。


GridView提供了如表2.19所示的常用XML属性。
表2.19 GridView常用的XML属性
XML属性                                                相关方法                                                说明
androidicolumnWidth                       setColumnWidth(int)                                   设置列的宽度
andn>id:gravity                              setGravity(int)                                              设置对齐方式
android:horizontalSpacing              setHorizontalSpacing(int)                               设W各元素之N的水平间距
android:numColumns                    setNumColumns(int)                                     设置列数
android: stretchModc                     sctStretchMode( int)                                     设置拉伸模式
android: verticalSpacing                 setVerticalSpacing(int)                                   设置各元素之间的垂立间距
提示: 
         使用GridView时一般都应该指定numColumns大于1,否则该属性的默认值为1。如果将属性设为1,则意味着该GridView只有一列,那GridView就变成了ListView。
表2.19所示的android:stretchMode属性支持如下几个属性值。

NO—STRETCH:不拉伸
STRETCH_SPACING:仅拉伸元素之间的间距。
STRETCH_SPACINGJJNIFORM:表格元素本身、元素之间的间距一起拉伸。
STRETCH—COLUMN_WIDTH:仅拉伸元素表格元素本身。


下面通过一个简单的例子来介绍GridView的用法,本示例采用SimpleAdapter为 GridView提供数据。
实例:带预览的图片浏览器
木例将会采用一个GridView以行、列的形式来组织所有图片的预览视图。然后程序用一 个ImageSwitcher来显不图片。
ImageSwitcher 由 FrameLayout 派生而出,ImageSwitcher 组件和 ImageView 很相似,它们都可用来显示图片,但ImageSwitcher比普通ImageView多一个功能:它所显不的图片切换时可以设置动画效果。
Android使用ImageSwitcher时往往需要为它设置一个ImageSwitcher.ViewFactory ,实现 ImageSwitcher. ViewFactory时需要实现一个makeView()方法,该方法通常会返回一个 ImageView,而 ImageSwitcher 则负责显示这个 ImageView。
下面是本示例所使用的界面布局文件。
程序清单:codes\02\2.4\GridViewTest\res\layout\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"
 android:gravity="center_horizontal"
 >
<!-- 定义一个GridView组件 -->
<GridView  
 android:id="@+id/grid01"
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:horizontalSpacing="pt"
 android:verticalSpacing="2pt"
 android:numColumns="4"
 android:gravity="center"
 />
<!-- 定义一个ImageSwitcher组件 -->
<ImageSwitcher android:id="@+id/switcher"
 android:layout_width="320dp"
 android:layout_height="320dp"
 android:layout_gravity="center_horizontal"
 /> 
</LinearLayout>

        上面的界面布局文件中只是简单地定义了一个GridView、一个ImageSwitcher。定义 GridView时指定了 android:numColumns=n4",这意味着该网格包含4列。那么该GridView包含多少行呢?这是动态改变的就是一个ListView到底包含多少行是由该ListView对应的Adapter所决定的;GridView到底包含多少行也是由Adapter决定的。
下面是主程序代码。
程序清单:codes\02\2.4\GridViewTest\src\org\crazyit\gridview\GridViewTest.java

package org.crazyit.gridview;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Gallery.LayoutParams;
import android.widget.ViewSwitcher.ViewFactory;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
public class GridViewTest extends Activity
{
 private static final String TAG = "==CrazyIt.org==";
 int[] imageIds = new int[]
 {
  R.drawable.bomb5 , R.drawable.bomb6 , R.drawable.bomb7 
  , R.drawable.bomb8 , R.drawable.bomb9 , R.drawable.bomb10
  , R.drawable.bomb11 , R.drawable.bomb12, R.drawable.bomb13
  , R.drawable.bomb14 , R.drawable.bomb15 , R.drawable.bomb16
 };
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.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);
  }
  //获取显示图片的ImageSwitcher
  final ImageSwitcher switcher = (ImageSwitcher)
   findViewById(R.id.switcher);
  //设置图片更换的动画效果
  switcher.setInAnimation(AnimationUtils.loadAnimation(this,
   android.R.anim.fade_in));
  switcher.setOutAnimation(AnimationUtils.loadAnimation(this,
   android.R.anim.fade_out));
  //为ImageSwitcher设置图片切换的动画效果
  switcher.setFactory(new ViewFactory()
  {
   @Override
   public View makeView()
   {
    ImageView imageView = new ImageView(GridViewTest.this);
    imageView.setBackgroundColor(0xff0000);
    imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
    imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    return imageView;
   }
  });  
  //创建一个SimpleAdapter
  SimpleAdapter simpleAdapter = new SimpleAdapter(this
   , listItems 
   //使用/layout/cell.xml文件作为界面布局
   , R.layout.cell
   , new String[]{"image"}
   , new int[]{R.id.image1});
  GridView grid = (GridView)findViewById(R.id.grid01);
  //为GridView设置Adapter
  grid.setAdapter(simpleAdapter);
  //添加列表项被选中的监听器
  grid.setOnItemSelectedListener(new OnItemSelectedListener()
  {
   @Override
   public void onItemSelected(AdapterView<?> parent, View view, 
    int position , long id)
   {
    //显示当前被选中的图片
    switcher.setImageResource(imageIds[position % imageIds.length]);
   }
   @Override
   public void onNothingSelected(AdapterView<?> parent){}   
  });
  //添加列表项被单击的监听器
  grid.setOnItemClickListener(new OnItemClickListener()
  {
   @Override
   public void onItemClick(AdapterView<?> parent
    , View view, int position, long id)
   {
    //显示被单击的图片的图片
    switcher.setImageResource(imageIds[position % imageIds.length]);
   }
  });
 }
}


上面的程序同样使用了 Simp丨eAdapter对象作为GridView 的内容适配器,这个SimpleAdaptei•底层保证了一个长度为16 的List集合——这意味着该GridView —共需要显示16个组件; GridView总共有4列,因此该GridView —共包含4行。
上面的粗体字代码创建SimpleAdapter时指定使用 R.layout.cell作为界面布局,因此还需要在/res/layout目录下定 义一个celUml界面布局文件。该文件中只包含一个简单的 ImageView组件,此处不再给出该界面布局的代码。
运行上面的程序将可以看到程序界面上方显示了 16个图 片预览(由GridView提供支持),单击任何一张图片预览,下面的ImageSwitcher将会显示对应的图片,如图2.45所示。


原文地址:http://www.itmmd.com/201501/426.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

Android 5.0棒棒糖和4.4 KitKat忽略我的WiFi网络,enableNetwork()是无用的   上一篇
下一篇   Eclipse 开发android app : Edit text not showing on Graphical layout
精彩回复
我要追加问题,请求站长解决!
姓名:       

《程序员app》专门为程序员量身定做!