계산기 앱 개발하기

Side Projects - Calculator
우리가 평소에 기본 앱으로 자주 사용하는 계산기 앱을 구현하는 간단한 프로젝트
기본적인 사칙연산 기능 뿐만 아니라 계산 히스토리를 볼 수 있는 기능을 추가한 앱을 개발합니다.

• GitHub Repository-> https://github.com/hwayeon351/Calculator

GitHub - hwayeon351/Calculator

 

---

학습 회고

오늘은 계산기 앱을 개발하는 첫 단계를 시작했다.

안드로이드 앱 화면을 구성하는 xml 파일에 컴퍼넌트를 배치하여 계산기 앱에 필요한 레이아웃을 짰다.

전체적인 틀은 ConstraintLayout으로 잡고 계산기의 출력파트와 입력파트를 나누어 뷰를 구성했다.

먼저, 출력파트와 입력파트를 위아래로 1:1.5 비율로 배정하기 위해서 layout_constraintVertical_weight 속성을 적용했다.

그 다음 입력 파트에 20개의 버튼을 4x5로 배치하기 위해 TableLayout 하위에 5개의 TableRow를 배치해서 5행을 만들어 준다.

이후 각 TableRow 하위에 5개의 버튼을 만들어 주었다.

---

오늘 공부한 내용

• RippleDrawable

버튼의 background 속성을 넣기 위해 drawable 리소스에 RippleDrawable을 추가해 적용했다.

RippleDrwable을 적용함으로 써 버튼을 눌렀을 때 버튼 주변이 물결처럼 퍼지는 효과를 적용할 수 있다.

ripple layer에 적용된 컬러는 버튼을 클릭했을 때 발생하는 애니메이션 컬러로 들어가게 되고 ripple의 하위 레이어는 버튼의 shape를 지정해주어 버튼 background에 적용된다.

따라서, ripple이 최상위 layer이기 때문에 버튼을 클랙했을 때 애니메이션이 버튼 위에 적용된다.

https://www.google.com/url?client=internal-element-cse&cx=000521750095050289010:zpcpi1ea4s8&q=https://developer.android.com/reference/kotlin/android/graphics/drawable/RippleDrawable&sa=U&ved=2ahUKEwjrgYPr48n1AhV4r1YBHfR-BzEQFnoECAAQAQ&usg=AOvVaw0Xvy9wv6lvNVmHk5Dknxe1 

RippleDrawable  |  Android Developers

 

 

• TableLayout

TableLayout은 하위 layer들을 행과 열로 정렬하는 레이아웃이다.

따라서 TableLayout 하위에 TableRow를 배치해서 행을 정의할 수 있다. TableRow의 각 cell에 View를 적용할 수 있다. 즉, View가 TableRow의 Cell이 된다.

또한, TableRow는 View를 하나도 가지고 있지 않을 수도 있고(cell이 0개), 여러 개 가지고 있을 수도 있다.

 

테이블의 각 열의 너비(width)는 해당 열의 cell 중 가장 넓은 너비로 정의된다.

테이블의 각 행의 높이(height)는 해당 행의 cell 중 가장 높은 높이로 정의된다.

 

테이블의 열의 너비가 셀의 내용에 맞춰지게 되므로 셀의 너비가 TableLayout의 전체 너비보다 작을 경우에는 모든 내용이 한쪽으로 쏠리게 된다. 이때 셀의 너비가 적더라도 TableLayout의 전체 너비만큼 늘려서 표현하고 싶다면, TableLayout에 stretchColumns라는 속성을 적용하면 된다.

또, 이와 반대로 셀의 너비가 TableLayout의 너비를 벗어난 경우, 화면에 모든 셀들이 표시되지 않을 수 있다. 이 경우에는 TalbeLayout에 shrinkColumns 속성을 적용해서 셀들이 TableLayout의 전체 너비에 맞춰 들어갈 수 있도록 할 수 있다.

 

https://recipes4dev.tistory.com/138

안드로이드 테이블레이아웃. (Android TableLayout)