[내배캠 Android 4기] TIL 0604

오리너구리·2024년 6월 4일

TIL

목록 보기

24/48

하루 계획

코드카타 28번
개인 과제 레이아웃 제작
레이아웃 공부 (Grid Layout)

코드카타 28번

⏲️ 공부시간 09 : 00 ~ 09 : 30

링크

https://velog.io/@orinugoori_art/posts

개인 과제

레이아웃 디자인요소 제작

⏲️ 공부시간 09 : 40 ~ 10 : 40

어제 일과시간 끝나고 잠안와서 그냥 미리 만들어놔야징~ 하고 디자인요소 일러스트로 대충 다 만들어놓고 살짝 수정만 남았는데 오늘 오전 스크럼시간에 오늘은 레이아웃 제작할 예정이라고 하니깐 팀원분이 레이아웃 안해도 된다고 알려주심. ㅎ what~?~?~~?~?

근데 어차피 디자인요소도 만들었겠다 타임라인도 어제 계획해놨겠다

이왕하는거 레이아웃까지 해버릴거지롱~~~

그래서 일단 한시간정도 디자인요소 편집을했다..

디자인 계획

만든 디자인 요소들

이렇게 배경이랑 버튼들을 입체적으로 만들어봤다.
프로그램은 일러스트랑 포토샵을 사용함!

Git 레포지토리 생성

⏲️ 공부시간 10 : 40 ~ 11 : 10

이제 Git을 배웠으니까 혼자 작업도 Git 에 올리면서 해야할 것 같아서

처음으로 혼자 Git 레포지토리를 생성해봤다.

근데 역시 공부하면서 알았다고 생각했는데

혼자 GIt 만드려니까 중간에 기억이 안나서 좀 헤매긴한듯

하지만 정리해놨던 자료들이랑 GPT 한테 물어보면서 해결했다.

레포지토리를 생성하고 프로젝트할 파일을 올려놓고

dev 브랜치를 하나 생성해서 작업할 환경을 세팅했다!!

근데 잘한거 맞겠지 .. 틀렸으면 오열각

레이아웃 작업

⏲️ 공부시간 11 : 10 ~ 13 : 00

만든 디자인 소스를 활용해서 간단하게 레이아웃을 만들었다.

Constraint layout 을 사용해서 만들었는데

계산기 몸체가 될 imageView를 배치하고

그 위에 디스플레이 영역을 배치했다.

그리고 버튼을 위치에 맞게 배치해줌!

하면서 어려움을 겪었던 부분

디자인한 계산기 버튼 png 를 넣었는데 버튼 외의 영역에 회색 배경이 생겨서 나옴!

이런식으로 배경없는 png 이미지인데 배경이 생겨버림

내가 해결한 방법

→ androud:background 속성에 color/transparent 를 줬더니 배경 투명해짐

png 버튼을 넣고 크기를 wrP_content 로 줬더니 저렇게 영역이 엄청 크게 잡힘

내가 해결한 방법

→ width를 70dp로 직접 값을 설정해주고, adjustViewBounds를 true로 설정해줌

근데 뭔가 이 방법 아닐거 같음 ;; 임시방편으로 문제생긴걸 마구마구 대충 느낌이다.

일단 레이아웃 파일 다 작성했당!

생각보다 금방했음!!!간단하구만~~!

작성 끝난 dev 브랜치를 git hub에 push 까지 했다!!

버튼을 누르면 display에 Text를 입력할 수 있게 만들기

⏲️ 공부시간 14 : 00 ~ 18 : 00

본격적으로 기능을 구현하기 전에 일단은

계산기 버튼을 누르면 버튼에 해당하는 문자가 입력되게 만드는게 먼저인것 같아서

그렇게 만들어줬다.

전체코드

class MainActivity : AppCompatActivity() {

    private lateinit var displayText: TextView
    private var currentInput = ""
    private var operator: String? = null
    private var firstOperand: Double? = null

    private lateinit var binding: ActivityMainBinding
    private var calculator = Calculator()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        displayText = binding.tvDisplay

        val buttonList = listOf(
            binding.ibtnSeven,
            binding.ibtnEight,
            binding.ibtnNine,
            binding.ibtnFour,
            binding.ibtnFive,
            binding.ibtnSix,
            binding.ibtnOne,
            binding.ibtnTwo,
            binding.ibtnThree,
            binding.ibtnZero,
            binding.ibtnDot,
            binding.ibtnPlus,
            binding.ibtnMinus,
            binding.ibtnMultiple,
            binding.ibtnDivide,
            binding.ibtnMod
        )

        for (button in buttonList) {
            button.setOnClickListener {
                currentInput += button.contentDescription
                displayText.text = currentInput
            }
        }

        binding.ibtnC.setOnClickListener {
            clearAll()
        }

        binding.ibtnDel.setOnClickListener {
            deleteLast()
        }

        binding.ibtnEqual.setOnClickListener {
            calculateResult()
        }

    }

    private fun clearAll() {
        currentInput = ""
        displayText.text = "HELLO"
    }

    private fun deleteLast() {
        if (currentInput.isNotEmpty()) {
            currentInput = currentInput.dropLast(1)
            displayText.text = if (currentInput.isNotEmpty()) currentInput else "0"

        }
    }

    private fun calculateResult() {
        currentInput += "="
        displayText.text = currentInput

    }
}

코드 설명

    private lateinit var displayText: TextView
    private var currentInput = ""
    private var operator: String? = null
    private var firstOperand: Double? = null

displayText는 TextView이고 xml에 있는 tv_display랑 연결해줄거임

currentInput 는 내가 입력한 문자들을 저장할 문자열이다.


        displayText = binding.tvDisplay

        val buttonList = listOf(
            binding.ibtnSeven,
            binding.ibtnEight,
            binding.ibtnNine,
            binding.ibtnFour,
            binding.ibtnFive,
            binding.ibtnSix,
            binding.ibtnOne,
            binding.ibtnTwo,
            binding.ibtnThree,
            binding.ibtnZero,
            binding.ibtnDot,
            binding.ibtnPlus,
            binding.ibtnMinus,
            binding.ibtnMultiple,
            binding.ibtnDivide,
            binding.ibtnMod
        )

xml에 있는 요소들 중 동작이 들어갈 애들을 가져와줬다.

button들은 하나하나두기에 너무 많고 Clear버튼이랑 del 버튼 제외하면 누르면 다 그냥 각 버튼의 contentDescription을 문자열에 입력하기만 할거라서 List로 묶어줬다.

for (button in buttonList) {
            button.setOnClickListener {
                currentInput += button.contentDescription
                displayText.text = currentInput
            }
        }

        binding.ibtnC.setOnClickListener {
            clearAll()
        }

        binding.ibtnDel.setOnClickListener {
            deleteLast()
        }

        binding.ibtnEqual.setOnClickListener {
            calculateResult()
        }

    }

버튼을 누르면 어떤 동작을 할건지 설정해줬다.

buttonList 에 포함된 버튼을 누르면 currentInput 에 각 버튼의 contentDescription을 추가하게했고, displayText를 currentInput으로 바꿔준다.
그 외 각자 눌렀을 때 디스플레이에 입력하는게아니라 개별 동작을 해야하는 애들은 따로 함수를 만들어서 눌렀을 때 해당하는 함수가 동작하게 해줬다.

private fun clearAll() {
        currentInput = ""
        displayText.text = "HELLO"
    }

clear 버튼을 누르면 실행될 함수

currentInput 을 빈 문자열로 만들어주고
displayText를 “Hello”로 만들어준다.

 private fun deleteLast() {
        if (currentInput.isNotEmpty()) {
            currentInput = currentInput.dropLast(1)
            displayText.text = if (currentInput.isNotEmpty()) currentInput else "0"

        }
    }

delete 버튼을 누르면 실행될 함수

currentInput 이 비어있지 않으면, currentInput 의 가장 마지막 문자를 없앤다.
지운다음 currentInput 이 비어있지 않으면 displayText에 currentInput 을 넣어준다.

private fun calculateResult() {
        currentInput += "="
        displayText.text = currentInput

    }
}

= 버튼을 누르면 실행될 함수

일단은 Calculate 기능을 만들지않았기때문에 =을 누르면 그냥 currentInput 에 “=”을 추가해서 표시하게만 해뒀다.

입력받은 문자열 분석하기

⏲️ 공부 시간 18 : 00 ~ 18 : 50

일단 계산을 하려면 입력받은 문자열을 파악해야하니까

StringAnalyze 클래스를 만들어서 입력받은 문자열을 분석할수 있게 해야겠다고 생각했다.

StringAnalyze..kt 코드

package com.example.secondweek

class StringAnalyze {

    fun filterNumbers(currentInput: String): List<Double> {
        return currentInput.split("+","-","*","/")
            .mapNotNull { it.toDoubleOrNull() }
    }

    fun filterOperators(currentInput: String): List<String> {
        return currentInput.split(" ")
            .filter{it.toDoubleOrNull()==null}
    }

}

currentInput 에서 숫자/연산자를 따로 추출하는 함수를 만들었다.

filterNubers
- currentInput 을 .split으로 구분자를 각 연산자로 설정해서 연산자 기준으로 나눠지게 만들고, 걔네의 요소가 Double 이나 Null 이면 Null을 뺀 숫자만 모아줬다.
filterOperators
- currentInput 을 똑같이 .split을 사용해서 이번에는 구분자를 공백문자로 두고 나눠지게 해서, 각 요소별로 분리하고, 숫자로 변환되지 않는 요소 즉 연산자만 모아줬다.

더하기 기능 만들기

⏲️ 공부시간 18 : 50 ~ 19 : 30

이제 문자를 입력받아서 분석까지 했으니까 계산 기능을 만들어줬다.

일단은 더하기가 제일 쉬울것같아서 더하기부터 만들었다.

Calculator.kt

class Calculator {

    fun add(numbers : List<Double>): String{
        return if (numbers.isEmpty()){
            "0"
        } else{
            val sum = numbers.sum()
            sum.toString()
        }
    }

}

Calculator 클래스를 만들고

그 안에 add 함수를 만들어줬다.

add 함수는 내가 StringAnalyze 에서 만들어준 숫자 리스트를 가지고 분석해서 스트링으로 내보내게했다.

만약 빈 리스트가오면 0을 리턴하고 숫자가 있으면 numbers의 숫자들을 합치도록 만들어줬다.

그리고 합친 결과를 스트링으로 변환해줌!

private fun calculateResult() {
        val numbers = stringAnalyze.filterNumbers(currentInput)
        val result = calculator.add(numbers)
        displayText.text = result
        currentInput = result

    }

그리고 이제 = 버튼을 누르면 실행될 함수에 Calculator의 결과가 들어가게 바꿔줬다.

numbers라는 변수를 만들어서 StringAnayze에서 가져온 숫자들을 넣고

결과를 넣어줄 result 변수를 만들어서 calculator의 add함수에 numbers를 넣은 결과를 넣어줬다.

그리고 displayText랑 currentInput을 result로 바꿔줌!

오늘의 과제 결산

결과물

열심히 더하기를 하는 나의 계산기의 모습..

오늘 구현 한 것 중 보완할 부분

정수를 입력해도 무조건 실수로 처리함

Ex) 1+2 를 했는데 3.0 으로 나옴; 꼴뵈기싫다

→ StringAnalyze 에 정수랑 실수를 구분하는 코드를 넣던가 해야할듯?
버튼 누를때 누르는 모션이 없으니까 눌러도 누른거같지가 않게 느껴진다.

→ 버튼누르는 모션을 어떻게 추가하는지 알아봐야 할 듯?
```
기껏 입체적인 계산기를 그려놨는데 왜 누르질 못하니..
```
폰트 추가하기

폰트 넣는거 깜박했다. 내일 추가해야지..

오늘 과제 진행하면서 느낀점

개허접주제에 괜히 나댔다 걍 얌전히 코드만 쓸걸..
그래도 레이아웃 공부한 보람이 있게도 xml 작성까지는 수월하게 해냈다.
혼자 작업하는 거여도 중간에 어떤 기능? 하나 완성하면 github에 push해야겠다.
chatGPT 없으면 자살하고싶다. 중간에 chatGPT 먹통돼서 물어보고싶은거있는데 튜터님한테가기에는 너 개허접인데 왜 이런 짓거리를해? 제발 코틀린 기본 문법이나 잘 하면 안될까? 생각이 절로 드시게 만들 것 같아서 최대한 혼자 알아보려고 하는데 진짜 힘들었다.

Layout 공부

⏲️ 공부시간 19 : 45 ~ 20 : 30

공부계기

내배캠 1주차에 프로젝트를 진행하면서 내가 원하는 화면을 자유롭게 표현하려면

Android의 레이아웃을 빨리 공부해야겠다는 생각이 들어서 주말부터 Layout에 대한 공부를 시작함

나의 레이아웃 공부 방법

먼저 공부할 레이아웃에 대해 자료를 찾아보거나 Chat GPT한테 자료를 보면서 명확하게 명시되지 않다고 생각되는 부분에 대해서 더블체크를 하면서 1차적으로 이해
개인 노션에 이해한 내용을 텍스트로 정리 (이 과정에서 안드로이드 스튜디오로 직접 Layout을 사용해보면서 내가 몰랐던 부분을 체크, 고유 속성들을 하나씩 사용해보기)
눈에 글이 안들어올 때나 따로 시간이 날 때 텍스트로 정리한 내용을 바탕으로 일러스트로 시각적인 자료를 제작하면서 복습
시각적 자료까지 완료되면 Velog에 다시 더 깔끔하게 정리해서 업로드

공부 내용 간단 정리

오늘은 GridLayout에 대해서 공부했다.

GridLayout은 TableLayout 을 보완한 레이아웃으로 격자모양의 셀에 자식 뷰들을 배치할 수 있는 레이아웃이다.

격자모양이기 때문에 행과 열을 가지고 있고 각 행과 열을 조절하는 속성들을 가지고 있다.

rowCount / columnCount 로 행과 열의 개수를 지정해주고

orientation으로 자식 뷰가 배치될 방향을 결정해주면

자식 뷰를 지정한 행과 열에 맞춰서 순서대로 배치해준다.

또는 layout_row/column 을 사용하면 원하는 열과행의 셀에 지정해서 배치할 수도 있다.

layout_rowspam/columnspam 으로 지정한 값만큼의 셀과 행을 합칠 수도있다.

공부하면서 느낀점

어제 TableLayout을 공부하면서 안그래도 왜이렇게 불편하게 작성하게 만들어놨는지, 이게 최선의 방법이 맞나? 생각 들었는데 역시 이렇게 더 좋은 방법이 있었다~!

역시 개발자선생님들도 테이블레이아웃 불편하셨던거였음~

그리고 원래 구글링한 정보를 바탕으로 ChatGPT 한테 더블체크? 해가면서 공부하는데 오늘 GPT 상태 메롱이라서 GPT를 활용못한게 좀 아쉬움 GPT가 복구되면 아마 다시한번 공부할 것 같다.

오늘 과제를 진행하면서 레이아웃 작성할 때 계산기 버튼 배치를 GridLayout으로 했어도 괜찮았을 것 같기도하다는 생각도 들었다. 나는 그냥 ConstraintLayout을 사용해서 하나하나 위치 지정해줬는데 어쩌면 GridLayout이 더 맞았을것 같다..

과제 끝나고 튜터님한테가서 코드리뷰 부탁드리면서 여쭤봐야겠음

근데 뭔가 고민할수록 GridLayout이 더 맞았을 거 같음

TMI

오늘은 저녁 거르고 공부했음
괜히 슈발 앱처럼 만든다고 깝쳣다가 호되게 혼났다.
근데 아마 이번주 내내 혼날거같음

오리너구리

오리너구리입니다

이전 포스트

[내배캠 Android 4기] TIL 0603

다음 포스트