이번에 볼 것은 저번 글에 이어서 앱 레이아웃 따라하기 실전편 3입니다.
시작하기에 앞서, 공부하면서 정리하는 글이기에 잘못된 내용이 있을 수도 있습니다.
잘못된 내용이 있다면 댓글로 지적해주시면 감사하겠습니다.
1. 버튼 배경 필수 아이템 3가지
지난 번에 이어서 버튼의 배경색상을 구성하는 것을 알아보겠습니다.
버튼의 배경을 구성할 때는 필수적으로 구성해야 할 것은 크게 3가지가 있습니다.
버튼을 누를 때 / 버튼 평상시 상태 / 버튼을 비활성화했을 때
밑의 예시를 통해 알아보겠습니다.
<?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/colorYellow">
</solid>
<corners android:radius="100dp">
</corners>
</shape>
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="@color/colorBlue">
</solid>
<corners android:radius="100dp">
</corners>
</shape>
</item>
<item android:state_enabled="false"
>
<shape android:shape="rectangle">
<solid android:color="@color/colorGray">
</solid>
<corners android:radius="100dp">
</corners>
</shape>
</item>
</selector>selector와 item, shape, solid, corners의 의미는 이 앞 글을 확인하시면 됩니다.
중요한 것은 item 바로 오른쪽에 있는 값의 의미입니다. 순서대로 보면,
state_pressed = "true" : 버튼을 누를 때
state_enabled = "true" : 평상시
state_enabled = "false" : 비활성화
참고로 <solid android:color="@color/colorGray"> 같이 설정하기 위해 컬러코드를
app > res > values > colors.xml
에 들어가 값을 입력해줍니다.
아래는 위의 예시입니다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="colorBlue">#00b2ed</color>
<color name="colorYellow">#ffff00</color>
<color name="colorDarkBlue">#3a5994</color>
<color name="colorGray">#777777</color>
</resources>
이렇게 입력했으면 이제 버튼을 비활성화하는 방법에 대해 알아보겠습니다.
2. 버튼 비활성화 방법
말 그대로 버튼으로 정의를 했으면 android:enabled="false"로 정의할 수 있지만
지난 시간에 Linearlayout 안의 TextView로 정의했기 때문에 이 방법을 사용할 수 없습니다.
나중에 이 난관을 해결하는 방법은 나중에 다시 다루겠습니다.
3. Linearlayout 내 ImageView와 TextView의 배치
Linearlayout 내 ImageView와 TextView의 배치에 대해 알아보겠습니다.
이전 게시글대로 진행하면 ImageView를 오른쪽으로 넘겼을 때 애러가 발생한다는 사실을 알 수 있습니다.
이를 간단하게 Linearlayout 내 android:weightSum="1"로 정하고
TextView의 android:layout_weight="1"로 설정하여 ImageView와 TextView의 순서만 바꾸어
이미지를 왼쪽 또는 오른쪽에 둘 수 있습니다.
아래는 예시입니다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center"
android:background="@drawable/btn_blue"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:clickable="true"
android:layout_marginBottom="16dp"
android:weightSum="1"
>
<TextView
android:id="@+id/LoginText"
android:layout_width="0dp"
android:layout_height="50dp"
android:textColor="#ffffff"
android:stateListAnimator="@null"
android:gravity="center"
android:layout_weight="1"
android:text="Login"
/>
<ImageView
android:id="@+id/LoginImage"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@null"
android:src="@drawable/icon_profile"
/>
</RelativeLayout>하지만 이 방식에도 한계점은 분명합니다.
버튼 내 글자가 정중앙에 오지 않는다는 점입니다.
이를 해결하기 위해 Linearlayout을 Relativelayout으로 변화를 주어야 하지만 Relativelayout에서는 weightSum을 사용할 수 없습니다.
4. TextView의 글자를 정중앙에 보내려면
Relativelayout으로 적용하려면, weightSum 대신하여 parent에 대한 자식의 위치를 정해주면 됩니다.
이 때, 전에 배웠던 relativelayout의 자식들 간의 위치 지정을 하면, 제대로 된 출력이 안되기에 반드시 parent와 자식간 관계만 정의해야 합니다.
Relativelayout에서는 TextView와 ImageView의 순서를 잘못 배치하면, ImageView가 안 나올 수 있기 때문에
TextView를 먼저 정의하는 것이 좋습니다.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center"
android:background="@drawable/btn_blue"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:clickable="true"
android:layout_marginBottom="16dp"
>
<TextView
android:id="@+id/LoginText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:textColor="#ffffff"
android:stateListAnimator="@null"
android:layout_centerInParent="true"
android:gravity="center"
android:text="Login"
/>
<ImageView
android:id="@+id/LoginImage"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@null"
android:src="@drawable/icon_profile"
android:layout_centerVertical="true"
/>
</RelativeLayout>위 코드를 보면 알겠지만, TextView는 정중앙에 위치해야 하기에 Parent의 정중앙의 의미란 문장으로
android:layout_centerInParent="true"ImageView는 왼쪽에 위치해야 하기에 Parent의 수직적인 중앙이라는 의미로,
android:layout_centerVertical="true"로 입력해야 합니다.
만약, 아이콘을 오른쪽으로 보내려면,
android:layout_alignParentRight="true"를 ImageView 내에 추가적으로 작성해주어야 합니다.
이것의 전체 코드 및 실행 결과는 아래와 같습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@android:color/holo_blue_dark"
android:textSize="24sp"
android:layout_marginBottom="16dp"
android:text="LOGIN"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@null"
android:src="@drawable/icon_present"
android:gravity="center"
android:layout_marginBottom="16dp"
/>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="Email"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="Password"
/>
</com.google.android.material.textfield.TextInputLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center"
android:background="@drawable/btn_blue"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:clickable="true"
android:layout_marginBottom="16dp"
>
<TextView
android:id="@+id/LoginText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:textColor="#ffffff"
android:stateListAnimator="@null"
android:layout_centerInParent="true"
android:gravity="center"
android:text="Login"
/>
<ImageView
android:id="@+id/LoginImage"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@null"
android:src="@drawable/icon_profile"
android:layout_centerVertical="true"
/>
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginBottom="16dp"
android:text="Or"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center"
android:background="@drawable/btn_darkblue"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:clickable="true"
>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Login with Youtube"
android:textColor="#ffffff"
android:stateListAnimator="@null"
android:layout_gravity="center"
android:gravity="center"
android:layout_centerInParent="true"
/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@null"
android:src="@drawable/icon_face"
android:gravity="center"
android:layout_centerVertical="true"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="5"
android:textSize="24sp"
android:text="Find Password"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="5"
android:textColor="@android:color/holo_blue_dark"
android:textSize="24sp"
android:text="Sign Up"/>
</LinearLayout>
</LinearLayout>
다음 글에서는 레이아웃을 끝내고 실제 이메일과 패스워드 값을 사이트로 넘기는 Activity에 대해 살펴보겠습니다.
▼ 이전글
2022.01.01 - [앱 개발/안드로이드] - 04_앱 레이아웃 따라하기 실전-2
04_앱 레이아웃 따라하기 실전-2
이번에는 "앱 레이아웃 따라하기 실전편 2"에 대해 다뤄보겠다. 시작하기에 앞서 공부하면서 작성하는 내용이기에 잘못된 내용이 있을 수 있다. 이번에는 구체적인 레이아웃 수정인데, 먼저 살
hycee-19-story.tistory.com
▼ 다음글
2022.01.03 - [앱 개발/안드로이드] - 06_Activity 활용-1
06_Activity 활용-1
이번 글에서는 안드로이드 Activity 활용편 1 (Activity 이동, 값 넘기기, 클릭 이벤트)에 대해 알아보겠습니다. 지난 시간의 파일에 이어서 만듭니다. 1. 버튼으로 동작하기 위해 진정한 버튼의 기능
hycee-19-story.tistory.com
'앱 개발 > 안드로이드' 카테고리의 다른 글
| 07_Activity 활용-2 (0) | 2022.01.04 |
|---|---|
| 06_Activity 활용-1 (0) | 2022.01.03 |
| 04_앱 레이아웃 따라하기 실전-2 (0) | 2022.01.01 |
| 03_앱 레이아웃 따라하기 실전-1 (0) | 2021.12.29 |
| 02_화면그리기, 레이아웃 (0) | 2021.12.29 |
