[Android] 안드로이드 GridView (feat.Adapter)

👼🏻 초보 안드로이드 개발자가 매번 구글링하기 싫어서 정리하는 블로그 👼🏻 

 

안녕하세요!

2021.12.26 - [Android/개발] - [Android] 안드로이드 ListView (feat.Adapter)

[Android] 안드로이드 ListView (feat.Adapter)

저번에 ListView 를 해보았는데,

리스트뷰는 목록처럼 쭈루룩 아래로 나열된다면,

GridView 는 바둑판(?) 형식으로 나열되는 위젯이에요!

 

이걸 활용해서 한번 코드를 짜볼게요 :)

 

뷰를 그리기 전에 이미지를 준비해야해요!!

GridView_image.zip

0.45MB

제가 사용한 이미지 첨부해놓을테니 사용하고 싶으신 분들은 사용하셔도 되요 🤗

( 참고로 저는 1:1 비율의 이미지를 준비했어요!! 참고 부탁드려요! )

이미지가 준비가 되었다면 이젠

뷰를 그립시다!!

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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=".MainActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:numColumns="3"
        android:gravity="center"
        />

</LinearLayout>

numColumns 는 한줄에 몇개씩 배치할건지를 뜻해요!!

 

뷰를 그렸으면 MainActivity 가기전에 Adapter 를 준비해봅시다!

 

 

CustomAdapter

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class CustomAdapter extends BaseAdapter {

    private Context mContext;
    private int[] data;

    public CustomAdapter(Context mContext, int[] data) {
        this.mContext = mContext;
        this.data = data;
    }

    @Override
    public int getCount() {
        return data.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) {
        ImageView imageView;

        if (convertView==null){
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(300,300));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(5,5,5,5);
        }else{
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(data[position]);

        return imageView;
    }
}

 

제가 앞서 이미지를 준비했다고 말씀드렸기에

ImageView 라는 위젯을 선언 후 imageView 를 리턴해주는 거에요!!

만약 텍스트를 원하시면 텍스트를 리턴해주는 방법이 있겟죠? ㅎㅎ

반응형

자 이제 MainActivity 로 넘어갑니다!

 

MainActivity

import android.os.Bundle;
import android.widget.GridView;

public class MainActivity extends AppCompatActivity {
    
    // GridView 에 넣을 데이터
    private int[] data = { R.drawable.emoji_1, R.drawable.emoji_2, R.drawable.emoji_3, R.drawable.emoji_4,
            R.drawable.emoji_5, R.drawable.emoji_6, R.drawable.emoji_7, R.drawable.emoji_8, R.drawable.emoji_9,
            R.drawable.emoji_1, R.drawable.emoji_2, R.drawable.emoji_3, R.drawable.emoji_4,
            R.drawable.emoji_5, R.drawable.emoji_6, R.drawable.emoji_7, R.drawable.emoji_8, R.drawable.emoji_9,
            R.drawable.emoji_1, R.drawable.emoji_2, R.drawable.emoji_3, R.drawable.emoji_4,
            R.drawable.emoji_5, R.drawable.emoji_6, R.drawable.emoji_7, R.drawable.emoji_8, R.drawable.emoji_9};

    // 전역변수 선언
    private CustomAdapter adapter =null;
    private GridView gridView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // xml 연결
        gridView = findViewById(R.id.gridView);
        
        // adapter 선언
        adapter = new CustomAdapter(this, data);
        
        // adapter 연결
        gridView.setAdapter(adapter);
    }
}

 

저는 전역변수를 MainActivity 바로 밑에 선언 하는편이에요!

변수는 변수끼리 모아져있어야지 나중에 코드 분석할때 보기 편해요!

 

코드는 이로써 끝인데 한번 실행해볼까요!

SMALL

 

데이터를 좀 더 넣을껄 그랬나봐요... 뭔가.. 애매하네요...하하

 

짜잔!!!

이걸 활용해서 책표지, 영화포스터 등 한눈에 많이 보여야하는 화면을 구현할 수 있을거에요 !!

 

봐주셔서 감사합니다!