(안드로이드) 39 - 그리드뷰(GridView)

그리드뷰는 데이터를 테이블형태로 보여주는 선택 위젯이다. 사실 휴대용 디바이스의 화면 구조와 크기상 리스트뷰에 비하면 사용성은 떨어지지만 사진을 격자 형태로 보여줄때와 같은 특수한 경우에 사용할 필요가 있으므로 알아두는 것이 좋다.

그리드뷰는 어댑터 패턴을 사용하며 getView() 메소드로 뷰를 화면에 뿌려주는 점 등등 사용 방법이 리스트뷰와 거의 비슷하다. 다만 행과 열이 있는 2차원 형태의 데이터 출력 화면을 만드는 점이 다를 뿐이다. XML 레이아웃에서 <GridView\> 태그를 사용해 추가할 수 있으며 numColumns 속성을 사용해서 열의 수를 지정한다.

그리드뷰를 사용할 때도 리스트뷰와 마찬가지의 코딩 패턴을 가진다.

1. 각 아이템을 보여줄 레이아웃 정의하기 -> person_item.xml + PersonItemView.java
2. 실제 데이터를 위한 클래스 정의하기 -> PersonItem.java
3. 어댑터 클래스 정의 -> PersonAdapter 클래스 정의
4. 어댑터에 데이터를 추가하고 리스트뷰에 어댑터를 설정

자세한 내용은 [37.리스트뷰(ListView)]와 동일하므로 코드를 작성하고 앱의 실행화면만 확인하겠다.

<person_item.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:paddingHorizontal="10dp"
    android:background="#ffffffff"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/panho"/>

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

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:textSize="22dp"
            android:textStyle="bold"
            android:textColor="#ff5805" />


        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="New Text"
            android:textSize="14dp"
            android:textColor="#0223e0"
            android:layout_marginTop="10dp"/>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="New Text"
            android:textSize="20dp"
            android:textColor="#4902d6"
            android:layout_marginTop="20dp"/>

    </LinearLayout>

</LinearLayout>

<PersonItemView.java\>

package io.swnomad.gridview;

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

public class PersonItemView extends LinearLayout {

    TextView textView1;
    TextView textView2;
    TextView textView3;
    ImageView imageView;

    public PersonItemView(Context context){
        super(context);
        init(context);
    }

    public PersonItemView(Context context, AttributeSet attrs){
        super(context, attrs);
        init(context);
    }

    public void init(Context context){

        /* 아이템 보여줄 뷰를 객체로 인플레이션 */
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.person_item, this, true);

        textView1 = findViewById(R.id.textView1);
        textView2 = findViewById(R.id.textView2);
        textView3 = findViewById(R.id.textView3);
        imageView = findViewById(R.id.imageView);
    }

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

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

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

    public void setAge(int age){
        textView3.setText(String.valueOf(age));
    }
}

<PersonItem.java\>

package io.swnomad.gridview;

public class PersonItem {
    String name;
    String mobile;
    int age;
    int resId;

    public PersonItem(String name, String mobile, int age, int resId){
        this.name =  name;
        this.mobile = mobile;
        this.age = age;
        this.resId = resId;
    }

    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 getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public int getResId() {
        return resId;
    }

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

<MainActivity.java\>

package io.swnomad.gridview;

import android.support.v7.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.ListView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    GridView gridView;
    PersonAdapter adapter;

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

        adapter = new PersonAdapter(); //어댑터 객체 생성
        /* 어댑터에 데이터 추가 */
        adapter.addItem(new PersonItem("김판호", "123-1234-1234", 30, R.drawable.panho));
        adapter.addItem(new PersonItem("최형배", "321-3211-3211", 30, R.drawable.hangebae));
        adapter.addItem(new PersonItem("최익현", "567-5675-5676", 50, R.drawable.ikhyeon));

        gridView = findViewById(R.id.gridView);
        gridView.setAdapter(adapter); //리스트뷰에 어댑터 적용

        /* 리스트의 아이템 클릭 이벤트 리스너 객체 설정 */
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                PersonItem item = (PersonItem) adapter.getItem(position);
                Toast.makeText(getApplicationContext(), item.getName(), Toast.LENGTH_LONG).show();
            }
        });
    }

    /* BaseAdapter 클래스 상속받아 SingerAdapter 클래스 정의 */
    class PersonAdapter extends BaseAdapter {
        ArrayList<PersonItem> items = new ArrayList<>(); //SingerItem 객체를 저장할 ArrayList 객체 생성

        @Override
        public int getCount() { //데이터의 갯수 리턴
            return items.size();
        }

        public void addItem(PersonItem item){ //ArrayList에 새로운 SingerItem 객체 추가하는 메소드
            items.add(item);
        }

        public Object getItem(int position){ // index를 통해 ArrayList의 SingerItem 객체 반환
            return items.get(position);
        }

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

        /* getView() 메소드는 어댑터에 데이터를 설정하고 뷰를 구성하여 리턴해주는 메소드이다. */
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            PersonItemView view = new PersonItemView(getApplicationContext()); //뷰 객체 생성
            PersonItem item = items.get(position); //뷰에 적용할 데이터 가져오기

            /* 뷰에 데이터 설정 */
            view.setName(item.getName());
            view.setAge(item.getAge());
            view.setMobile(item.getMobile());
            view.setImage(item.getResId());

            return view; //뷰를 리턴
        }
    }
}