티스토리 뷰

Android

New Components in Design Support Library v28

개발자 요콩 2018.07.27 13:42

Material Design을 도와주기 위해 제공 되었던 Android Disign Support Libray가 v28이 공개 되었습니다.


현재는 alpha3 버전으로 사용할 수 있습니다.


v28 에서 어떤 컴포넌트가 추가 되었고 어떻게 사용 되는지 알아 보겠습니다.


현 시점 최신 버전인 alpha3 버전으로 작성합니다. 업데이트 되면서 api들이 바뀌는 부분이 보이고 있습니다. 


준비 과정

1. App 레벨의 build.gradle 에 정의

implementation 'com.android.support:design:28.0.0-alpha3'


2. Material Style 정의 

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">





이제 준비 되었으니 각각의 컴퍼넌트를 추가하면서 살펴 보겠습니다.



Material Button

  •  Icon 이미지를 텍스트와 함께 넣고 위치조절이 가능 합니다.
  •  Ripple, Tint 컬러 설정 가능합니다.
  •  Stroke, Corner 를 지원 하면서 xml로 shape 만들어 쓰던걸 편하게 쓸수 있게 되었습니다.


<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON"

app:icon="@drawable/ic_android_black_24dp"
app:iconTint="@color/colorAccent"
app:iconPadding="20dp"
app:additionalPaddingStartForIcon="20dp"
app:additionalPaddingEndForIcon="20dp"

app:backgroundTint="@color/colorPrimaryDark"
app:backgroundTintMode="src_in"

app:rippleColor="#FF0000"

app:strokeColor="@color/colorAccent"
app:strokeWidth="2dp"

app:cornerRadius="10dp"
/>




Material CardView

  • Stroke 로 아웃라인과 넓이를 지정할 수 있습니다.


<android.support.design.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:strokeColor="#FF0000"
app:strokeWidth="2dp"
android:layout_margin="30dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MaterialCardView11111" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MaterialCardView22222"
android:layout_marginTop="5dp" />
</LinearLayout>
</android.support.design.card.MaterialCardView>


Chip

  •  새롭게 Chip이라는 컴퍼넌트가 등장 했습니다. 
  •  Text를 가지면 버튼과 비슷하게 동작합니다.
  •  android:checkable="true" 지정하면 클릭 시 체크 박스가 나타났다 사라졌다 합니다.
  • alpha1 에서는 app:chipText 로 텍스트 지정했는데 alpha3 에서는 사용할 수 없어서 android:text 로 지정하니 정상적으로 텍스트 출력 되었습니다.

<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"/>


Chip Group

  • Chip을 묶어서 보여 줍니다.
  • Chip의 크기에 따라 자동으로 레이아웃이 지정됩니다.
  • app:singleSelection을  지정하면 그룹내에 하나의 Chip만 체크박스 표시되고, 이전 체크된 Chip은 자동으로 해제 해 줍니다.
  • app:checkdChip 으로 Chip 체크를 초기화 할 수 있습니다.

<android.support.design.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipSpacingHorizontal="10dp"
app:chipSpacingVertical="5dp"
app:checkedChip="@id/chip_android"
app:singleSelection="true"
android:layout_marginTop="30dp">

<android.support.design.chip.Chip
android:id="@+id/chip_android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
android:checkable="true" />

<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java"
android:checkable="true"
/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kotlin"
android:checkable="true" />
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IOS"
android:checkable="true" />
</android.support.design.chip.ChipGroup>


Bottom App Bar

  • 구글에서 분석한 UX 에선 상단 앱바에 문제가 있었는지...하단 앱바가 등장 했습니다.
  • CoordinatorLayout과 함께 사용해야 합니다.
  • AppBar와 FloatingActionButton 이 자연스럽게 위치 할 수 있습니다.
  • fabAlignmentMode 로 FloatingActionButton을 중앙과 끝에 위치를 지정할 수 있습니다.

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
app:layout_anchor="@id/bottom_app_bar"/>

<android.support.design.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabAttached="true"
app:fabAlignmentMode="end"
app:backgroundTint="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.CoordinatorLayout>



새롭게 추가된 컴퍼넌트를 봤습니다. 아직 Alpha 버전인 만큼 정식버전에서는 어떻게 변경 될지는 모르겠지만 


개발자가 레이아웃을 이뿌고 편하게 만들 수 있도록 발전 하는 모습이 보이네요



Design Support Library 를 사용해서 이쁜 앱을 만들어 봅시다!!!



참조 사이트 

Material Design 사이트 https://material.io/develop/


테스트 샘플코드 https://github.com/ykyahwa/SampleProject/tree/master/SupportDesignV28


Java Codelab https://codelabs.developers.google.com/codelabs/mdc-101-java/#0


Kotlin Codelab https://codelabs.developers.google.com/codelabs/mdc-101-kotlin/#0





댓글
댓글쓰기 폼