上一节:
下一节:

  Android 网格视图（GridView）

  • Android 网格视图

    Android GridView在二维滚动网格（行和列）中显示项目，并且网格项目不一定是预定的，但它们会使用ListAdapter自动插入到布局中
    适配器实际上是UI组件和将数据填充到UI组件中的数据源之间的桥梁。适配器可用于向微调器，列表视图，网格视图等提供数据。
    所述的ListView和GridView的是的子类适配器视图并且它们可以通过它们结合至填充适配器，其从外部源检索数据，并创建一个视图，表示每个数据条目。

  • GridView 属性

    以下是GridView的重要属性-
    属性 说明
    android:id 这是唯一标识布局的ID。
    android:columnWidth 这指定每列的固定宽度。 可以是px，dp，sp，in或mm。
    android:gravity 指定每个像元内的重力。 可能的值是top, bottom, left, right, center，center_vertical，center_horizontal等。
    android:horizontalSpacing 定义列之间的默认水平间距。 可以是px，dp，sp，in或mm。
    android:numColumns 定义要显示的列数。 可以是整数值，例如“ 100”或auto_fit，这表示要显示尽可能多的列以填充可用空间。
    android:stretchMode 定义列应如何伸展以填充可用的空白空间（如果有）。 这必须是以下两个值之一：
    • none − 拉伸被禁用。
    • spacingWidth − 每列之间的间距被拉伸。
    • columnWidth − 每列均等地拉伸。
    • spacingWidthUniform − 每列之间的间距均匀地拉伸。
    android:verticalSpacing 定义行之间的默认垂直间距。 可以是px，dp，sp，in或mm。

  • 示例

    本示例将带您完成简单的步骤，以展示如何使用GridView创建自己的Android应用程序。请按照以下步骤修改我们在“Hello World示例”一章中创建的Android应用程序-
    1. 您将使用Android Studio创建一个Android应用程序，并将其命名为Demo，位于com.jc2182.demo包下，如Hello World示例一章中所述。
    2. 修改res/layout/activity_main.xml文件的默认内容，以包含具有自说明属性的GridView内容。
    3. 让我们在res/drawable-hdpi文件夹中放几张图片。我已经放置了sample0.jpg，sample1.jpg，sample2.jpg，sample3.jpg，sample4.jpg，sample5.jpg，sample6.jpg和sample7.jpg。
    4. 在com.jc2182.helloworld包下创建一个名为ImageAdapter的新类,此类扩展BaseAdapter类。此类将实现用于填充视图的适配器的功能。
    5. 运行该应用程序以启动Android模拟器并验证在该应用程序中所做更改的结果。
    以下是修改后的主要活动文件src/com.jc2182.demo/MainActivity.java的内容。该文件可以包括每个基本生命周期方法。 
    
package com.jc2182.demo;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));
    }
}
    以下是res/layout/activity_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="80dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    />
    以下是src/com.jc2182.helloworld/ImageAdapter.java文件的内容- 
    
package com.jc2182.demo;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    // Constructor
    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {

        ImageView imageView;

        if (convertView == null) {
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(250, 250));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        }
        else
        {
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.sample2, R.drawable.sample3,
            R.drawable.sample4, R.drawable.sample5,
            R.drawable.sample6, R.drawable.sample7,
            R.drawable.sample0, R.drawable.sample1,
            R.drawable.sample2, R.drawable.sample3,
            R.drawable.sample4, R.drawable.sample5,
            R.drawable.sample6, R.drawable.sample7,
            R.drawable.sample0, R.drawable.sample1,
            R.drawable.sample2, R.drawable.sample3,
            R.drawable.sample4, R.drawable.sample5,
            R.drawable.sample6, R.drawable.sample7
    };
}
    让我们尝试运行刚刚修改的应用程序。我假设您在进行环境设置时已创建了AVD。要从Android Studio运行该应用，请打开您项目的活动文件之一，然后工具栏中单击“运行”图标。Android studio将应用程序安装在您的AVD上并启动它，如果设置和应用程序一切正常，它将显示在“模拟器”窗口下面-

  • 子活动示例

    让我们扩展上面示例的功能，以全屏显示选定的网格图像。为此，我们需要引入一项新的活动。只要记住任何活动，我们就需要执行所有步骤，例如必须实现一个活动类，在AndroidManifest.xml文件中定义该活动，定义相关的布局，最后在主活动中将其与主活动链接活动类。因此，让我们按照步骤修改上面的示例-
    1. 您将使用Android Studio IDE创建一个Android应用程序，并将其命名为HelloWorld，位于com.jc2182.helloworld包下，如“Hello World示例”一章中所述。
    2. 在包com.jc2182.helloworld下创建一个名为SingleViewActivity.java的新Activity类，如下所示。
    3. 在res/layout/文件夹下为新活动创建新的布局文件。让我们将此XML文件命名为single_view.xml。
    4. 使用<activity ... />标签在AndroidManifest.xml文件中定义您的新活动。一个应用程序可以具有一个或多个活动，而没有任何限制。
    5. 运行该应用程序以启动Android模拟器并验证在该应用程序中所做更改的结果。
    以下是修改后的主要活动文件src/com.jc2182.helloworld/MainActivity.java的内容。该文件可以包括每个基本生命周期方法。 
    
package com.jc2182.demo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));

        gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView parent, View v, int position, long id){
                // Send intent to SingleViewActivity
                Intent i = new Intent(getApplicationContext(), SingleViewActivity.class);
                // Pass image index
                i.putExtra("id", position);
                startActivity(i);
            }
        });
    }
}
    以下是新活动文件src/com.jc2182.helloworld/SingleViewActivity.java文件的内容- 
    
package com.jc2182.demo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class SingleViewActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.single_view);

        // Get intent data
        Intent i = getIntent();

        // Selected image id
        int position = i.getExtras().getInt("id");
        ImageAdapter imageAdapter = new ImageAdapter(this);

        ImageView imageView = (ImageView) findViewById(R.id.SingleView);
        imageView.setImageResource(imageAdapter.mThumbIds[position]);
    }
}
    以下是res/layout/single_view.xml文件的内容- 
    
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView android:id="@+id/SingleView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

</LinearLayout>
    以下是AndroidManifest.xml的内容， 以定义两个activity 
    
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jc2182.demo">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".SingleViewActivity"></activity>
    </application>

</manifest>
    让我们尝试运行修改后的Hello World！我们刚刚修改的应用程序。我假设您在进行环境设置时已创建了AVD。要从Android Studio运行该应用，请打开您项目的活动文件之一，然后Eclipse运行图标从工具栏中单击“运行” 图标。Android studio将应用程序安装在您的AVD上并启动它，如果设置和应用程序一切正常，它将显示在“模拟器”窗口下面-
    现在，如果您单击其中任一图像，它将显示为单个图像，例如-
上一节:
下一节: