Android学习6——GridView

最新推荐文章于 2024-08-10 14:51:31 发布

r3zhaozhongwu

最新推荐文章于 2024-08-10 14:51:31 发布

阅读量653

点赞数

文章标签： android layout encoding string object class

Android 中GridView上面图片下面文字的例子

网上的两个小例子：

gridview.xml

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>

2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"

3. android:id="@+id/gridview"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent"

6. android:numColumns="auto_fit"

7. android:verticalSpacing="10dp"

8. android:horizontalSpacing="10dp"

9. android:columnWidth="90dp"

10. android:stretchMode="columnWidth"

11. android:gravity="center"

12. />

item.xml

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>

2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

3. android:layout_height="wrap_content"

4. android:layout_width="fill_parent"

5. android:paddingBottom="4dip"

6. >

7. <ImageView

8. android:id="@+id/ItemImage"

9. android:layout_height="wrap_content"

10. android:layout_width="wrap_content"

11. android:layout_centerHorizontal="true"

12. />

13. <TextView

14. android:id="@+id/ItemText"

15. android:layout_width="wrap_content"

16. android:layout_below="@+id/ItemImage"

17. android:layout_height="wrap_content"

18. android:layout_centerHorizontal="true"

19. android:text="TextView01"

20. />

21. </RelativeLayout>

activity

Java代码

1. package com.test;

3. import java.util.ArrayList;

4. import java.util.HashMap;

6. import android.app.Activity;

7. import android.os.Bundle;

8. import android.view.View;

9. import android.widget.AdapterView;

10. import android.widget.AdapterView.OnItemClickListener;

11. import android.widget.GridView;

12. import android.widget.SimpleAdapter;

13.

14. public class TestGridView extends Activity {

15. private GridView gridview;

16.

17. public void onCreate(Bundle savedInstanceState) {

18. super.onCreate(savedInstanceState);

19. setContentView(R.layout.gridview);

20.

21. gridview = (GridView) findViewById(R.id.gridview);

22.

23. // 生成动态数组，并且转入数据

24. ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();

25. for (int i = 0; i < 10; i++) {

26. HashMap<String, Object> map = new HashMap<String, Object>();

27. map.put("ItemImage", R.drawable.icon);// 添加图像资源的ID

28. map.put("ItemText", "NO." + String.valueOf(i));// 按序号做ItemText

29. lstImageItem.add(map);

30. }

31. // 生成适配器的ImageItem <====> 动态数组的元素，两者一一对应

32. SimpleAdapter saImageItems = new SimpleAdapter(this, // 没什么解释

33. lstImageItem,// 数据来源

34. R.layout.item,// night_item的XML实现

35. // 动态数组与ImageItem对应的子项

36. new String[] { "ItemImage", "ItemText" },

37. // ImageItem的XML文件里面的一个ImageView,两个TextView ID

38. new int[] { R.id.ItemImage, R.id.ItemText });

39. // 添加并且显示

40. gridview.setAdapter(saImageItems);

41. // 添加消息处理

42. gridview.setOnItemClickListener(new ItemClickListener());

43. }

44.

45. // 当AdapterView被单击(触摸屏或者键盘)，则返回的Item单击事件

46. class ItemClickListener implements OnItemClickListener {

47. public void onItemClick(AdapterView<?> arg0,// The AdapterView where the click happened

48. View arg1,// The view within the AdapterView that was clicked

49. int arg2,// The position of the view in the adapter

50. long arg3// The row id of the item that was clicked

51. ) {

52. // 在本例中arg2=arg3

53. @SuppressWarnings("unchecked")

54. HashMap<String, Object> item = (HashMap<String, Object>) arg0.getItemAtPosition(arg2);

55. // 显示所选Item的ItemText

56. setTitle((String) item.get("ItemText"));

57. }

58. }

59. }

1. <GridView

2. xmlns:android="http://schemas.android.com/apk/res/android"

3. android:id="@+id/gridview"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent"

6. android:columnWidth="90dp"

7. android:numColumns="auto_fit"

8. android:verticalSpacing="10dp"

9. android:horizontalSpacing="10dp"

10. android:stretchMode="columnWidth"

11. android:gravity="center">

12.

13. </GridView>

复制代码

gridView的子视图,也就是每一个网格的内容页面布局

1. <RelativeLayout

2. xmlns:android="http://schemas.android.com/apk/res/android"

3. android:id="@+id/relaGrid"

4. android:orientation="vertical"

5. android:layout_width="match_parent"

6. android:layout_height="match_parent">

7. <ImageViewandroid:id="@+id/chooseImage"

8. android:src="@drawable/ph1"

9. android:layout_width="85dp"

10. android:layout_height="85dp"

11. >

12. </ImageView>

13. <TextViewandroid:id="@+id/chooseText"

14. android:layout_height="wrap_content"

15. android:layout_width="85dp"

16. android:text="TextView"

17. android:layout_below="@+id/chooseImage"

18. android:gravity="center"

19. android:singleLine="true"

20. android:ellipsize="marquee"

21. android:marqueeRepeatLimit="marquee_forever"

22. ></TextView>

23.

24. </RelativeLayout>

复制代码

然后在res/drawable 放入9张图片资源
Activity页面代码

1. public class WidgetActivity extends Activity {

3. OnItemClickListener ocl_gridview = null;

5. @Override

6. public void onCreate(Bundle savedInstanceState) {

7. super.onCreate(savedInstanceState);

8. setContentView(R.layout.main);

9. setTitle("九宫格布局");

10.

11. GridView gridview = (GridView) findViewById(R.id.gridview);

12. gridview.setAdapter(new ImageAdapter(this));

13.

14. gridview.setOnItemClickListener(ocl_gridview);

15. }

16.

17. public voidbindListener() {

18. ocl_gridview = new OnItemClickListener() {

19. public void onItemClick(AdapterView<?> parent, View v,int position, long id) {

20.

21. }

22. };

23. }

24. }

复制代码

继承BaseAdapter的ImageAdapter类代码

1. public class ImageAdapter extends BaseAdapter{

2. private Context mContext;

4. public ImageAdapter(Context c) {

5. mContext = c;

6. }

7. @Override

8. public int getCount() {

9. // TODO Auto-generatedmethod stub

10. return mThumbIds.length;

11. }

12.

13. @Override

14. publicView getView(int position, View convertView, ViewGroup arg2) {

15. View view = View.inflate(mContext, R.layout.relagrid,null);

16. RelativeLayout rl = (RelativeLayout)view.findViewById(R.id.relaGrid);

17.

18. ImageView image = (ImageView)rl.findViewById(R.id.chooseImage);

19. TextView text = (TextView)rl.findViewById(R.id.chooseText);

20.

21. image.setImageResource(mThumbIds[position]);

22. text.setText(mTextValues[position]);

23.

24. return rl;

25. }

26.

27. //references to our images

28. private Integer[]mThumbIds = {

29. R.drawable.ph1,R.drawable.ph2,R.drawable.ph3,

30. R.drawable.ph4,R.drawable.ph5,R.drawable.ph6,

31. R.drawable.ph7,R.drawable.ph8,R.drawable.ph9

32. };

33.

34. private String[]mTextValues = {

35. "Button","TextView","EditText",

36. "CheckBox","Radio","Spinner",

37. "","",""

38. };

39. }

下面的讲解更具体一点：有关gridview的使用和属性很不错

GridView(网格视图)是按照行列的方式来显示内容的，一般用于显示图片，图片等内容，比如实现九宫格图，用GridView是首选，也是最简单的。主要用于设置Adapter。
GridView常用的XML属性：

属性名称	描述
android:columnWidth	设置列的宽度。
android:gravity	设置此组件中的内容在组件中的位置。可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多选，用“\|”分开。
android:horizontalSpacing	两列之间的间距。
android:numColumns	设置列数。
android:stretchMode	缩放模式。
android:verticalSpacing	两行之间的间距。

下面有三个例子，第一个是只显示图片的，第二个是显示图片文字的(这里的图片是Android系统自带的图片)，第三个是显示自定义的图片文字。前面两个例子的实现都不是很难，第三个例子的实现有些复杂，学习GridView的时候，就想着能不能自定义自己喜欢的图片加上文字，在网上找些资料，一般都是第二个例子的形式的，最后在视频学习上找到了能实现自定义自己的图片的例子。自己就照着例子去学习，修改成了第三个例子。
第一个例子：
MainActivity.java
package com.android.gridview.activity;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        GridView gv =(GridView)findViewById(R.id.GridView1);
        //为GridView设置适配器
        gv.setAdapter(newMyAdapter(this));
        //注册监听事件
        gv.setOnItemClickListener(newOnItemClickListener()
        {
            public voidonItemClick(AdapterView<?> parent, View v, int position, long id)
            {
               Toast.makeText(MainActivity.this, "pic" + position,Toast.LENGTH_SHORT).show();
            }
        });
    }
}
    //自定义适配器
    class MyAdapter extends BaseAdapter{
        //上下文对象
        private Context context;
        //图片数组
        private Integer[] imgs = {
               R.drawable.pic0, R.drawable.pic1, R.drawable.pic2,
               R.drawable.pic3, R.drawable.pic4,R.drawable.pic5,
               R.drawable.pic6, R.drawable.pic7, R.drawable.pic8,
               R.drawable.pic0, R.drawable.pic1, R.drawable.pic2,
               R.drawable.pic3, R.drawable.pic4, R.drawable.pic5,
               R.drawable.pic6, R.drawable.pic7, R.drawable.pic8,
        };
        MyAdapter(Context context){
            this.context= context;
        }
        public int getCount() {
            returnimgs.length;
        }

        public Object getItem(int item){
            returnitem;
        }

        public long getItemId(int id){
            returnid;
        }

        //创建View方法
        public View getView(int position,View convertView, ViewGroup parent) {
            ImageView imageView;
               if (convertView == null) {
                   imageView = new ImageView(context);
                   imageView.setLayoutParams(new GridView.LayoutParams(75, 75));//设置ImageView对象布局
                   imageView.setAdjustViewBounds(false);//设置边界对齐
                   imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);//设置刻度的类型
                   imageView.setPadding(8, 8, 8, 8);//设置间距
               }
               else {
                   imageView = (ImageView) convertView;
               }
               imageView.setImageResource(imgs[position]);//为ImageView设置图片资源
               return imageView;
        }
}


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"
    >
    <GridView
       android:id="@+id/GridView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        android:columnWidth="90dp"
        android:numColumns="3"
       android:verticalSpacing="10dp"
       android:horizontalSpacing="10dp"
       android:stretchMode="columnWidth"
       android:gravity="center"
        />
</LinearLayout>
效果图：

第二个例子：
MainActivity.java
package com.android.gridview2.activity;

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.widget.GridView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {

       private GridView gv;
       @Override
       protected void onCreate(BundlesavedInstanceState) {
          // TODO Auto-generatedmethod stub
         super.onCreate(savedInstanceState);
         setContentView(R.layout.gridview);

          //准备要添加的数据条目
          List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
          for (int i = 0; i <9; i++) {
           Map<String, Object> item = new HashMap<String, Object>();
           item.put("imageItem", R.drawable.icon);//添加图像资源的ID
           item.put("textItem", "icon" + i);//按序号添加ItemText
           items.add(item);
          }

         //实例化一个适配器
          SimpleAdapter adapter =new SimpleAdapter(this,
                                                     items,
                                                     R.layout.grid_item,
                                                     new String[]{"imageItem", "textItem"},
                                                     new int[]{R.id.image_item, R.id.text_item});

          //获得GridView实例
          gv =(GridView)findViewById(R.id.mygridview);
          //为GridView设置适配器
         gv.setAdapter(adapter);

       }
}

gridview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   >
   <GridView
      android:id="@+id/mygridview"
      android:numColumns="3"
      android:gravity="center_horizontal"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:stretchMode="columnWidth"
      />
</LinearLayout>

grid_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/RelativeLayout1"
   android:layout_width="wrap_content"
   android:layout_height="fill_parent"
   android:paddingBottom="6dip"
   >
   <ImageView
      android:id="@+id/image_item"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      />
   <TextView
      android:id="@+id/text_item"
      android:layout_below="@+id/image_item"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
     android:layout_centerHorizontal="true"
      />
</RelativeLayout>

效果图：

第三个例子：
MainActivity.java
package com.android.gridview3;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity
{
    private GridView gridView;
    //图片的文字标题
    private String[] titles = new String[]
    { "pic1", "pic2", "pic3","pic4", "pic5", "pic6", "pic7","pic8", "pic9"};
    //图片ID数组
    private int[] images = newint[]{
           R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
            R.drawable.pic4,R.drawable.pic5, R.drawable.pic6,
           R.drawable.pic7, R.drawable.pic8,R.drawable.pic9
    };

    @Override
    public void onCreate(Bundle savedInstanceState){
       super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        gridView = (GridView)findViewById(R.id.gridview);
        PictureAdapter adapter = newPictureAdapter(titles, images, this);
        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(newOnItemClickListener()
            {
               public void onItemClick(AdapterView<?> parent, View v, int position, longid)
               {
                   Toast.makeText(MainActivity.this, "pic" + (position+1),Toast.LENGTH_SHORT).show();
               }
            });
    }
}
//自定义适配器
class PictureAdapter extends BaseAdapter{
    private LayoutInflater inflater;
    private List<Picture> pictures;

    public PictureAdapter(String[] titles, int[] images, Contextcontext)
    {
        super();
        pictures = newArrayList<Picture>();
        inflater =LayoutInflater.from(context);
        for (int i = 0; i <images.length; i++)
        {
            Picturepicture = new Picture(titles[i], images[i]);
           pictures.add(picture);
        }
    }

    @Override
    public int getCount()
    {
        if (null != pictures)
        {
            returnpictures.size();
        } else
        {
            return0;
        }
    }

    @Override
    public Object getItem(int position)
    {
        return pictures.get(position);
    }

    @Override
    public long getItemId(int position)
    {
        return position;
    }

    @Override
    public View getView(int position, View convertView,ViewGroup parent)
    {
        ViewHolder viewHolder;
        if (convertView == null)
        {
            convertView= inflater.inflate(R.layout.picture_item, null);
            viewHolder =new ViewHolder();
           viewHolder.title = (TextView) convertView.findViewById(R.id.title);
           viewHolder.image = (ImageView) convertView.findViewById(R.id.image);
           convertView.setTag(viewHolder);
        } else
        {
            viewHolder =(ViewHolder) convertView.getTag();
        }
       viewHolder.title.setText(pictures.get(position).getTitle());
       viewHolder.image.setImageResource(pictures.get(position).getImageId());
        return convertView;
    }

}

class ViewHolder
{
    public TextView title;
    public ImageView image;
}

class Picture
{
    private String title;
    private int imageId;

    public Picture()
    {
        super();
    }

    public Picture(String title, int imageId)
    {
        super();
        this.title = title;
        this.imageId = imageId;
    }

    public String getTitle()
    {
        return title;
    }

    public void setTitle(String title)
    {
        this.title = title;
    }

    public int getImageId()
    {
        return imageId;
    }

    public void setImageId(int imageId)
    {
        this.imageId = imageId;
    }
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    />
picture_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    >
    <ImageView
        android:id="@+id/image"
       android:layout_width="100dp"
       android:layout_height="150dp"
       android:layout_gravity="center"
        android:scaleType="fitXY"
        android:padding="4dp"
       />
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:gravity="center_horizontal"
        />
</LinearLayout>
效果图：

本文出自 “IT的点点滴滴” 博客

r3zhaozhongwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android学习6——GridView

Android 中GridView上面图片下面文字的例子网上的两个小例子： gridview.xml Xml代码 1. version="1.0" encoding="utf-8"?> 2. xmlns:android="http://schemas.android.com/apk/res/android" 3.
复制链接

扫一扫