<정리> 자기소개 앱 구현 4

저번 3까지는 거의 챌린지반의 내용만 들어가있었는데 오늘 과제를 제출하고 해설영상을 보고 나니까 기본 개인 과제도 보완할 점들이 생겨서 이 부분들을 정리해놓으려고 한다.

 

1. 문자열 정리

이건 저번에 적어놨던 내용인데 그건 챌린지반 과제에서만 했었고 여기에서는 안 했었다.

그래서 이번에 추가를 했다.

전에는 일일이 적었었는데 마우스를 문자열에 클릭하고 잠시 기다리면 왼쪽에 노란 전구가 뜨고 거기에서 Extract string resource를 누르고 name만 입력하면 strings.xml에 추가가 되더라

이것도 자주 쓰게 될 거 같다.

<resources>
    <string name="app_name">Introducemyself</string>
    <string name="btn_home_finish_text">종료</string>
    <string name="tv_signup_name_text">이름</string>
    <string name="edit_signup_name_hint">이름을 입력하세요.</string>
    <string name="tv_id_text">아이디</string>
    <string name="edit_id_hint">아이디를 입력하세요.</string>
    <string name="tv_password_text">비밀번호</string>
    <string name="edit_password_hint">비밀번호를 입력하세요.</string>
    <string name="btn_signup_check_text">회원가입</string>
    <string name="btn_signin_login_text">로그인</string>
    <string name="btn_signin_signup_text">회원가입</string>
    <string name="btn_signup_error_text">입력되지 않은 정보가 있습니다.</string>
    <string name="btn_login_error_text1">아이디/비밀번호를 확인해주세요</string>
    <string name="btn_login_error_text2">틀린 아이디 또는 비밀번호입니다.</string>
    <string name="btn_login_success_text">로그인 성공</string>
</resources>

 

2. selector 사용

이건 한번도 써본 적 없는 거였어서 새로웠다.

매번 drawable 폴더에서 Drawable Resource File을 만들 때마다 Root element로 설정되어있는 얘라서 뭔가 싶었는데 오늘 알게 되고 바로 사용해보게 되었다.

내가 사용한 부분은 홈화면의 종료 버튼을 눌렀을 때 버튼 색깔, 이미지 소스, 텍스트 색깔이 변하게 하는 부분이다.

selector를 사용하지 않았다면 코드상에서 setOnClickListener를 이용하지 않았을까 싶다.

특정 액션에서 변경되어야하는게 xml 상에서 수정가능한 속성이라면 이게 더 좋은 거 같다.

 

간단하게 selector에 대해 알아보면 selector는 xml형식으로 작성하여 뷰 상태값에 따라 속성값을 변화시켜줄 수 있는 요소다. 한번 만들어두면 뷰의 해당 속성에서 가져다 쓰기만 하면 되기 때문에 재사용성이 좋다. 상태값(이벤트)에는 17가지가 있지만 보통 많이 쓰는 건 5가지 정도인 듯 하다.

android:state_pressed : 눌렸는지
android:state_checked : 체크했는지
android:state_enabled : 사용가능한지
android:state_focused : 포커스있는지
android:state_selected : 선택됐는지

사용하는 방법은 간단하다. 파일을 만들고 가장 상위의 <selector> 태그 아래에 <item> 태그를 만들고 그 안에 상태에 따른 변경할 속성의 내용을 입력하면 selector를 만드는 건 끝이고 이걸 원하는 뷰의 속성에다가 넣기만 하면 된다.

 

먼저 버튼의 색깔을 바꾸는 데 사용한 selector다.

이미지와 텍스트를 자유롭게 넣기 위해 버튼 위젯을 쓰지 않고 ConstraintLayout을 썼다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/red"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/yellow"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>

 

다음은 이미지 소스를 바꾸는 데 사용한 selector다.

상태값을 하나만 해야하는게 아니라 여러개 쓸 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_personal_injury" android:state_pressed="true"/>
    <item android:drawable="@drawable/ic_how_reg" android:state_focused="true"/>
    <item android:drawable="@drawable/ic_paragliding"/>
</selector>

 

마지막으로 텍스트 색상을 바꾸는 데 사용한 selector다.

android:color는 자동 완성이 안 돼서 뭔가 문제가 있는 건가 싶었지만 그냥 직접 다 치니까 사용이 가능하더라

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/yellow"/>
    <item android:color="@color/black"/>
</selector>

 

위의 selector들을 사용한 레이아웃 xml이다.

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/btn_home_finish"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_marginBottom="24dp"
    android:background="@drawable/selector_button" <-- 여기
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <ImageView
        android:id="@+id/iv_home_finish"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/btn_drawable_selector" <-- 여기
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv_home_finish"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_home_finish"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="10dp"
        android:text="@string/btn_home_finish_text"
        android:textColor="@drawable/btn_txt_selector" <-- 여기
        app:layout_constraintBottom_toBottomOf="@+id/iv_home_finish"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iv_home_finish"
        app:layout_constraintTop_toTopOf="@+id/iv_home_finish" />
</androidx.constraintlayout.widget.ConstraintLayout>