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应用程序-- 您将使用Android Studio创建一个Android应用程序,并将其命名为Demo,位于com.jc2182.demo包下,如Hello World示例一章中所述。
- 修改res/layout/activity_main.xml文件的默认内容,以包含具有自说明属性的GridView内容。
- 让我们在res/drawable-hdpi文件夹中放几张图片。我已经放置了sample0.jpg,sample1.jpg,sample2.jpg,sample3.jpg,sample4.jpg,sample5.jpg,sample6.jpg和sample7.jpg。
- 在com.jc2182.helloworld包下创建一个名为ImageAdapter的新类,此类扩展BaseAdapter类。此类将实现用于填充视图的适配器的功能。
- 运行该应用程序以启动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文件中定义该活动,定义相关的布局,最后在主活动中将其与主活动链接活动类。因此,让我们按照步骤修改上面的示例-- 您将使用Android Studio IDE创建一个Android应用程序,并将其命名为HelloWorld,位于com.jc2182.helloworld包下,如“Hello World示例”一章中所述。
- 在包com.jc2182.helloworld下创建一个名为SingleViewActivity.java的新Activity类,如下所示。
- 在res/layout/文件夹下为新活动创建新的布局文件。让我们将此XML文件命名为single_view.xml。
- 使用<activity ... />标签在AndroidManifest.xml文件中定义您的新活动。一个应用程序可以具有一个或多个活动,而没有任何限制。
- 运行该应用程序以启动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上并启动它,如果设置和应用程序一切正常,它将显示在“模拟器”窗口下面-现在,如果您单击其中任一图像,它将显示为单个图像,例如-