[안드로이드/Android] 그리드뷰(GridView) 만들기

 

그리드뷰(GridView) 란?

 

- 격자 형태로 나열하여 화면에 표시하는 행과 열이 있는 2차원 뷰 그룹(ViewGroup) 의 한 종류

- 리스트뷰(ListView) 와 마찬가지로 그리드뷰(GridView) 와 같은 뷰 그룹(ViewGroup) 은 스크롤 기능을 지원하며 사용자가 배치된 각

항목(Item) 선택 기능이 가능한 선택 위젯

 

 

작성한 파일 목록 입니다.

 

1. AndroidManifest.xml

2. GridViewActivity.java

3. activity_gridview.xml

4. BearItem.java

5. gridview_list_item.xml 

 

 

 

1. AndroidManifest.xml

 

새로 생성한 GridViewActivity 를 application 에 등록해줍니다.

 

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

    <uses-permission android:name="android.permission.INTERNET" />

    <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=".GridViewActivity">
        	<intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

 

 

 

2. GridViewActivity.java

 

그리드뷰(GridView) 를 구현할 GridViewActivity 액티비티를 생성합니다.

 

이 액티비티에서 그리드뷰(GridView) 를 호출하고

BaseAdapter 를 상속한 그리드뷰어댑터 를 구현합니다.

 

그리드뷰(GridView) 에 사용자가 정의한 아이템을 표시하기 위해서는 Adapter 를 사용해야 합니다.

Adapter 는 사용자의 아이템 데이터를 받아 뷰(View) 를 생성해주는 객체 입니다.

 

setAdapter() 를 통해 그리드뷰(GridView) 와 Adapter 를 연결합니다. 

그리드뷰(GridView) 는 Adapter 로부터 생성된 뷰(View) 를 받아 그리드뷰(GridView) 의 항목으로 배치합니다.

 

각 리스트의 선택 이벤트도 같이 구현하였습니다.

 

package com.eun.myapp;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;


public class GridViewActivity extends AppCompatActivity {
    private String TAG = GridViewActivity.class.getSimpleName();

    private GridView gridview = null;
    private GridViewAdapter adapter = null;

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

        gridview = (GridView) findViewById(R.id.gridview);
        adapter = new GridViewAdapter();

        //Adapter 안에 아이템의 정보 담기
        adapter.addItem(new BearItem("1", "파랑이", R.drawable.img_blue));
        adapter.addItem(new BearItem("2", "민트트", R.drawable.img_mint));
        adapter.addItem(new BearItem("3", "하늘이", R.drawable.img_skyblue));
        adapter.addItem(new BearItem("4", "하양이", R.drawable.img_white));
        adapter.addItem(new BearItem("5", "분홍이", R.drawable.img_pink));
        adapter.addItem(new BearItem("6", "노랑이", R.drawable.img_yellow));
        adapter.addItem(new BearItem("7", "보라라", R.drawable.img_purple));
        adapter.addItem(new BearItem("8", "믹스스", R.drawable.img_mix));

        //리스트뷰에 Adapter 설정
        gridview.setAdapter(adapter);

    }


    /* 그리드뷰 어댑터 */
    class GridViewAdapter extends BaseAdapter {
        ArrayList<BearItem> items = new ArrayList<BearItem>();

        @Override
        public int getCount() {
            return items.size();
        }

        public void addItem(BearItem 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 viewGroup) {
            final Context context = viewGroup.getContext();
            final BearItem bearItem = items.get(position);

            if(convertView == null) {
                LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(R.layout.gridview_list_item, viewGroup, false);

                TextView tv_num = (TextView) convertView.findViewById(R.id.tv_num);
                TextView tv_name = (TextView) convertView.findViewById(R.id.tv_name);
                ImageView iv_icon = (ImageView) convertView.findViewById(R.id.iv_icon);

                tv_num.setText(bearItem.getNum());
                tv_name.setText(bearItem.getName());
                iv_icon.setImageResource(bearItem.getResId());
                Log.d(TAG, "getView() - [ "+position+" ] "+bearItem.getName());

            } else {
                View view = new View(context);
                view = (View) convertView;
            }

            //각 아이템 선택 event
            convertView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(context, bearItem.getNum()+" 번 - "+bearItem.getName()+" 입니당! ", Toast.LENGTH_SHORT).show();
                }
            });

            return convertView;  //뷰 객체 반환
        }
    }

}

 

 

 

3. activity_gridview.xml

 

그리드뷰(GridView) 레이아웃 리소스 입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GridViewActivity">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginTop="50dp"
        android:background="#FAED7D"
        android:text="그리드뷰"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <GridView
        android:id="@+id/gridview"
        android:layout_width="wrap_content"
        android:layout_height="550dp"
        android:layout_marginStart="50dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_title"
        android:background="#dedede"
        android:numColumns="3"/>

</android.support.constraint.ConstraintLayout>

 

 

 

4. BearItem.java

 

그리드뷰(GridView) 에 아이템의 정보를 담기 위한 클래스 입니다.

생성자 함수를 통해 각 멤버변수의 데이터 값들을 넣어줍니다.

 

package com.eun.myapp;

public class BearItem {
    /* 아이템의 정보를 담기 위한 클래스 */

    String num;
    String name;
    int resId;

    public BearItem(String num, String name, int resId) {
        this.num = num;
        this.name = name;
        this.resId = resId;
    }

    public String getNum() {
        return num;
    }
    public void setNum(String num) {
        this.num = num;
    }

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

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

 

 

 

5. gridview_list_item.xml

 

아이템의 뷰 레이아웃 리소스 입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="100"
    android:padding="5dp">

    <LinearLayout
        android:layout_width="70dp"
        android:layout_height="100dp"
        android:orientation="vertical"
        android:layout_gravity="center">
        <ImageView
            android:id="@+id/iv_icon"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="80"
            android:background="#FFD9FA" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="20"
            android:orientation="horizontal"
            android:weightSum="100" >
            <TextView
                android:id="@+id/tv_num"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="20"
                android:text="번호"
                android:background="#B2EBF4"
                android:gravity="center"/>
            <TextView
                android:id="@+id/tv_name"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="80"
                android:text="이름"
                android:background="#B7F0B1"
                android:gravity="center"/>
        </LinearLayout>

    </LinearLayout>



</LinearLayout>

 

 

 

안드로이드 결과화면

 

두둥~ 케어베어 그리드뷰입니당 >_<

각 리스트를 선택할 때 마다 Toast 를 표시해 줍니다!

 

 

 

 

끝-@_@🐱