안드로이드 앱(Kotlin|Java)/[2025~] 안드로이드 앱
Part1_Ch04_02 응급의료 정보 UI 그리기 (1)
heylo
2025. 4. 9. 15:16
응급 의료 정보 UI 를 만들어보자.
아래와 같이 이름, 생년월일, 혈액형, 비상 연락처는
글자색이 갈색,
글자 크기는 20sp,
글자 스타일은 bold,
marginTop 은 36sp 로 스타일을 통일하고 싶다.
1) styles.xml
이럴 때, 리소스 파일에서 values 타입의
styles.xml 파일을 만들면
모든 뷰에 일일이 요소를 추가하지 않고도
스타일을 통일할 수 있다.
res > New > Android Resource File
File name : styles
Resource type : Values
title 과 content 를 일관성 있게 만들어보려고 한다.
item name 은 attribute 이름을 그대로 사용하면 된다.
command + d ( 윈도우에서는 ctrl + d ) 를 누르면
현재 줄이 아랫 줄로 복사가 된다.
res > values > styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Title" parent="Widget.AppCompat.TextView">
<item name="android:textColor">@color/brown</item>
<item name="android:textSize">24sp</item>
<item name="android:layout_marginTop">36sp</item>
<item name="android:textStyle">bold</item>
</style>
</resources>style 의 name 은 “Title” 으로 하였다.
activity_main.xml 에서는 Title 을 style 로 지정하면 된다.
res > layout > activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Title" parent="Widget.AppCompat.TextView">
<item name="android:textColor">@color/brown</item>
<item name="android:textSize">24sp</item>
<item name="android:layout_marginTop">36sp</item>
<item name="android:textStyle">bold</item>
</style>
</resources>
다시, 부분만 설명하자면
<TextView
...
android:textSize="20sp"
android:textColor="@color/brown"
android:textStyle="bold"
android:layout_marginTop="36dp"
위 부분을
styles 로 대체할 수 있다.
<TextView
...
style="@style/Title"2) guideline
만약 value 에 사용자가 길이가 긴 문자열을 입력한다면?
이렇게 되면 Title 과 Value 의 영역이 겹치게 된다.
이런 문제를 해결하기 위해서
Guideline 을 사용한다.
Value 의 영역을 제한해준다.
guideline 에서는 orientation 을 반드시 지정해주어야 한다.
<!-- value 는 사용자의 입력값에 따라 길이가 변경됨 -->
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4" />
<TextView
....
app:layout_constraintStart_toStartOf="@id/guideLine" />
3)maxLines 와 ellipsize
만약 최대 줄 개수를 지정해주고 싶다면,
maxLines 를 지정해주자.
android:maxLines="1"
그리고 내용이 정해진 영역 내에 모두 표시될 수 없다면
‘ … ‘ 으로 표시되도록 하고 싶다면,
ellipsize 을 end 로 설정하자.
android:ellipsize="end"
<TextView
...
android:text="김주철 이름을 길게 넣으면 어떻게 될까요?"
android:maxLines="1"
android:ellipsize="end"4) 전체코드
res > layout > activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 이름 -->
<TextView
android:id="@+id/nameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="이름"
style="@style/Title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="36dp"
/>
<TextView
android:id="@+id/nameValueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="김주연 "
android:maxLines="1"
android:ellipsize="end"
style="@style/Value"
android:layout_marginEnd="36dp"
app:layout_constraintBaseline_toBaselineOf="@+id/nameTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@id/guideLine"/>
<!-- 생년월일 -->
<TextView
android:id="@+id/birthdateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="생년월일"
style="@style/Title"
app:layout_constraintStart_toStartOf="@id/nameTextView"
app:layout_constraintTop_toBottomOf="@+id/nameTextView" />
<TextView
android:id="@+id/birthdateValueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0000-00-00"
style="@style/Value"
app:layout_constraintBaseline_toBaselineOf="@id/birthdateTextView"
app:layout_constraintEnd_toEndOf="@+id/nameValueTextView"
app:layout_constraintStart_toStartOf="@id/guideLine"/>
<!-- 혈액형 -->
<TextView
android:id="@+id/bloodtypeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="혈액형"
style="@style/Title"
app:layout_constraintStart_toStartOf="@id/birthdateTextView"
app:layout_constraintTop_toBottomOf="@+id/birthdateTextView" />
<TextView
android:id="@+id/bloodtypeValueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="A"
style="@style/Value"
app:layout_constraintBaseline_toBaselineOf="@id/bloodtypeTextView"
app:layout_constraintEnd_toEndOf="@+id/birthdateValueTextView"
app:layout_constraintStart_toStartOf="@id/guideLine" />
<!-- 비상연락처 -->
<TextView
android:id="@+id/emergencyContactTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="비상 연락처"
style="@style/Title"
app:layout_constraintStart_toStartOf="@id/bloodtypeTextView"
app:layout_constraintTop_toBottomOf="@+id/bloodtypeTextView" />
<TextView
android:id="@+id/emergencyContactValueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="010-0000-0000"
style="@style/Value"
app:layout_constraintBaseline_toBaselineOf="@id/emergencyContactTextView"
app:layout_constraintEnd_toEndOf="@+id/bloodtypeValueTextView"
app:layout_constraintStart_toStartOf="@id/guideLine" />
<!-- 주의사항 -->
<TextView
android:id="@+id/warningTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="주의사항"
style="@style/Title"
app:layout_constraintStart_toStartOf="@id/emergencyContactTextView"
app:layout_constraintTop_toBottomOf="@+id/emergencyContactTextView" />
<TextView
android:id="@+id/warningTextViewValueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="주의사항"
style="@style/Value"
android:maxLines="4"
app:layout_constraintBaseline_toBaselineOf="@id/warningTextView"
app:layout_constraintEnd_toEndOf="@+id/emergencyContactValueTextView"
app:layout_constraintStart_toStartOf="@id/guideLine" />
<!-- value 는 사용자의 입력값에 따라 길이가 변경됨 : Guideline -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4" />
</androidx.constraintlayout.widget.ConstraintLayout>
res > values > styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Title" parent="Widget.AppCompat.TextView">
<item name="android:textColor">@color/brown</item>
<item name="android:textSize">24sp</item>
<item name="android:layout_marginTop">36sp</item>
<item name="android:textStyle">bold</item>
</style>
<style name="Value">
<item name="android:textColor">@color/black</item>
<item name="android:textSize">20sp</item>
<item name="android:gravity">end</item>
</style>
</resources>
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="brown">#E36F0F</color>
</resources>