[안드로이드] 테이블 모양 그리드뷰(GridView) 쉽게 만드는 방법

이번 시간에는 테이블 모양의 리스트 형태인

그리드 뷰(GridView)를 쉽게 만들어보겠습니다.

---

목차

1. 실행화면

2. 숫자 화면 만들기 number_layout.xml

3. 데이터와 화면을 이어 줄 어뎁터 만들기 NumberAdapter.java

4. 메인 화면 구성 activity_main.xml

5. 메인 코드 구현 MainActivity.java

---

1. 실행화면

1부터 6까지 숫자가 격자 형태로 보이는 화면입니다.

숫자를 클릭하면 메시지를 보여줍니다.

 

2. 숫자 화면 만들기 number_layout.xml

이미지 뷰(ImageView)와 텍스트뷰(TextView)로

이루어진 간단한 화면입니다.

이미지 뷰(ImageView)에는

숫자 이미지가 들어가며

텍스트뷰(TextView)에는 숫자이름이 들어갑니다.

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

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

    <TextView
        android:id="@+id/numberText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="Number"
        android:textSize="25sp" />
</LinearLayout>

2022.01.01 - [안드로이드] - [안드로이드 스튜디오] 레이아웃 추가하는 방법

[안드로이드 스튜디오] 레이아웃 추가하는 방법

 

3. 데이터와 화면을 이어 줄 어뎁터 만들기 NumberAdapter.java

getView: 메인코드에서 넘겨받은 데이터를

보여주는 기능을 구현했습니다.

public class NumberAdapter extends BaseAdapter {

    Context context;
    LayoutInflater inflater;
    String[] arrNumberWord;
    int[] arrNumberImage;

    public NumberAdapter(Context context, String[] arrNumberWord, int[] arrNumberImage) {

        this.context = context;
        this.arrNumberWord = arrNumberWord;
        this.arrNumberImage = arrNumberImage;
    }

    @Override
    public int getCount() {
        return arrNumberWord.length;
    }

    @Override
    public Object getItem(int position) {
        return arrNumberWord[position];
    }

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

    
    @Override
    public View getView(int position, View view, ViewGroup viewGroup) {

        if(inflater == null){
            inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        }

        if(view == null){
            view = inflater.inflate(R.layout.number_layout, null);
        }

        ImageView numberImage =  view.findViewById(R.id.numberImage);
        TextView numberWord = view.findViewById(R.id.numberText);

        numberImage.setImageResource(arrNumberImage[position]);
        numberWord.setText(arrNumberWord[position]);

        return view;
    }
}

2021.12.31 - [안드로이드] - [안드로이드 스튜디오] 자바 클래스 생성하는 방법

[안드로이드 스튜디오] 자바 클래스 생성하는 방법

 

 

4. 메인 화면 구성 activity_main.xml

그리드뷰(GridView)로만 되어있는

간단한 화면입니다.

<?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"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2" />
</LinearLayout>

 

5. 메인 코드 구현 MainActivity.java

1. 배열 변수를 만들어 숫자이름과

숫자 이미지를 담는다.

2. 배열을 어뎁터(NumberAdapter)에 넘겨준다.

3. 데이터를 받은 어뎁터(NumberAdapter)가 화면을 그려준다.

4. onItemClick를 통해 클릭 시 이벤트가 발생한다.

public class MainActivity extends AppCompatActivity {


    GridView gridView;

    String[] numberWord = {"One", "Two", "Three", "Four", "Five", "Six"};

    int[] numberImage = {R.drawable.one, R.drawable.two, R.drawable.three,
    R.drawable.four, R.drawable.five, R.drawable.six};

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

        gridView = findViewById(R.id.gridView);

        NumberAdapter numberAdapter = new NumberAdapter(MainActivity.this, numberWord, numberImage);
        gridView.setAdapter(numberAdapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {

                Toast.makeText(getApplicationContext(), numberWord[position]+ "을 클릭했습니다."
                        , Toast.LENGTH_SHORT).show();
            }
        });
    }
}

이미지 res -> drawable

2022.01.01 - [안드로이드] - [안드로이드] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법

[안드로이드] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법

2022.01.02 - [안드로이드] - [안드로이드] RecyclerView Animation 스크롤(Scroll) 에 애니메이션 효과주는 방법

[안드로이드] RecyclerView Animation 스크롤(Scroll) 에 애니메이션 효과주는 방법

2022.01.03 - [안드로이드] - [안드로이드] RecyclerView 스와이프(Swiped) 옆으로 밀어서 삭제하는 방법

[안드로이드] RecyclerView 스와이프(Swiped) 옆으로 밀어서 삭제하는 방법