Androidグリッドビュー

'_Android GridView は2次元のスクロールグリッド（行と列）にアイテムを表示し、グリッドアイテムは必ずしも事前に決定されているわけではありませんが、 ListAdapter を使用してレイアウトに自動的に挿入されます_

グリッドビュー

'_アダプタは、UIコンポーネントと、データをUIコンポーネントに入力するデータソースとの間を実際に橋渡しします。アダプタを使用して、スピナー、リストビュー、グリッドビューなどにデータを提供できます。_

*ListView* および *GridView* は *AdapterView* のサブクラスであり、それらを *Adapter* にバインドすることで移植できます。 *Adapter* は外部ソースからデータを取得し、各データエントリを表すビューを作成します。

GridViewの属性

以下は、GridViewに固有の重要な属性です-

Sr.No	Attribute & Description
1	android:id これは、レイアウトを一意に識別するIDです。
2	android:columnWidth これは、各列の固定幅を指定します。これは、px、dp、sp、in、またはmmになります。
3	android:gravity 各セル内の重力を指定します。可能な値は、top、bottom、left、right、center、center_vertical、center_horizontalなどです。
4	android:horizontalSpacing 列間のデフォルトの水平方向の間隔を定義します。これは、px、dp、sp、in、またはmmになります。
5	android:numColumns 表示する列の数を定義します。「100」やauto_fitなどの整数値で、使用可能なスペースを埋めるためにできるだけ多くの列を表示することを意味します。
6	android:stretchMode 利用可能な空のスペースがある場合、それを埋めるために列がどのように伸びるかを定義します。これは値のいずれかでなければなりません- none-ストレッチは無効です。 spacingWidth-各列間の間隔が引き伸ばされます。 columnWidth-各列は均等に引き伸ばされます。 *spacingWidthUniform-各列間の間隔は均一に引き伸ばされます。
7	android:verticalSpacing* 行間のデフォルトの垂直方向の間隔を定義します。これは、px、dp、sp、in、またはmmになります。

例

この例では、GridViewを使用して独自のAndroidアプリケーションを作成する方法を示す簡単な手順を紹介します。 _Hello World Example_の章で作成したAndroidアプリケーションを変更するには、次の手順に従います-

Step	Description
1	You will use Android studio IDE to create an Android application and name it as HelloWorld under a package com.example.helloworld as explained in the Hello World Example chapter.
2	Modify the detault content of res/layout/activity_main.xml file to include GridView content with the self explanatory attributes.
3	No need to change string.xml, Android studio takes care of defaults strings which are placed at string.xml
4	Let’s put few pictures in res/drawable-hdpi folder. I have put sample0.jpg, sample1.jpg, sample2.jpg, sample3.jpg, sample4.jpg, sample5.jpg, sample6.jpg and sample7.jpg.
5	Create a new class called ImageAdapter under a package com.example.helloworld that extends BaseAdapter. This class will implement functionality of an adapter to be used to fill the view.
6	Run the application to launch Android emulator and verify the result of the changes done in the application.

以下は、変更されたメインアクティビティファイル src/com.example.helloworld/MainActivity.java の内容です。このファイルには、基本的な各ライフサイクルメソッドを含めることができます。

package com.example.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
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="90dp"
   android:numColumns="auto_fit"
   android:verticalSpacing="10dp"
   android:horizontalSpacing="10dp"
   android:stretchMode="columnWidth"
   android:gravity="center"
/>

以下は、2つの新しい定数を定義する res/values/strings.xml の内容です-

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">HelloWorld</string>
   <string name="action_settings">Settings</string>
</resources>

以下は src/com.example.helloworld/ImageAdapter.java ファイルの内容です-

package com.example.helloworld;

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(85, 85));
         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.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7
   };
}

変更したばかりの* Hello World！アプリケーションを実行してみましょう。環境設定中に *AVD を作成したと思います。 Android Studioからアプリを実行するには、プロジェクトのアクティビティファイルの1つを開き、ツールバーの[画像を実行：/android/images/eclipse_run.jpg [Eclipse Run Icon]アイコンをクリックします。 AndroidスタジオはAVDにアプリをインストールして起動し、セットアップとアプリケーションで問題がなければ、次のエミュレータウィンドウが表示されます-

Android gridView Layout

サブアクティビティの例

選択したグリッド画像をフルスクリーンで表示する上記の例の機能を拡張しましょう。これを実現するには、新しいアクティビティを導入する必要があります。アクティビティクラスを実装し、そのアクティビティをAndroidManifest.xmlファイルで定義し、関連するレイアウトを定義し、最終的にそのサブアクティビティをメインのメインアクティビティにリンクするために必要なすべての手順を実行する必要があるアクティビティを念頭に置いてくださいアクティビティクラス。したがって、上記の例を変更する手順に従ってみましょう-

Step	Description
1	You will use Android studio IDE to create an Android application and name it as HelloWorld under a package com.example.helloworld as explained in the Hello World Example chapter.
2	Create a new Activity class as SingleViewActivity.java under a package com.example.helloworld as shown below.
3	Create new layout file for the new activity under res/layout/ folder. Let’s name this XML file as single_view.xml.
4	Define your new activity in AndroidManifest.xml file using <activity…/> tag. An application can have one or more activities without any restrictions.
5	Run the application to launch Android emulator and verify the result of the changes done in the application.

以下は、変更されたメインアクティビティファイル src/com.example.helloworld/MainActivity.java の内容です。このファイルには、基本的なライフサイクルメソッドのそれぞれを含めることができます。

package com.example.helloworld;

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

import android.view.Menu;
import android.view.View;

import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
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 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.example.helloworld/SingleViewActivity.java ファイルの内容です-

package com.example.helloworld;

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>

以下は、2つの新しい定数を定義する AndroidManifest.xml の内容です-

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.helloworld">

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >

      <activity
         android:name="com.example.helloworld.MainActivity"
         android:label="@string/app_name" >

         <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スタジオからアプリを実行するには、プロジェクトのアクティビティファイルの1つを開き、ツールバーの[画像を実行：/android/images/eclipse_run.jpg [Eclipse Run Icon]アイコンをクリックします。 AndroidスタジオはAVDにアプリをインストールして起動し、セットアップとアプリケーションで問題がなければ、次のエミュレータウィンドウが表示されます-

Android gridView Layout

これで、いずれかの画像をクリックすると、たとえば単一の画像として表示されます-

AndroidシングルGridViewレイアウト

'_上記の画像は、Androidの公式Webサイトからのものです。_

Android-grid-view

Androidグリッドビュー

グリッドビュー

GridViewの属性

例

サブアクティビティの例

目次