자바(Java) 코틀린(Kotlin) 공통 UI 구현

https://app-of-web.tistory.com/15

버튼(Button)으로 초기화면 만들어보기

 

지난번 '버튼 초기화면 만들기'의 기능을 자바(Java)와 코틀린(Kotlin)으로 작성하여 비교를해 같은 UI를 만들어 볼까합니다

 

레이아웃 XML 생성

[app > res > layout] 마우스 우클릭 [New > Layout resource file] 클릭

 

파일 이름은 'layout_view_binding'으로 하고 Root Element는 'ConstraintLayout'

(기본 설정 되어 있는 친구로 ok!)

 

 

이렇게 파일이 생성되다보니 중간에 깃허브가 add 하라고 하네요

하지만 저는 한번에 마지막에 하겠습니다

이렇게 만들어진 파일로 '키'와 '체중'을 입력 받아 'BMI'를 출력하는 시뮬레이터를 만들어 볼까합니다

 

[Palette > Text > Number(Signed)] 마우스 드래그 좌측 상단 배치

그 후 'EditText'의 ID를 "tallField"로 지정, 'hint' thrtjd "키를 입력하세요"

 

 

비슷한 방법으로

[Palette > TextView > text > "cm"] 설정해준다

 

 

[Palette > Number(Signed) > id > weightField] / [hint > "체중을 입력하세요"]

[Palette > TextView > text > 'kg']

순으로 해서 똑같은 방법으로 한번 더 진행한다

 

 

이제 마지막인 'BMI 결과'를 보여주도록 설정하겠습니다

 

[TextView > id > 'resultLabel'] / [text > "키와 체중을 입력 후 BMI 계산 버튼을 눌러 주세요"]

[Common > Button > ID > 'bmiButton'] / [text > "BMI 계산"]

 

이렇게 최종 변경 및 설정 해줍니다!

드래그 하면 자동으로 정렬 기능을 활성화해서 이쁘게 정리가 되네요

 

그리고 cm와 kg의 TextView 아이디(id)는 변경하지 않았는데

값이 변경되거나 이벤트 리스너를 받는 등일때 구분하기 위해 사용하였답니다!

 

그리고 마지막으로 '제약'을 우리의 마법봉 [Infer Constraints] 눌러서 생성해줍니다!