[안드로이드] 패스트캠퍼스 챌린지 27일차!!(ripple)

들어가며

오늘은 계산기 프로그램 IU만들기 두번째 시간입니다 어제는 ConstraintLayout 에 숫자와 히스토리를 보여주기 위한 View 엘리먼트, 각종 기능들과 숫자들로 이루어져 있는 TableLayout에 대해서 배웠습니다 html에서만 다루던 table 엘리먼트를 안드로이드에서도 보니까 많이 반가웠고 동시에 새로운 느낌이였습니다. 그에 이에 이젠 TableLayout에 들어갈 버튼 디자인을 해보는 시간을 가져보겠습니다. 

 

CODE

버튼에 디자인을 입히기 위해선 drawble 파일이 필요 합니다. drawble 파일에 ripple 태그를 담는 파일을 만들어서 버튼에 추가할 계획입니다 코드 먼저 살펴 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="#333333"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ededed" />
            <corners android:radius="100dp" />
            <stroke
                android:width="1dp"
                android:color="#eeeeee" />
        </shape>
    </item>
</ripple>

일단 디자인을 안입힌 버튼입니다.

그냥 네모네모한 버튼에 색깔도 안드로이드에서 제공하는 회색 background입니다. 너무 칙칙하죠? 이것을 위 코드를 이용해 바꾸게 되면 다음과 같이 됩니다.

동글동글해 졌죠?! corner 값을 줘서 둥글둥글 하게 만들었습니다. 코드를 상세하게 보겠습니다

ripple 태그는 사용자가 버튼을 클릭핵을때 클릭 에니메이션을 지정하는 엘리먼트입니다 이전 버전의 android에선 기본으로 제공하지 않은 기능입니다. 이 기능은 구글에서 제공히는 material UI 기능들 중에 하나 입니다 ripple 엘리먼트를 사용한다면 버튼 클릭에 대한 UX를 사용자에게 제공할 수 있습니다.

 

다음은 Item부분입니다.

 

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ededed" />
            <corners android:radius="100dp" />
            <stroke
                android:width="1dp"
                android:color="#eeeeee" />
        </shape>
    <item>

item은 background로 지정된 객체를 의미하는데요? 저희는 Button에 지정할 background입니다!! shape는 앞전 시간에 만들었던 디자인인데요? solid로 색깔을 지정하고 corner를 100dp로 주어 모서리 부분을 둥글게 만들고 stroke를 이용해 border를 디자인 하게 됩니다.

 

이렇게 drawable 파일을 만들어서 android:background 에 지정을 합니다. 지정을 한다면 버튼이 둥글게 만들어 지는 것이 보일 것입니다.

 

그리고 추가적으로 버튼이 위로 올라온 느낌의 디자인을 없에기 위해서 다양한 속성을 사용하는데요?

 

        <TableRow>
            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="C"
                android:onClick="clearButtonClick"
                android:stateListAnimator="@null"
                android:background="@drawable/button_background" />
        </TableRow>

 

일단 android:stateListAnimator 가 그역할을 합니다. 그림자효과를 없에는 것이죠 이 그림자 효과가 UI를 안좋게 만들 수 있기 때문에 없에는 작업을 했습니다. 그리고 계산기에는 많은 버튼들이 있습니다. 그 버튼을  kotlin 상으로 setOnClicklistner로 구현하게 되면 많은 코드량이 있기때문에 이렇게 xml 에 onClick으로 사용할 함수의 이름을 적어주게 됩니다. 그러면 리스너는 필요가 없게 되고 코드량을 많이 줄어 들 것으로 생각이 듭니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발#패스트캠퍼스후기#30개 프로젝트로 배우는 Android 앱 개발 with Kotlin 초격차 패키지 Online

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.