버튼을 눌렀을 때 변화하게 만들기
이번에 수요일에 제출 했던 과제이다. 여기서 보면 버튼은 여기서 주는 색깔과 모양을 벗어날 수 없고 여기에 그림도 추가 할 수 없다. 그리고 수정 후 다시 제출하는 시기가 와서 해설 영상에 나왔던 누르면 색깔이 바뀌고 그림도 바꾸는 코드를 집어 넣어 보기로 했다.
위에는 그림도 넣고 아래에는 그냥 색깔만 바뀌게끔 넣은 상태이다.
이건 버튼으로 하는게 아니라 저 부분을 레이아웃으로 넣는 방식이다.
우선 이 사각형 레이아웃의 모서리를 둥글게 깎고 안에 색깔을 입힐 xml 파일을 따로 만들어야 한다.
<?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="20dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="@color/yellow"/>
<corners android:radius="20dp"/>
</shape>
</item>
</selector>셀렉터 라는 xml 파일을 만들어서 <selector> 라는 문구를 넣어서 안에 만들면 된다.
우선 위쪽 아이템에 있는 pressed="true" 에서 알 수 있듯이 눌렀을 때 나오는 아이템이다. 안에 색깔을 넣어주고 코너를 넣어서 모서리를 둥글게 깎을 수 있다. 밑에 pressed가 없는 평소 상태도 하나 더 만들어 둔다.
이렇게 레이아웃만 만들면 물론 버튼의 역할은 수행 할 수 있으나 글자도 없고 그림도 없다. 그래서 또 셀렉터 xml 파일을 그림과 글자로 나누어서 더 만들어야 한다.
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/img_lv2" android:state_pressed="true"/>
<item android:drawable="@drawable/img_lv4" android:state_focused="true"/>
<item android:drawable="@drawable/img_lv4"/>
</selector>우선 그림파일 이다. 여기서도 pressed로 눌렸을 때 lv2라는 다른 그림 파일을 사용하고 평소에는 lv4라는 그림을 사용하였다. (focused는 포커스 받고 있을 때라는데 잘 모르겠다...올려놓기만 해봤는데 바뀌질 않았었다.) 그리고 평소의 그림까지 3가지를 이용하였다.
<?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/green"/>
<item android:color="@color/black"/>
</selector>텍스트도 변하게 눌렀을 땐 초록, 아닐 땐 검정으로 출력되게 2가지만 만들었다.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/btn_close"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="24dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="24dp"
android:background="@drawable/selector_button"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView9">
<ImageView
android:id="@+id/iv_closed"
android:layout_width="45dp"
android:layout_height="wrap_content"
android:src="@drawable/btn_selector_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView15"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="@string/home_exit"
android:textColor="@drawable/btn_selector_text"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/iv_closed"
app:layout_constraintTop_toTopOf="parent" />이렇게 버튼은 constraint 레이아웃으로 만들고 이 안에 그림과 텍스트를 집어 넣었다. 텍스트는 색깔만 변하기에 textColor에 xml파일 내용을 집어 넣었고, 버튼 모양과 색깔을 위해 레이아웃의 background에 버튼 xml을 넣고 이미지는 이미지가 바뀌어야 하니 src로 이미지 가져오는거를 xml을 통해 가져오는 거로 만드는 듯 하다.
이것만 바뀌고 아이디도 그대로 뒀으니 실행 되겠지 했는데 실행이 되지 않고 바로 꺼져버린다.
문제는 간단하게 찾았다.
// val btn_sign = findViewById<Button>(R.id.btn_sign)
//이 이아디는 버튼이 아니라 레이아웃이므로 이것들을 바꿔주자.
val btn_sign = findViewById<ConstraintLayout>(R.id.btn_sign)버튼이 아니라 레이아웃으로 만들었기에 코틀린 파일들에도 버튼을 모두 레이아웃으로 바꾸어 주었더니 이제 정상 작동한다.
최대한 모든 토스트 문구 등 하드 코딩이 되어있던 것들도 String.xml을 따로 만들어서 이것도 바꾸어 주었는데 다음 팀프로젝트를 위해 잘 기억해 둬야겠다.
