Android 网格视图(GridView)

  • Android 网格视图

    Android GridView在二维滚动网格(行和列)中显示项目,并且网格项目不一定是预定的,但它们会使用ListAdapter自动插入到布局中
    适配器实际上是UI组件和将数据填充到UI组件中的数据源之间的桥梁。适配器可用于向微调器,列表视图,网格视图等提供数据。
    所述的ListViewGridView的是的子类适配器视图并且它们可以通过它们结合至填充适配器,其从外部源检索数据,并创建一个视图,表示每个数据条目。
  • 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上并启动它,如果设置和应用程序一切正常,它将显示在“模拟器”窗口下面-
    现在,如果您单击其中任一图像,它将显示为单个图像,例如-