1. 소개
머티리얼 구성요소(MDC)를 통해 개발자는 머티리얼 디자인을 구현할 수 있습니다. Google의 엔지니어와 UX 디자이너로 구성된 팀에서 만든 MDC는 아름답고 기능적인 수십 가지의 UI 구성요소가 특징이며 Android, iOS, 웹, Flutter.material.io/develop에서 제공됩니다. |
Android용 Material 구성요소 (MDC Android)는 앱의 패러다임 전환이 필요한 새로운 시스템이나 프레임워크가 아닙니다. MDC Android는 AppCompat 버튼, 텍스트 필드 등 Android에서 이미 알고 있는 동일한 클래스와 API를 기반으로 빌드됩니다. MDC Android에서 제공하는 구성요소를 필요에 따라 사용하여 기존 앱을 즉시 디자인 개선할 수 있습니다.
빌드할 항목
이 Codelab에서는 양식의 기존 구성요소를 MDC의 새 구성요소로 대체합니다.
이 Codelab의 MDC-Android 구성요소
- 입력란
- 버튼
- 메뉴
필요한 항목
- Android 개발에 관한 기본 지식
- Android 스튜디오(아직 다운로드하지 않은 경우 여기에서 다운로드)
- Android Emulator 또는 기기(Android 스튜디오를 통해 사용 가능)
- 샘플 코드(다음 단계 참고)
Android 앱 빌드 경험 수준을 평가해 주세요.
2. 개발 환경 설정
시작 Codelab 앱 다운로드
시작 앱은 material-components-android-codelabs-111-starter/kotlin 디렉터리에 있습니다. 시작하기 전에 해당 디렉터리로 cd해야 합니다.
...또는 GitHub에서 클론
이 Codelab을 GitHub에서 클론하려면 다음 명령어를 실행하세요.
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Android 스튜디오에서 시작 코드 로드
- 설정 마법사가 완료되고 Welcome to Android Studio 창이 표시되면 Open an existing Android Studio project를 클릭합니다. 샘플 코드를 설치한 디렉터리로 이동하고 kotlin -> shipping을 선택하거나 컴퓨터에서 shipping을 검색하여 Shipping 프로젝트를 엽니다.
- Android 스튜디오 창 하단의 활동 표시기에 나타나는 것처럼 Android 스튜디오가 프로젝트를 빌드하고 동기화할 때까지 잠시 기다립니다.
- 이 시점에서 Android 스튜디오에 아래와 같은 빌드 오류가 발생할 수 있습니다. Android SDK나 빌드 도구가 누락되었기 때문입니다. Android 스튜디오의 안내를 따라 이러한 항목을 설치/업데이트하고 프로젝트를 동기화합니다.
시작 앱 실행
|
|
완료되었습니다. 앱과 양식이 표시됩니다.
3. 텍스트 필드 업데이트
Material Design 텍스트 필드는 일반 텍스트 필드보다 사용성이 크게 향상되었습니다. 아웃라인이나 배경 채우기로 히트존을 정의하면 사용자가 양식과 상호작용하거나 더 복잡한 콘텐츠 내에서 텍스트 필드를 식별할 가능성이 높아집니다.
MDC-Android 가져오기
app 모듈의 build.gradle 파일로 이동하여 dependencies 블록에 MDC Android의 종속 항목이 포함되어 있는지 확인합니다.
api 'com.google.android.material:material:1.1.0-alpha05'
텍스트 필드 스타일 바꾸기
shipping_info_activity.xml에서 모든 TextInputLayout XML 구성요소에 다음 스타일을 추가합니다.
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
각 TextInputLayout은 다음과 같아야 합니다.
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
빌드 및 실행:
텍스트 필드가 모두 MDC의 최신 디자인을 사용하도록 업데이트됩니다.
오류 추가
MDC 텍스트 필드에는 오류 표시가 내장되어 있습니다. MDC는 텍스트 필드 아래에 빨간색 텍스트를 추가하고 장식도 빨간색으로 업데이트합니다.
ShippingInfoActivity.kt에서 onCreate()를 업데이트하여 텍스트 입력을 확인하고 적절하게 오류를 설정합니다. 다음과 같이 표시됩니다.
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
빌드하고 실행합니다. 저장을 누르되 하나 이상의 텍스트 필드는 비워 둡니다.
비어 있는 텍스트 필드는 빨간색으로 표시되고 아래에 오류 텍스트가 표시됩니다.
4. 버튼 업데이트
MDC에는 다음이 포함된 버튼이 있습니다.
- 잉크 물결
- 둥근 모서리
- 테마 지원
- 픽셀 단위로 완벽한 레이아웃과 서체
- AppCompatButton (표준 Android 버튼 클래스)을 기반으로 빌드되므로 코드에서 사용하는 방법을 알 수 있습니다.
선택적으로 버튼 클래스 바꾸기
기본적으로 Material 라이브러리는 일반 버튼을 MDC 버튼으로 자동 확장합니다. 하지만 MaterialButton에서만 사용할 수 있는 추가 메서드(예: 모서리 반경 변경)에 액세스할 수 있도록 Button에 대한 모든 참조를 MaterialButton으로 선택적으로 바꿀 수 있습니다. MDC 버튼은 간단한 플러그 앤 플레이 구성요소입니다. XML 구성요소 이름 Button를 MaterialButton로 바꾸고 기본 MaterialButton 스타일을 MaterialButton에 적용하면 됩니다.
shipping_info_activity.xml에서 버튼을 다음에서
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
받는사람:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
빌드 및 실행:
5. 카드 추가
MaterialCardView은 다음이 포함된 CardView 기반 구성요소입니다.
- 고도 및 스타일 수정
- 획 너비 및 색상 속성
카드로 콘텐츠 래핑
다음과 같이 콘텐츠가 포함된 LinearLayout을 MaterialCardView 구성요소가 있는 shipping_info_activity.xml로 래핑합니다.
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
빌드하고 실행합니다. 전체 양식은 카드에 래핑되어야 합니다.
Material 카드 뷰 구성요소는 콘텐츠를 카드에 쉽게 래핑할 수 있는 친숙하면서도 새로운 방법입니다.
6. 요약
텍스트 필드, 버튼, 카드와 같은 일반적인 구성요소를 교체하여 즉각적인 가치를 보여주었으며 앱을 완전히 재설계하지 않아도 되었습니다. 상단 앱 바와 TabLayout과 같은 다른 구성요소도 큰 차이를 만들 수 있습니다.
다음 단계
Android Widgets Catalog를 방문하여 MDC-Android의 더 많은 구성요소를 살펴볼 수 있습니다.