[Android] 안드로이드 GridView 2탄 (feat.Adapter, AlertDialog)

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

 

안녕하세요!!

원래 GridView 는 한번만 작성하려고했는데 

다른걸 겸사겸사 살짝 맛보기로만 보여드릴려고 갑자기 2탄을 작성하게 되었어요!

 

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

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

( 🔼 1탄이 궁금하다면 🔼 이미지가 필요하다면 🔼  )

 

1탄의 GridView 와 다를게 없지만,

조금 다른게 있다면

Alert 을 사용해볼꺼에요!!!

 

구현영상부터 갑시다 😸

 

 

해당 이모지 클릭하면 크~게 Alert으로 나오는걸 확인 할 수 있져?

 

뷰부터 그려봅시다!

 

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>

 

어뎁터로 들어가기 전에,

AlertDialog 의 layout 을 미리 그려주고 갈게요!

dialog.xml

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

    <ImageView
        android:id="@+id/ivPoster"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

 

전 이미지를 불러올거이기에 ImageView 위젯을 사용했습니다 😙

반응형

자 이제 진짜로 Adapter 로 넘어갑니다!

 

CustomAdapter

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

import androidx.appcompat.app.AlertDialog;

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 = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(300,300));
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setPadding(5,5,5,5);

        imageView.setImageResource(data[position]);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                View dialogView = View.inflate(mContext, R.layout.dialog,null);
                AlertDialog.Builder dlg = new AlertDialog.Builder(mContext);
                ImageView ivPoster = dialogView.findViewById(R.id.iv_image);
                ivPoster.setImageResource(data[position]);

                dlg.setTitle("짜짠");
                dlg.setView(dialogView);
                dlg.setNegativeButton("닫기",null);
                dlg.show();


            }
        });

        return imageView;
    }
}

 

보시면 getView 메소드 안에

AlertDialog.Builder

이걸 선언하여 작성한게 보이실꺼에요!

 

Alert 은 나중에 자세하게 다뤄볼게요!!!

 

이제 뷰와 어뎁터를 사용하는 MainActivity로 가볼게요!

SMALL

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_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_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};

    // 전역변수 선언
    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);
    }
}

 

짜잔!!!

GridView 가 아니고 ListView 에도 동일하게 사용할 수 있으니 상황에맞게 사용하시면 될것같아요~

 

봐주셔서 감사합니다 🥰