08. 계산기 만들기(부제: constraintlayout Flow 활용하기)

안녕하세요. 하다블입니다.

오늘은 간단한 계산기를 만들어보았습니다.

먼저 결과물부터 보여드리도록 하겠습니다.

키패드에 있는 숫자를 누르게 되면 다음과 같이 보여주게 됩니다.

이후 = 버튼을 누르면 결과가 나타나게 됩니다.

숫자가 커짐에 따라 반점으로 분리하였으며, 굉장히 큰 수도 계산할 수 있도록 구현하였습니다.

숫자를 입력하지 않은 상태로 연산자를 넣게 되면 불가능하다고 알려주도록 구현하였습니다.

연산자가 두 개 연속으로 나오는 등의 수식 역시 오류임을 알려주도록 하였습니다.

이번 계산기 구현 프로젝트에 있어서 가장 큰 목표는 constraintlayout.helper.widget.Flow에 대해 익혀보는 것이었습니다.

계산기에는 많은 버튼 오프젝트가 들어가게 되고 이를 어떻게 정렬하고 사용할 것인지에 대해 익혀둘 필요가 있기 때문입니다.

버튼들을 만들어준 다음 constraintlayout Flow (이 글에서는 줄여서 Flow라고 하겠습니다)를 이용하여 배치하는 방법에 대해 정리해 보겠습니다.

<androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/keypadFlow"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHeight_percent="0.7"
        app:layout_constraintVertical_bias="1"
        android:padding="8dp"
        app:flow_maxElementsWrap="4"
        app:flow_wrapMode="chain"
        app:flow_horizontalGap="8dp"
        app:constraint_referenced_ids="button1,button2,button3,buttonClear,button4,button5,button6,buttonPlus,button7,button8,button9,buttonMinus,button0,buttonEqual"
        />

위의 대다수 내용은 다른 오브젝트에도 많이 사용하는 layout관련이지만 아래 4개에 집중할 필요가 있습니다.

flow_maxElementsWrap : 한 줄에 몇 개의 오브젝트를 배치할지 결정하는 부분입니다. 계산기는 키패드(0~9) 뿐 아니라 옆에 초기화버튼, 연산자버튼 등이 존재하므로 4라고 적었습니다.

flow_wrapMode : 대표적으로 4개의 모드가 존재합니다. 

(1) aligned 가장 기본적인 배치입니다. 만약 한 줄에 요소가 부족하면 공백으로 남겨둡니다.

(2) chain 한 줄에 요소가 부족하면 나머지 요소가 그 공간을 차지하게 됩니다. (사진에 0과 = 에는 weight를 설정하여 다르게 나오지만 동일하게 차지하게 나옵니다.)

chain2 chain의 다른 방식으로 정렬하는 모드입니다. 계산기에는 적합하지 않은 방식이지만 정렬하는 방식이 다른 어플을 제작할 때에는 사용할 수 있습니다.

none 아무런 정렬도 하지 않습니다. 적용사진은 chain2와 같게 나옵니다.

 

flow_horizontalGap 수평으로의 간격을 결정할 수 있습니다. 같은 방법으로,  수직의 간격을 조정하는 (verticalGap) 방법도 존재합니다.

constraint_referenced_ids 이 flow에 적용시킬 오브젝트들을 적는 곳입니다. 오브젝트 생성과 무관하게 넣는 순서에 따라 정렬됩니다. 예시에서는 1, 2, 3, C, 4, 5, 6, +... 순으로 적어서 계산기와 비슷한 방식으로 나오도록 설정하였습니다.

나머지 xml, kotlin 내용들은 깃허브를 통해 업로드하여 공개하도록 하겠습니다.

이번 계산기 만들기를 통해 constrainlayout flow를 익혀볼 수 있었는데, 한 화면에 다양한 오브젝트들이 나오는 상황에서 쉽게 정렬할 수 있는 좋은 방법이라고 생각합니다. 계산기가 아니더라도 쇼핑몰 앱이나 게시판과 같은 어플을 만들게 된다면 유용하게 사용될 것 같습니다.

 

더 노력하는 사람이 되겠습니다.

감사합니다.