GridView显示图片和文字（一）

最新推荐文章于 2024-04-23 17:30:16 发布

原创最新推荐文章于 2024-04-23 17:30:16 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#android #layout #imagelist #string #object #menu

android开发专栏收录该内容

27 篇文章

订阅专栏

本文展示了如何在Android应用中使用GridView组件结合图片和文字进行显示。通过activity_grid_view.xml布局文件、grid.xml子项布局以及strings.xml资源文件的配置，实现了点击图片可以切换的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下，点击图片切换：

在res>layout>activity_grid_view.xml中的代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <GridView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="20dp"
        android:numColumns="3"
        android:verticalSpacing="10dp" >
    </GridView>

    <ImageView
        android:id="@+id/show"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:gravity="center_horizontal"
        />
</LinearLayout>

新建一个xml文件（grid.xml）代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageshow"
        android:layout_width="80dp"
        android:layout_height="50dp" >
    </ImageView>

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageshow" 
        android:gravity="center"
        >
    </TextView>

</RelativeLayout>

在res>values>strings.xml中的代码如下：

<resources>

    <string name="app_name">GridView</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_grid_view">相册</string>

</resources>

主要的Activity中的代码如下：

package com.bzu.gridview.activity;

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.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.support.v4.app.NavUtils;

public class GridViewActivity extends Activity {
    private GridView imageList;
    private ImageView show;
    private int[] pics;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_view);
        imageList=(GridView) this.findViewById(R.id.list);
        show=(ImageView) this.findViewById(R.id.show);
        pics=new int[]{R.drawable.image1,R.drawable.image2,R.drawable.image3,R.drawable.image4,R.drawable.image5,R.drawable.image6};
        List<Map<String, Object>> item=new ArrayList<Map<String,Object>>();
        for(int id:pics){
        	Map<String, Object> items=new HashMap<String, Object>();
        	items.put("pic", id);
        	items.put("name", "张杰");
        	item.add(items);
        }
        SimpleAdapter adapter=new SimpleAdapter(this,item, R.layout.grid, new String[]{"pic","name"}, new int[]{R.id.imageshow,R.id.name});
        imageList.setAdapter(adapter);
        show.setImageResource(pics[0]);
        imageList.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> adapter, View view, int position,
					long id) {
				show.setImageResource(pics[position]);
			}
		});
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_grid_view, menu);
        return true;
    }

    
}