Visualização de grade do Android

Android GridView mostra itens na grade de rolagem bidimensional (linhas e colunas) e os itens da grade não são necessariamente predeterminados, mas são inseridos automaticamente no layout usando um ListAdapter

Vista de grade

Um adaptador, na verdade, faz a ponte entre os componentes da UI e a fonte de dados que preenche os dados no componente da UI. O adaptador pode ser usado para fornecer dados como spinner, exibição de lista, exibição em grade, etc.

o ListView e GridView são subclasses de AdapterView e podem ser preenchidos ligando-os a um Adapter, que recupera dados de uma fonte externa e cria uma visualização que representa cada entrada de dados.

Atributos GridView

A seguir estão os atributos importantes específicos para GridView -

Sr. Não	Atributo e descrição
1	android:id Este é o ID que identifica exclusivamente o layout.
2	android:columnWidth Isso especifica a largura fixa de cada coluna. Isso pode ser em px, dp, sp, in ou mm.
3	android:gravity Especifica a gravidade em cada célula. Os valores possíveis são top, bottom, left, right, center, center_vertical, center_horizontal etc.
4	android:horizontalSpacing Define o espaçamento horizontal padrão entre as colunas. Isso pode ser em px, dp, sp, in ou mm.
5	android:numColumns Define quantas colunas mostrar. Pode ser um valor inteiro, como "100" ou auto_fit, o que significa exibir o máximo de colunas possível para preencher o espaço disponível.
6	android:stretchMode Define como as colunas devem se esticar para preencher o espaço vazio disponível, se houver. Deve ser um dos valores - nenhum - o alongamento está desativado. spacingWidth - O espaçamento entre cada coluna é esticado. columnWidth - Cada coluna é esticada igualmente. spacingWidthUniform - O espaçamento entre cada coluna é alongado uniformemente.
7	android:verticalSpacing Define o espaçamento vertical padrão entre as linhas. Isso pode ser em px, dp, sp, in ou mm.

Exemplo

Este exemplo o guiará por etapas simples para mostrar como criar seu próprio aplicativo Android usando GridView. Siga as etapas a seguir para modificar o aplicativo Android que criamos no capítulo de exemplo Hello World -

Degrau	Descrição
1	Você usará o Android Studio IDE para criar um aplicativo Android e nomeá-lo como HelloWorld em um pacote com.example.helloworld conforme explicado no capítulo Exemplo de Hello World .
2	Modifique o conteúdo padrão do arquivo res / layout / activity_main.xml para incluir o conteúdo GridView com os atributos autoexplicativos.
3	Não há necessidade de alterar string.xml, o Android Studio cuida das strings padrão que são colocadas em string.xml
4	Vamos colocar algumas fotos na pasta res / drawable-hdpi . Coloquei sample0.jpg, sample1.jpg, sample2.jpg, sample3.jpg, sample4.jpg, sample5.jpg, sample6.jpg e sample7.jpg.
5	Crie uma nova classe chamada ImageAdaptersob um pacote com.example.helloworld que estende BaseAdapter. Esta classe implementará a funcionalidade de um adaptador a ser usado para preencher a visualização.
6	Execute o aplicativo para iniciar o emulador Android e verifique o resultado das alterações feitas no aplicativo.

A seguir está o conteúdo do arquivo de atividade principal modificado src/com.example.helloworld/MainActivity.java. Este arquivo pode incluir cada um dos métodos fundamentais do ciclo de vida.

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));
   }
}

A seguir estará o conteúdo de res/layout/activity_main.xml arquivo -

<?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"
/>

A seguir estará o conteúdo de res/values/strings.xml para definir duas novas constantes -

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

A seguir estará o conteúdo de src/com.example.helloworld/ImageAdapter.java arquivo -

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
   };
}

Vamos tentar executar nosso modificado Hello World!aplicativo que acabamos de modificar. Suponho que você tenha criado o seuAVDao fazer a configuração do ambiente. Para executar o aplicativo do Android Studio, abra um dos arquivos de atividade do seu projeto e clique no ícone Executar na barra de ferramentas. O Android Studio instala o aplicativo em seu AVD e o inicia e se tudo estiver bem com sua configuração e aplicativo, ele será exibido a seguir a janela do emulador -

Exemplo de subatividade

Vamos estender a funcionalidade do exemplo acima, onde mostraremos a imagem da grade selecionada em tela cheia. Para conseguir isso, precisamos introduzir uma nova atividade. Basta ter em mente que, para qualquer atividade, precisamos realizar todas as etapas como temos para implementar uma classe de atividade, definir essa atividade no arquivo AndroidManifest.xml, definir o layout relacionado e, finalmente, vincular essa subatividade com a atividade principal por ela no principal aula de atividade. Então, vamos seguir as etapas para modificar o exemplo acima -

Degrau	Descrição
1	Você usará o Android Studio IDE para criar um aplicativo Android e nomeá-lo como HelloWorld em um pacote com.example.helloworld conforme explicado no capítulo Exemplo de Hello World .
2	Crie uma nova classe Activity como SingleViewActivity.java em um pacote com.example.helloworld conforme mostrado abaixo.
3	Crie um novo arquivo de layout para a nova atividade em res/layout/pasta. Vamos nomear esse arquivo XML como single_view.xml.
4	Defina sua nova atividade no arquivo AndroidManifest.xml usando a tag <activity ... />. Um aplicativo pode ter uma ou mais atividades sem quaisquer restrições.
5	Execute o aplicativo para iniciar o emulador Android e verifique o resultado das alterações feitas no aplicativo.

A seguir está o conteúdo do arquivo de atividade principal modificado src/com.example.helloworld/MainActivity.java. Este arquivo pode incluir cada um dos métodos fundamentais do ciclo de vida.

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);
         }
      });
   }
}

A seguir estará o conteúdo do novo arquivo de atividade src/com.example.helloworld/SingleViewActivity.java arquivo -

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]);
   }
}

A seguir estará o conteúdo de res/layout/single_view.xml arquivo -

<?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>

A seguir estará o conteúdo de AndroidManifest.xml para definir duas novas constantes -

<?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>

Agora, se você clicar em qualquer uma das imagens, ela será exibida como uma única imagem, por exemplo -

Observe que as imagens mencionadas acima foram retiradas do site oficial do Android.

↰ Previous page