사전캠프 TIL 7일차 (BMI 계산기 UI 구현)

코드카타

 

문자열 내림차순으로 배치하기

 

문제

 

 

정답

class Solution {
    fun solution(s: String): String {
        return s.toCharArray().sortedDescending().joinToString("")
    }
}

배열의 요소를 내림차순으로 정렬하는 함수 sortedDescending()을 활용하면 된다.

 

 

 

부족한 금액 계산하기

 

문제

 

 

정답

class Solution {
    fun solution(price: Int, money: Int, count: Int): Long {
        var m: Long = money.toLong()
        for (i in 1..count) {
            m -= price * i
        }
        return if (m>0) 0 else -1 * m
    }
}

현재 가진 돈을 저장할 Long 타입 변수 m을 선언해준다.

m에서 놀이기구를 타면서 든 돈을 빼줬을 때 돈이 부족하다면 m은 음수값을 가진다.

 

돈이 부족하지 않다면 0을 반환하고 부족하다면 부족한 만큼의 돈을 반환한다.

 

 

 

문자열 다루기 기본

 

문제

 

 

정답

class Solution {
    fun solution(s: String): Boolean {
        return (s.length == 4 || s.length == 6) && s.all { it.isDigit() }
    }
}

&&(and 연산자)는 양쪽의 조건문이 전부 True일 떄 True를 리턴한다.

 

 

all 스코프

// 문자열이 전부 숫자일 때만 True 반환
s.all { it.isDigit() }

all { } 함수는 모든 요소가 해당 조건문에서 참에 해당하면 True를 반환한다.

isDigit()은 값이 숫자일때만 True를 반환한다.

 

 

 

행렬의 덧셈

 

문제

 

 

정답

class Solution {
    fun solution(arr1: Array<IntArray>, arr2: Array<IntArray>): Array<IntArray> {
        return Array(arr1.size) { i ->
            IntArray(arr1[0].size) { j ->
                arr1[i][j] + arr2[i][j]
            }
        }
    }
}

두 배열의 크기는 같으니 arr1의 크기만큼 반환할 배열에 Int형 배열을 추가하고

arr1의 첫번째 요소(IntArray)의 크기만큼 행렬덧셈 결과를 2차원 배열에 추가한다.

 

---

 

BMI 계산기 만들기

 

개요

 

 

사전캠프 제공강의에서 제일먼저 만들어 볼 앱은 BMI 측정기이다.

본캠프 들어가면 계속 코드만 치게 되서 살이 찔거니 

캠프 전과 후를 비교해보란 의도로 만들어보라고 한다. ㅋㅋ

 

 

레이아웃 짜기

 

레이아웃 구현 방식

 

앱을 만들려면 일단 레이아웃을 짜야한다.

 

프로젝트의 res/layout 폴더에 있는 activity_main.xml 파일을 열고

우측 상단 탭에서 Design을 선택하여 드래그 드롭 방식으로 위젯을 배치해

앱의 레이아웃을 짤 수가 있다.

 

위젯을 배치하는 방식으로 UI를 구성하는 플러터와 달리 

드래그 드롭으로 기본적인 레이아웃을 구성할 수 있다는 방식이 신기했다.

 

 

 

 Text 위젯 설정

 

Text 위젯을 선택하고 우측 검색창에 text를 검색하면 글자를 변경할 수 있는 옵션들이 나온다.

text에서 글자의 내용을 변경하고, textSize로 글자 크기 설정, textStyle로 글자 굵기를 설정해줄 수 있다.

 

 

단일 위젯 중앙정렬

 

양 옆 여백을 0으로 준다면 단일 위젯의 중앙정렬이 가능하다.

 

 

복수 위젯 중앙정렬

 

좌측 단일 방향으로 세 위젯을 붙이고 위쪽 점도 마찬가지로 연결해서 세로 중앙 정렬을 한다.

 

 

 

그 다음 숫자입력필드의 왼쪽 여백을 16, 'cm'의 왼쪽 여백을 16으로 준다.

 

 

 

그 다음 '신장' 글자의 위쪽 점을 'BMI 계산기' 아래쪽 점에 붙인 후 여백을 줘야한다.

이렇게 올바른 방향으로 연결해주지 않으면 나중에 UI 위치가 상단에 붙어버리게 된다.

 

 

 

모든 연결이 끝났다면 세 위젯에 Horizontal Chain을 준 뒤

Chain Style을 'packed'로 줘서 중앙 정렬을 해야한다.

 

 

테스트 

 

깨지지 않고 이어준대로 잘 나오는 모습이다.

코드 한 줄 치지 않고 귀찮은 css도 없이 UI를 구성가능하다니 참으로 신세계다.

 

배경이 까만 이유는 내 폰 기본테마가 다크모드라 그렇다.

 

 

결과화면 레이아웃

 

이런식으로 짜준다.

 

 

이미지 넣기

이모티콘 다운 < 여기 들어가서 이모티콘을 다운받아주자.

아니면 피그마 같은데서 직접 그려서 svg로 다운 받아도 된다.

 

 

 

drawable 폴더에 다운받은 사진들을 넣어준다.

 

 

<ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView7"
        tools:srcCompat="@drawable/lv1"/>

 

화면을 split으로 변경하고 이미지를 선택해 

ImageView에서 이미지의 크기를 설정하고 경로를 수정해 원하는 이미지를 불러온다.

 

 

 

경로는 @draw까지 치면 이미지를 선택하는 탭이 나온다.

 

 

아이디 설정

 

기능을 구현하는데 필요한 위젯을 가져다 쓰려면

아이디를 설정해주는 것이 좋다.

 

 

슬래쉬 뒤에다 원하는 아이디명을 입력해주고

 

 

 

아이디를 바꾸면 서로 연결되있던 위젯과 아이디명이 맞지 않아 오류가 나게된다.

슬래쉬 뒤의 아이디를 바꾼 아이디로 바꿔주면 오류가 해결된다.