안드로이드 GridView 레이아웃이란?
GridView는 안드로이드에서 항목들을 격자(그리드) 형태의 2차원 스크롤 목록으로 표시할 수 있는 강력한 위젯입니다. 갤러리 앱, 이모지 선택기, 카테고리 메뉴 등 다양한 화면에서 활용되며, 이미지와 텍스트를 조합한 아이템을 깔끔하게 배치할 수 있습니다.
이 글에서는 안드로이드 스튜디오에서 GridView를 사용해 숫자 이미지와 텍스트를 2열 그리드로 보여주는 예제 앱을 처음부터 끝까지 만들어 보겠습니다.
1단계: 새 프로젝트 생성
Android Studio를 실행하고 File ⇒ New Project로 이동한 후, 새 프로젝트를 생성하는 데 필요한 모든 세부 정보를 입력합니다. Empty Activity 템플릿을 선택하면 이 예제를 따라 하기에 가장 좋습니다.
2단계: activity_main.xml에 GridView 추가
res/layout/activity_main.xml 파일에 아래 코드를 추가하여 화면 전체를 차지하는 GridView를 배치합니다. numColumns 속성을 2로 설정해 한 줄에 두 개의 항목이 표시되도록 합니다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<GridView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"/>
</RelativeLayout>3단계: build.gradle에 의존성 추가
build.gradle(Module: app) 파일을 열고 아래 의존성을 추가합니다.
implementation 'com.android.support:gridlayout-v7:28.0.0'
4단계: MainActivity.java 작성
src/MainActivity.java에 다음 코드를 추가합니다. 여기서는 10개의 숫자 문자열과 대응하는 이미지 리소스 배열을 준비하고, 커스텀 어댑터를 통해 GridView에 연결합니다. 또한 항목을 클릭했을 때 어떤 항목이 선택되었는지 Toast 메시지로 알려줍니다.
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
GridView gridView;
String[] numberInWords = {"One","Two","Three","Four","Five","Six","Seven","Eight","Nine","Ten"};
int[] numberImage = {R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four,
R.drawable.five,R.drawable.six,R.drawable.seven,R.drawable.eight,R.drawable.nine,
R.drawable.ten};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView = findViewById(R.id.gridView);
MainAdapter mainAdapter = new MainAdapter(MainActivity.this, numberInWords,numberImage);
gridView.setAdapter(mainAdapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(getApplicationContext(), "You CLicked " + numberInWords[+position],
Toast.LENGTH_SHORT).show();
}
});
}
}참고: R.drawable.oneR.drawable.ten에 해당하는 이미지 파일(res/drawable 폴더)이 프로젝트에 미리 준비되어 있어야 합니다.
5단계: 커스텀 어댑터(MainAdapter.java) 작성
GridView에는 데이터와 뷰를 연결해 주는 어댑터가 필요합니다. MainAdapter.java 파일을 생성하고 아래 코드를 추가합니다. BaseAdapter를 상속받아 각 그리드 셀에 ImageView와 TextView를 바인딩합니다.
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
class MainAdapter extends BaseAdapter {
private Context context;
private LayoutInflater layoutInflater;
private String[] numbersInWords;
private int[] numberImage;
private ImageView imageView;
private TextView textView;
public MainAdapter(Context c, String[] numbersInWords,int[] numberImage){
context = c;
this.numberImage = numberImage;
this.numbersInWords = numbersInWords;
}
@Override
public int getCount() {
return numbersInWords.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (layoutInflater==null) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
if (convertView==null){
convertView = layoutInflater.inflate(R.layout.rowitem, null);
}
imageView = convertView.findViewById(R.id.imageView);
textView = convertView.findViewById(R.id.textView);
imageView.setImageResource(numberImage[position]);
textView.setText(numbersInWords[position]);
return convertView;
}
}6단계: 개별 항목 레이아웃(rowitem.xml) 생성
새 레이아웃 리소스 파일(rowitem)을 만들고 아래 코드를 추가합니다. 이 레이아웃은 그리드의 각 셀이 어떻게 보일지를 정의하며, 세로 방향 LinearLayout 안에 이미지와 텍스트가 중앙 정렬로 배치됩니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="24sp"
android:gravity="center">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="@+id/imageView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:text="Numbers"
android:textSize="24sp"
android:layout_marginTop="8dp" />
</LinearLayout>7단계: AndroidManifest.xml 확인 및 설정
androidManifest.xml에 아래 코드가 올바르게 등록되어 있는지 확인합니다. MainActivity가 런처(LAUNCHER) 액티비티로 지정되어 있어야 앱 실행 시 해당 화면이 먼저 열립니다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
package="app.com.sample">
<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>
</application>
</manifest>앱 실행 및 결과 확인
이제 애플리케이션을 실행해 볼 차례입니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션 목록에서 본인의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 기본 화면이 표시됩니다.
각 그리드 항목을 탭하면 "You Clicked One", "You Clicked Two"처럼 해당 숫자를 알려주는 Toast 메시지가 나타나는 것을 확인할 수 있습니다. 이제 여러분은 GridView의 기본 구조와 커스텀 어댑터 활용법을 익혔습니다. 이 예제를 확장해 다양한 종류의 그리드 UI를 직접 구현해 보세요!