GridView--带预览的图片浏览器

ChatHello

于 2016-12-07 17:23:40 发布

阅读量891

点赞数

分类专栏： Android小Demo手感训练

本文链接：https://blog.csdn.net/ChatHello/article/details/53508315

版权

Android小Demo手感训练专栏收录该内容

11 篇文章

订阅专栏

博客介绍了如何利用GridView创建一个能展示多列图片预览的界面。GridView作为ListView的扩展，允许行列分布显示组件。通过Adapter提供数据，并通过一个单独的ImageView显示图片。示例代码展示了具体实现方式。

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

提起ListView,那是相当熟悉了,提起GridView,那也是不陌生.那就在这里闲的无聊,写来一个GridView来玩玩了.

首先GridView用于在界面上按行,列分布的方式显示多个组件,GridView和Listview有这共同的父类:AbsListView,因此,他们有很高的相似性,当然,他们都是列表项.但他们还是有点区别的,区别就在于:ListView只显示一列,而GridView可以显示多列.从这个角度看,发现ListView是一种特殊的GridView,也就是只有一列的GridView.

与ListView相似,GridView也是需要通过Adapter来提供显示的数据,当然用法是基本一致.

下面就看一下实例吧:在下面的布局文件中只有一个GridView和一个ImageView,GridView以行列的形式来组织所有图片的预览视图,然后程序用一个ImageView来显示图片,如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    >
    <!--定义一个GridView组件-->
    <GridView
        android:id="@+id/gv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="1pt"
        android:verticalSpacing="1pt"
        android:numColumns="2"
        android:gravity="center"/>
    <!--定义一个ImageView组件-->
    <ImageView
        android:id="@+id/iv"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

上面的GridView组件中numColumns属性为2,证明此网格为2列.在此就有疑问了,列可以定义出来了,那么行么,怎么定义,此时就是和ListView一样了,列可以定义,但行就是由其对应的adapter来决定了.

下面就是主程序代码了:

public class MainActivity extends Activity {

    GridView grid;
    ImageView image;
    int[] imageIds = new int[]
            {
                    R.drawable.pica,R.drawable.picb,R.drawable.picc,R.drawable.picd,
                    R.drawable.pice,R.drawable.picf,R.drawable.picg,R.drawable.pich,
                    R.drawable.pici,R.drawable.picj,R.drawable.pick,R.drawable.picl,
                    R.drawable.picm,R.drawable.picn,R.drawable.pico,R.drawable.picp,
                    R.drawable.picq,R.drawable.picr
            };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_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("images",imageIds[i]);
            listItems.add(listItem);
        }
        //获取显示图片的ImageView
        image = (ImageView) findViewById(R.id.iv);
        //创建一个SimpleAdapter
        SimpleAdapter simpleAdapter = new SimpleAdapter(this,listItems
                //使用cell.xml作为界面布局
                ,R.layout.cell,
                new String[]{"image"},new int[]{R.id.image1});
        grid = (GridView) findViewById(R.id.gv);
        //为GrideView设置Adapter
        grid.setAdapter(simpleAdapter);
        //添加列表项被选中的监听器
        grid.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                //显示当前被选中的图片
                image.setImageResource(imageIds[i]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });
        //添加列表项被单机的监听器
        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                //显示被单机的图片
                image.setImageResource(imageIds[i]);
            }
        });
    }
}

可以看到在主程序代码中,使用的SimpleAdapter对象作为GridView的Adapter,如果对这个不懂的可以参考我的博客,专门为simpleAdapter写出一个Demo来讲解它,地址:http://blog.csdn.net/chathello/article/details/53465789

在上面主程序代码中可以看到还有一个布局文件cell.XML,在这里就不呈现了,其实就是一个简单的ImageView组件.

好了,这个效果就作为一个启发放在这里了,以后有需要就可随意借鉴了.