[Kotlin] GridLayout에 동적으로 addView 해주기

저번 포스팅에는 총 3개 배열에 데이터를 나눠 저장했었다.

// 해당 월의 날짜 정보 및 잔디 정보
var numberOfDateArray = ArrayList<String>()
var grassColorArray = ArrayList<String>()
var contributionCountArray = ArrayList<String>()

해당 데이터들에 따라 다르게 이미지를 뷰에 씌워

GridLayout에 할당해줄 것이다.

우선 디폴트 형태인 빈 잔디 이미지를 가진 커스텀 뷰를 만들었다.

<grass_page_custom_view.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/grass"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_margin="3dp"
                android:src="@mipmap/empty_grass"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:id="@+id/coin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_baseline_music_note_24"
                android:layout_gravity="center"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintVertical_bias="0.1"
                app:layout_constraintHorizontal_bias="0.58"
                android:visibility="invisible"
                />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

다음은 위의 커스텀뷰들이 들어갈 fragment의 xml 파일 코드이다.

<grass_page_view_pager_layout.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/grass_view_pager_text_linear_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/dung_guen_mo"
                android:gravity="center"
                android:text="Mon"
                android:textSize="20dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.05"
                app:layout_constraintTop_toTopOf="parent"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/dung_guen_mo"
                android:gravity="center"
                android:text="Sun"
                android:textSize="20dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.95"
                app:layout_constraintTop_toTopOf="parent"

                />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </LinearLayout>


    <GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/grass_view_pager_text_linear_layout"
        android:columnCount ="7"
        android:layout_marginTop="50dp"
        android:orientation="horizontal"

        >

    </GridLayout>
    <Button
        android:id="@+id/harvestCoinButton"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="수확"
        android:textSize="20dp"
        android:background="@color/bright_green"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.8"/>


</androidx.constraintlayout.widget.ConstraintLayout>

왜 xml 파일이 view_pager 인지는 나중에 다루겠다.

color에 따른 잔디 이미지를 만들었다.

grass.1

grass.2

grass.3

grass.4

이제 GridLayout에 뷰를 할당해준다.

 
fun gridLayoutSetting(view: View) {
    divideGithubDataInfo() // 깃허브 정보를 분할하는 함수
    val gridLayout = view.findViewById<GridLayout>(R.id.gridLayout)
    for (index in 0 until numberOfDateArray.size) {
        val customView = layoutInflater.inflate(R.layout.grass_page_custom_view,gridLayout,false)
        val grassImage = customView.findViewById<ImageView>(R.id.grass)
        
        // 각각의 커스텀뷰에 weight 주기
        ?????

        // 잔디 색깔에 따라 이미지를 씌움
       if(grassColorArray[index] == "#9be9a8"){
           grassImage.setImageResource(R.mipmap.grass_one)
        }

        else if(grassColorArray[index] == "#40c463"){
           grassImage.setImageResource(R.mipmap.grass_two)
        }

        else if(grassColorArray[index] == "#30a14e"){
           grassImage.setImageResource(R.mipmap.grass_three)
        }

        else if(grassColorArray[index] == "#216e39"){
           grassImage.setImageResource(R.mipmap.grass_four)
        }

        else{
            grassImage.setImageResource(R.mipmap.empty_grass)
        }
    }
}

처음 시도했던 코드이다.

GridLayout의 자식뷰인 customView 는 꼭 반복문 안에 선언하여
반복문이 돌 때마다 새로운 객체를 생성하여 넣어야 한다.

customView 가 알맞은 크기와 비율로 GridLayout에 채워지게끔 만들고 싶었다.

따라서 각각 뷰에 weight를 1씩 주려고 시도하였다.

???? 자리에 들어갈 코드

           val param = LinearLayout.LayoutParams(
             LinearLayout.LayoutParams.WRAP_CONTENT,
             LinearLayout.LayoutParams.WRAP_CONTENT,
             1f) // 여기 1f

         customView.layoutParams = param

customView가 linearLayout 기반이므로, 다음과 같이 코드를 작성했었다.

하지만 weight가 적용이 되질 않았다.

따라서 두 번째 방법을 써봤다.

           val param = LinearLayout.LayoutParams(
               LinearLayout.LayoutParams.WRAP_CONTENT,
              LinearLayout.LayoutParams.WRAP_CONTENT)

         	 param.setMargins(7*getDeviceDpi()/320) // 현 dpi 기준 7픽셀을 기준으로 잡음
            customView.layoutParams = param

현재 디바이스의 Dpi를 구하는 함수를 추가하였고

그에 맞춰서 Margin 값을 추가해봤다.

일단 내 에뮬레이터 에서는 작동이 잘 됐지만, 다른 기기에서는 뷰가 짤렸다.

사실 xml 파일에 미리 뷰 31개를 생성해놓고,

각각 weight를 주는 방법이 있다.

하지만 너무 하드코딩 같아 꺼려졌고, 조금 더 방법을 찾아보기로 했다.

너무 허무하게도 금방 찾을 수 있었다.

if (numberOfDateArray.size >= 7) {
    val param = GridLayout.LayoutParams(GridLayout.spec(GridLayout.UNDEFINED,1f),
    GridLayout.spec(GridLayout.UNDEFINED,1f))
    customView.layoutParams = param
}

layoutParams는 자식뷰의 형식이 아닌, 부모뷰의 형식을 따라야 한다.

부모가 GridLayout 이므로 layoutParams 또한 LinearLayout이 아닌 Gridlayout의 속성으로

설정해야 했다.

깃허브 데이터가 1년 기준이므로, 어떤 달은 4일치 정보만 포함되는 경우도 있다.

이럴 경우 뷰 간의 간격이 매우 넓어지므로 위와 같은 조건문을 달았다.

최종 코드

fun gridLayoutSetting(view: View) {
    divideGithubDataInfo() // 각각 배열의 size는 8월이면 31, 2월이면 28, 이렇게 저장되어 있을 것임
    val gridLayout = view.findViewById<GridLayout>(R.id.gridLayout)
    for (index in 0 until numberOfDateArray.size) {

        val customView = layoutInflater.inflate(R.layout.grass_page_custom_view,gridLayout,false)
        val grassImage = customView.findViewById<ImageView>(R.id.grass)

        if (numberOfDateArray.size >= 7) {
            val param = GridLayout.LayoutParams(GridLayout.spec(GridLayout.UNDEFINED,1f),GridLayout.spec(GridLayout.UNDEFINED,1f))

            customView.layoutParams = param
        }


        // 잔디 색깔에 따라 이미지를 씌움움
       if(grassColorArray[index] == "#9be9a8"){
           grassImage.setImageResource(R.mipmap.grass_one)
        }

        else if(grassColorArray[index] == "#40c463"){
           grassImage.setImageResource(R.mipmap.grass_two)
        }

        else if(grassColorArray[index] == "#30a14e"){
           grassImage.setImageResource(R.mipmap.grass_three)
        }

        else if(grassColorArray[index] == "#216e39"){

           grassImage.setImageResource(R.mipmap.grass_four)
        }

        else{

            grassImage.setImageResource(R.mipmap.empty_grass)

        }
    }
}

'안드로이드 프로젝트 > 개발자 키우기 게임' 카테고리의 다른 글

[Kotlin]잔디 수확 시스템 만들기(GrassActivity 마무리) (0)	2022.09.08
[Kotlin] Fragment 동적 생성 후 잔디 형태 구현하기 (1)	2022.09.08
[Kotlin] GitHub 잔디(contribution)정보 나누고 할당하기 (0)	2022.09.03
[Kotlin] GitHub 잔디(contribution) 정보 받아오기 (0)	2022.08.31
[Kotlin] 키우기 게임 만들기 (0)	2022.08.31

[Kotlin] GridLayout에 동적으로 addView 해주기

'안드로이드 프로젝트 > 개발자 키우기 게임' 카테고리의 다른 글

댓글

티스토리툴바

[Kotlin] GridLayout에 동적으로 addView 해주기

'안드로이드 프로젝트 > 개발자 키우기 게임' 카테고리의 다른 글

관련글

댓글

티스토리툴바