[Android] 안드로이드 : 그리드뷰 사용하기

1. 그리드뷰란?

그리드뷰는 격자 형태로 아이템들이 보이는 위젯입니다.

여러 개의 아이템 중에서 하나를 선택할 수 있는 선택위젯이기 때문에 리스트뷰처럼 어댑터를 사용합니다.

그리드뷰를 만드는 방식은 리스트뷰와 거의 같습니다.

ListView 태그를 GridView로 바꾸고 numColumns라는 이름의 속성 하나만 바꾸면 리스트뷰와 동일한 코드가 사용됩니다.

 

 

2. 그리드뷰 만들기

그리드뷰도 모두 여러 개의 아이템 중에서 하나를 선택하므로 어댑터라는 것을 사용하도록 만들어져 있습니다.

그리드뷰는 리스트뷰와 거의 유사합니다.

어댑터를 사용하는 방식도 같기 때문에 각각의 아이템을 위한 뷰 객체를 정의하는 방식이나 어댑터를 만드는 방식이 동일합니다.

다만 리스트뷰처럼 하나의 칼럼이 아니라 여러 개의 칼럼을 사용할 수 있기 때문에 numColumns 속성을 사용합니다.

<GridView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:numColumns="2" />

 

3. 예제 코드

https://ddaengddaeng.tistory.com/27?category=857868

[Android] 안드로이드 : 리스트뷰(ListView) 만들기

리스트뷰의 코드를 변환 (ListView > GridView & numColumns >=1) 해서 사용

 

(1) activity_main.xml에 gridView 만들기

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="34dp"
        android:layout_marginLeft="34dp"
        android:layout_marginTop="2dp"
        android:text="Button" />

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="56dp"
        android:numColumns="3" />
</RelativeLayout>

 

(2) MainActivity.java에 gridView 호출 + Adapter 만들기

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    SingerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gridView = (GridView) findViewById(R.id.gridView);

        // 어댑터 안에 데이터 담기
        adapter = new SingerAdapter();

        adapter.addItem(new SingerItem("소녀시대", "010-3433-2323", R.drawable.android1));
        adapter.addItem(new SingerItem("소녀시대2", "010-3433-2323", R.drawable.android2));
        adapter.addItem(new SingerItem("소녀시대3", "010-3433-2323", R.drawable.android3));
        adapter.addItem(new SingerItem("소녀시대4", "010-3433-2323", R.drawable.android4));
        adapter.addItem(new SingerItem("소녀시대5", "010-3433-2323", R.drawable.android5));
        adapter.addItem(new SingerItem("소녀시대6", "010-3433-2323", R.drawable.android6));

        // 리스트 뷰에 어댑터 설정
        gridView.setAdapter(adapter);

        // 이벤트 처리 리스너 설정
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                SingerItem item = (SingerItem) adapter.getItem(position);
                Toast.makeText(getApplicationContext(), "선택 :"+item.getName(), Toast.LENGTH_LONG).show();
            }
        });
    }

    class SingerAdapter extends BaseAdapter {
        ArrayList<SingerItem> items = new ArrayList<SingerItem>();


        // Generate > implement methods
        @Override
        public int getCount() {
            return items.size();
        }

        public void addItem(SingerItem item) {
            items.add(item);
        }

        @Override
        public Object getItem(int position) {
            return items.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }


        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // 뷰 객체 재사용
            SingerItemView view = null;
            if (convertView == null) {
                view = new SingerItemView(getApplicationContext());
            } else {
                view = (SingerItemView) convertView;
            }

            SingerItem item = items.get(position);

            view.setName(item.getName());
            view.setMobile(item.getMobile());
            view.setImage(item.getResId());


            return view;
        }
    }
}

 

(3) SingerItem.java 만들기 : 아이템에 넣을 속성 정의하기

// 걸그룹 데이터 담기
public class SingerItem {
    String name;
    String mobile;
    int resId;

    // Generate > Constructor
    public SingerItem(String name, String mobile, int resId) {
        this.name = name;
        this.mobile = mobile;
        this.resId = resId;
    }

    // Generate > Getter and Setter
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMobile() {
        return mobile;
    }

    public void setMobile(String mobile) {
        this.mobile = mobile;
    }

    public int getResId() {
        return resId;
    }

    public void setResId(int resId) {
        this.resId = resId;
    }

    // Generate > toString() : 아이템을 문자열로 출력

    @Override
    public String toString() {
        return "SingerItem{" +
                "name='" + name + '\'' +
                ", mobile='" + mobile + '\'' +
                '}';
    }
}

 

(4) singer_item.xml 만들기 : 아이템을 위한 뷰 정의하기 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@mipmap/ic_launcher"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="10dp">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이름"
            android:textSize="30sp"
            android:textColor="@color/colorPrimaryDark"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="전화번호"
            android:textSize="24sp"
            android:textColor="@android:color/holo_orange_dark"/>

    </LinearLayout>

</LinearLayout>

 

(5) singerItemView.java 만들기 : 아이템을 위한 뷰 정의하기

(뷰는 xml 파일 1개 + java 파일 1개)

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.Nullable;

public class SingerItemView extends LinearLayout {

    TextView textView;
    TextView textView2;
    ImageView imageView;

    // Generate > Constructor

    public SingerItemView(Context context) {
        super(context);

        init(context);
    }

    public SingerItemView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        init(context);
    }

    // singer_item.xml을 inflation
    private void init(Context context) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.singer_item, this, true);

        textView = (TextView) findViewById(R.id.textView);
        textView2 = (TextView) findViewById(R.id.textView2);
        imageView = (ImageView) findViewById(R.id.imageView);
    }

    public void setName(String name) {
        textView.setText(name);
    }

    public void setMobile(String mobile) {
        textView2.setText(mobile);
    }

    public void setImage(int resId) {
        imageView.setImageResource(resId);
    }

}