Baekjakka

ImageView에는 adjustViewBounds라는 속성이 있다. 

adjustViewBounds는 src로 추가된 이미지의 원래 비율을 계산해서 ImageView의 높이가 결정된다.

주의할 점은 이미지의 height은 wrap_content여야 높이를 비율에 맞게 설정할 수 있고,

background가 아닌 src로 drawable이미지를 추가해야 한다.

리사이클러 뷰에서 아이템을 클릭했을 때, 아이템의 데이터를 가지고 새로운 액티비티에 보여주려고 한다.

이 때, 아이템이 점점 커져 화면 전체를 차지해서 보여지도록 만드는게 목표였다.

공부 중에 "android:transitionName" 속성을 이용한 애니메이션 효과를 주면 만들수 있을 것 같았다. 

그래서 먼저, itemView를 클릭했을 때, 새로운 액티비티로 넘어가는 코드를 만들었다.

다음으로 android:transitionName 속성을 itemView와 액티비티에 같은 이름으로 선언하면, 액티비티에서 transitionName속성을 가진 뷰를 시작으로 점점 커지면서 화면을 채워가며 액티비티화면을 보여주게 된다.

반대로 액티비티를 종료할 때는 줄어들면서 화면이 사라진다.

이 때, 액티비티 화면에서는 itemView에서 보여주던 것 보다 더 많은 걸 보여주는데, 화면이 커질 때 부터 보여줘서 보기 좋지 않은 상태가 되었다.

처음에는 ConstraintLayout에서 뷰를 Group으로 묶을 수 있는 기능이 있어서 Group으로 원하는 부분을 묶고, 이곳에 android:transitionName 속성을 주면 되지 않을까 생각했는데 어림도 없었다.

두번 째로는 android:transitionName 속성의 위치를 이동시켰다. 뒤로가기 버튼으로 이동시키자 뒤로가기 버튼부터 화면이 커지기 시작하고 뒤로가기 버튼으로 작아지는 것을 확인했고, android:transitionName 속성을 itemView의 맨앞에 보여지는 title을 보여주는 텍스트뷰에 android:transitionName 속성을 지정해줬더니 텍스트뷰를 기준으로 액티비티화면이 커지고 작아졌다.

아직 조금 아쉽지만 작아질 때 뒤로가기 버튼이나 itemView에서 안보이던 부분들이 보여지는 문제가 남아있었다. 그래서 액티비티를 벗어날 때 itemView에 안보이던 것들을 뷰에서 안보이도록 설정을 바꿔주었더니 원하는 방향이 완성되었다.

머티리얼 디자인 앱의 액티비티 전환은 움직임과 변환을 통해 서로 다른 상태 간의 시각적 연결을 제공한다. 입력 및 종료 전환과 작업 간 공유 요소의 전환에 대한 사용자 정의 애니메이션을 지정할 수 있다.

진입(enter) 전환은 액티비티의 뷰가 장면으로 들어가는 방법을 결정한다. 예를 들어, explode 전환으로 들어갈 때, 뷰가 외부에서 장면으로 들어가 화면 중앙을 향해 날아든다.

종료(exit) 전환은 액티비티의 뷰가 장면으로 들어가는 방법을 결정한다. 예를 들어, explode exit 전환에서, 뷰는 화면을 중앙에서 멀리 벗어난다.

공유 요소(shared elements) 전환은 두 액티비티 사이에 공유되는 관점이 이들 액티비티 사이에 어떻게 전환되는지를 결정한다. 예를 들어, 두 액티비티가 서로 다른 위치와 크기로 동일한 이미지를 갖는 경우, ChangeImageTransform 공유 요소 전환은 이러한 액티비티 사이에서 이미지를 원활하게 변환하고 스케일을 조정한다. 

안드로이드에서 진입(enter)와 종료(exit)전환을 지원한다.

• explode - 뷰를 화면 중심으로 이동하거나 벗어나게 한다.
• slide - 뷰를 화면의 가장자리로 이동하거나 벗어나게 한다.
• fade - 화면을 투명, 불투명하게 바꿈으로 화면에서 제거하고 추가한다.

Visibility 클래스를 상속하는 모든 전환은 진입(enter) 또는 종료(exit) 전환을 지원한다.

자세한 내용은 Transition 클래스에 대한 API에서 확인할 수 있다.

안드로이드는 공유 요소(shared elements) 전환도 지원한다.

• ChagneBounds - 대상 뷰의 layout bounds 변경 애니메이션
• ChangeClipBounds - 대상 뷰의 clip bounds 변경 애니메이션
• ChangeTransform - 대상 뷰의 scale 및 rotation의 변화 애니메이션
• ChangeImageTransform - 대상 이미지의 size 및 scale 변경 애니메이션

앱에서 액티비티 전환을 활성화하면, 기본으로 cross-fading 전환이 활성화된다.

액티비티 전환 API는 Android 5.0(API 21)이상에서 사용할 수 있다. 이전 버전의 Android와의 호환성을 유지하려면 API를 호출하기 전에 런타임에 시스템 버전을 확인해야한다.

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

사용자(Custom) 지정 전환

첫째, 머티리얼 테마에서 상속되는 스타일을 정의할 때 android:windowActivityTransitions 속성을 사용하여 화면 내용 전환을 사용하도록 설정한다. 또한 스타일 정의에서 진입(enter), 종료(exit) 및 공유 요소(shared element)전환을 지정할 수도 있다.

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

이 예에서 chagne)image_transform 전환은 다음과 같이 정의한다.

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

ChangeImageTransform 요소는 ChangeImageTransform 클래스에 해당한다. 

대신 코드에서 창 내용 전환을 활성화하려면 Window.requestFeature()함수를 호출한다.

https://woochan-dev.tistory.com/45

https://boheeee.tistory.com/14

http://uidesignguides.com/%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%EB%B3%84-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%A7%80%EC%9B%90-%EC%86%8D%EC%84%B1/

https://developer.android.com/guide/topics/graphics/prop-animation

애니메이션으로 상태 변화나 전환을 설명하거나, 공간 모델을 확립하거나, 주의를 끌 수 있다.

애니메이션은 사용자가 앱을 올바로 이해하고 원하는 화면으로 이동하는데 도움이 된다.

애니메이션이 없는 경우 무엇이 바뀌었는지 설명없이 확 바뀌는 느낌이 든다. 

반응형 환경에서 애니메이션을 작성할 때 애니메이션 코드에 필요한 몇가지 특성이 있다.

• 재진입(Reentrant)
• 연속(Continuous)
• 매끄러움(Smooth)

재진입(Reentrant)

애니메이션을 언제든지 중단했다가 다시 호출할 수 있어야 한다는 의미이다. 

새로운 상태 객체가 게시되는 경우, 애니메이션이 실행 중인 동안에도 상태에 맞는 애니메이션이 바인딩 될 수 있도록 애니메이션을 준비해야 한다. 실행중인 애니메이션을 취소 또는 다시 타게팅할 수 있거나, 잠재저긴 역효과를 모두 없앨 수 있어야 한다.

연속 (Continuous)

애니메이션되는 값에 갑작스러운 변화가 생지기 않도록 한다. 

애니메이션을 끝까지 실행하면 모든 모습이 보기 좋지만, 그러지 않고 빠르게 탭하면 애니메이션의 크기와 색상이 불연속적으로 변한다.

매끄러움 (Smooth)

뷰를 상단 오른쪽으로 두 차례 연속으로 빠르게 보내는 경우, 뷰가 중간에서 멈춘 후에 목적지를 향해 천천히 움직이거나, 이동 중간에 목적지를 바꾸면 뷰가 다시 멈추었다가 갑자기 방향을 바꾸는 이런 갑작스러운 정지나 방향 변화는 부자연스러워 보인다. 현실 세계에서는 이런식으로 움직이지 않기 때문이다. 따라서 애니메이션을 계속 매끄럽게 유지하도록 해야 한다.

Springterlude

스프링은 '동적 애니메이션' Jetpack 라이브러리의 일부이다. 많은 사람이 매우 탄력있는 애니메이션 예시를 보면서 이 라이브러리를 그냥 건너뛰었을지도 모른다. 이 효과를 유용하게 활용할 수도 있지만, 늘 필요하거나 바람직한 것은 아니라서 그럴 것이다. 하지만 이런 탄력성은 비활성화하고 애니메이션을 중단하고 다시 시작하는 기능 및 일반적인 애니메이션에 유용한 여러가지 속성을 가진 물리애니메이션 시스템으로 사용할 수 있다.

스프링 애니메이션으로 구현하면 부드러움 문제가 생기지 않는다는 점을 확인할 수 있다. 

SpringAnimation 작성은 일반적인 애니메이터와 많은 면에서 흡사한데, start()를 호출하는게 아니라 animateToFinalPosition메서드를 사용하는 점이 큰 장점이다. 이 메서드는 애니메이션이 아직 시작되지 않은 경우 애니메이션을 시작하는 역할을 하지만, 애니메이션이 실행 중인 경우에는 애니메이션을 새 목적지로 리타게팅하여 갑자기 변경하지 않고 모멘텀을 유지한다는 점이 중요하다.

Reference

• https://developers-kr.googleblog.com/2019/09/motional-intelligence-build-smarter-animations.html
• https://developer.android.com/guide/topics/graphics/spring-animation#lifecycle-of-spring-animation
  

패키지 명 (Package Name)

• 앱을 구분하는 정보이므로 고유한 값을 설정하는게 좋다.
• Play스토어에 등록할 때 첫 화면에서 지정한 패키지 명과 다른사람이 등록한 패키지 명이 달라야 한다
  
  • com.회사이름.프로그램이름
  • com.회사이름.플랫폼.프로그램이름
  • kr.co.회사이름.프로그램이름
  • kr.co.회사이름.플랫폼.프로그램이름
• 플레이 스토어에 com.example.~~~~.~~~~ 는 제한되어 있다.
•  

명명 규칙

• 웹사이트를 반대로 기재한 형태로 작성한다.
• 소문자를 사용한다.
• 소스 파일들을 각각의 그룹으로 구분하기 위해 점( . )을 사용한다.
• 패키지 이름으로 소스가 들어가는 폴더가 자동으로 생성된다.

앱 이름 수정하기

/res/values/string.xml에서 <string name="app_name">수정할 이름</string> 이 부분을 수정해주면 된다.

앱 실행 아이콘 수정하기

File -> New -> Image Asset 클릭하여 실행 아이콘 만들기.

Manifest.xml에 만든 아이콘으로 설정해주기

색상 변경하기

• colorPrimary : 애플리케이션의 주 색상이다. (타이틀 바의 색상이 변경된다.)
• colorPrimaryDark : 주 색상 계통에서 조금 더 어두운 색상이다. 상태바 색상을 별도로 지정하지 않을 경우 상태바 색상으로 사용된다. ( 최상단에 데이터통신상태표시, 시간표시, 배터리 표시되는 상태바의 색상이 변경된다.)
• colorAccent : 보통 주 색상과 대비되는 색상을 지정한다. 중요하나 역할을 하는 UI요소에 주로 사용한다.
• colorControlNormal : 컨트롤러에 사용한다. 비활성 상태/선택한 상태 등이 아닌 일반적인 상태에 적용한다.
  (예: EditText, 체크박스, 라디오 버튼, 프로그래스 바)
• colorControlHighlight : 컨트롤러를 터치하거나 선택되었을 때 표시할 색상이다. 
• android:navigationBarColor : 네비게이션 바 색상이다. (API Level 21(Android 5.0) 이상에서만 사용 가능하다.)

텍스트 뷰

• text 속성에 직접 글자를 넣을 수도 있지만, /res/values 폴더 안에 들어있는 strings.xml에 넣어둔 태그의 값으로 설정할 수 있다
• text 속성의 값으로 @string/태그네임 으로 넣어줄 수 있다. 

위 방식은 다국어를 설정할 때 유용하다.

/res/values-en 폴더와 /res/values-ko 폴더를 만들고 그 안에 strings.xml 파일을 같이 넣어주었다면 @string/name으로 참조하는 글자는 단말의 Locale에 따라 달라집니다. 

단말이 한국어로 설정되어 있다면 /res/values-ko/strings.xml 파일 안에 들어있는 name 태그의 값을 가져옵니다.

버튼 

• 텍스트뷰를 상속하여 만들어졌기 때문에 TextView에서 Button으로 바꾸기만 해도 버튼이 화면에 보이게 된다.
• 텍스트뷰의 속성외에 추가적인 기능이나 속성을 가지고 있다.
• 라디오 버튼이나 체크박스 등으로 나누어 사용될 수 있다.
• 라디오 버튼은 라디오그룹을 이용해 하나의 그룹으로 묶어줄 수 있다. ( 체크박스: 중복선택, 라디오버튼:단일선택)

라디오버튼을 그룹으로 만들기

<RadioGroup
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  
  <RadioButton
    android:id="@+id/radio1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="남자" />
  <RadioButton
    android:id="@+id/radio2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="여자" />
    
</RadioGroup>

EditText (PlainText)

• 텍스트를 입력받고 처리하는 기능을 제공
• inputType을 지정할 수 있다.
• hint 속성을 이용하여 안내글을 표시할 수 있다.

이미지 뷰 

• 이미지를 보여준다.
• Drawable폴더에 이미지를 넣을 때 이미지 파일의 이름은 소문자와 특수기호 중 언더스코어만 넣을 수 있다는 점에 주의해야 한다.
• 이미지 파일의 확장자는 jpg, png, gif 등이 가능하며, 그중에서 png형식의 이미지를 권장한다.
• scaleType속성은 이미지가 영역을 꽉 채울 것인지 아니면 이미지 원본의 크기대로 보여줄 것인지 등을 결정하는데 사용된다.

뷰가 background속성을 이용하면 배경색을 지정할 수도 있고 /res/drawable 폴더에 넣어둔 이미지 파일을 배경으로 할 수도 있다. 그런데 배경으로 설정하면 이미지는 아무런 변화가 없다. 버튼이 눌렸을 때 눌린 이미지가 보이도록 하고 싶은 경우에는 드로어블을 사용하면 된다.

드로어블을 사용하면 뷰나 화면 일부를 그래픽으로 그리는 기능을 XML로 만들 수 있다.

드로어블 ( Drawable )

• Drawable은 뷰에 설정할 수 있는 객체이며 그래픽으로 그릴 수 있다.
• Drawable은 소스 코드에서 만들 수도 있지만 XML로 만들어 사용하는 경우가 많다.
• /res/drawable 폴더에서 우클릭 -> New -> Drawable resource file로 파일을 만들고 코드를 작성한다.
• 이미지 파일을 보여주는 상태 드로어블, 두 개의 드로어블 간에 바뀌도록 만드는 전환 드로어블, 색상과 그라데이션을 포함하여 도형 모양을 정의할 수 있는 쉐이프 드로어블 등이 있다.
• 지정한 거리만큼 안쪽으로 들어오도록 만들 수 있는 인셋 드로어블(InsetDrawable)은 뷰가 실제 범위보다 작은 백그라운드가 필요할 때 유용하게 사용된다.
• 다른 드로어블을 클리핑하는 클립 드로어블은 진행률 표시 줄과 같은 항목을 구현하는데 많이 사용한다.
• 그 외로 다른 드로어블의 크기를 바꿀 수 있는 스케일 드로어블도 있다.

상태 드로어블 ( StateListDrawable )

• 뷰의 상태에 따라 보여줄 그래픽을 다르게 지정할 수 있도록 한다.
• 최상위 태그는 <selector>이다.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"  
	 android:drawable="@drawable/up_selected" />

    <item android:drawable="@drawable/up" />
</selector>

state_ 로 시작하는 속성은 상태를 나타낸다. pressed는 눌린 상태를의미하고 focused는 포커스를 받은 상태를 의미한다.

속성이 지정되지 않으면 drawable 속성에 up이미지가 디폴트 이미지로 보여진다.

<Button
    android:id="@+id/button"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@drawable/up" />

/res/drawable 폴더 안에 up.xml 을 배경으로 설정하면 적용 된다.

쉐이프 드로어블 (Shape Drawable)

• 최상위 태그를 <shape>로 바꾸면 도형 하나를 정의할 수 있다.
• Design탭에서 작성한 모양을 확인할 수 있다.
• shape태그에 shape속성을 이용해 모양을 설정할 수도 있다.
• <stroke>는 테두리 선의 속성을 지정하며, width는 선의 굵기, color는 선의 색상을 설정한다.
• <solid>는 도형의 안쪽을 채울 때 사용한다.
• <gradient>는 그라데이션을 줄 때 사용한다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:width="200dp" android:height="120dp"/>
    <stroke android:width="1dp" android:color="#0000ff"/>
    <solid android:color="#aaddff" />
    <padding android:bottom="1dp" />

</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="#7288DB"
        android:centerColor="#3250B4"
        android:endColor="#254095"
        android:angle="90"
        android:centerY="0.5"
        />

    <corners android:radius="2dp" />

</shape>

테두리만 있는 버튼 배경

• 최상위 태그는 <layer-list>이며, 여러 그래픽을 하나의 XML 파일에 넣을 수 있다.
• <layer-list>안에 <item> 태그가 여러개 들어갈 수 있으며, <item>태그 안에는 <shape> 태그가 들어갈 수 있어 각각을 도형으로 정의할 수 있다.
• 버튼의 테두리만 보이게 하는 드로어블을 만들고 싶다면 도형 안쪽을 투명하게 채우고 테두리 선만 색상을 주면 된다.
• 여러 개의 그래픽으로 나누면 그래픽을 중첩시켜서 좀 더 예쁜 배경을 만들 수 있다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" 
          android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

</layer-list>

Reference

• https://www.edwith.org/boostcourse-android/joinLectures/13158

서버에 EditText에 입력한 값이 유효한지 확인하는 부분을 만들어야하는중에 TextWatcher를 설명하는 글을 보게 되었다. TextWatcher를 통해 입력이 끝났을 때 발생하는 event가 실행된다는 설명들을 볼 수 있었는데, 간단히 설명된 글들도 많고 감이 잘 잡히지 않아, 언제 호출되는지 테스트해보기로 했다.

테스트하며 작성한 코드와 주석을 첨부했다.

        /* 1차 테스트
        - 이벤트가 호출되는 시점을 알아보기 위해 println()으로 호출되었음을 확인해보기

        결과
        - 글자 하나를 입력할 때 마다 3개의 이벤트가 모두 호출됨
        - 작성 전, 작성 중, 작성 끝 순으로 키보드 한번 입력마다 3개의 이벤트가 모두 호출됨

        생각했던 예상
        - 입력시작하려할 때 작성 전 이벤트 발생후, 텍스트를 연속으로 작성하는 동안 작성 중, 멈추면 작성 끝이 나올 것이라 생각했음
        */

        /* 2차 테스트
        - 각 단계에서 입력중인 텍스트의 값을 찍어보기

        결과
        - 작성전(before) : 새로운 텍스트가 입력되기 전의 Text값을 가져옴
        - 작성중(on) : 새로운 텍스트가 입력된 값을 가져옴
        - 작성끝(after) : onTextChanged와 같은 값을 가져옴
        - "곡 -> 고기" 로 변할 때 최종적으론 고기가 작성중과 작성끝에서 값을 다 가져오지만
          "고기" 를 가져오기 전
          before: 곡, on : 고, after: 고
          before: 고, on : 고기, after : 고기     이렇게 읽어옴

          생각했던 결과
          before와 on, after에서 읽어올 때 생각했던 부분이 일부 맞았음
          받침있는 글자에서 새로운 글자로 변할 때 위와 같은 순차가 아니라 before: 곡, on,after: 고기 이렇게 한번에 가져올 것이라 생각했던 부분이 다름
        */

        /* 정리
        텍스트 작성이 완료된 시점에 서버의 데이터와 비교하기위해 이벤트 발생 시점과 읽어오는 값을 테스트하게 되었고,
        이벤트 발생이 키입력 한번마다 일어나서 서버쪽 데이터와 비교하는걸 이 부분에 만들게되면 너무 잦은 request를 보내게되어 부적합하다고 생각함.

        작성을 완료하고 해당 값이 정상적인 값인지 확인하는 버튼을 두는 방식으로 만들어야겠음.
         */
        editText.addTextChangedListener(object : TextWatcher {
            override fun afterTextChanged(s: Editable?) {
                showMessage("afterTextChanged", "입력이 완료되었습니다3", editText.text.toString())
                showLine()
            }

            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
                showMessage("beforeTextChanged", "입력하기 전입니다1", editText.text.toString())
            }

            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                showMessage("onTextChanged", "타이핑 중입니다2", editText.text.toString())
            }
        })

아래는 실행해본 결과이다.

간단히 "고기"라고 입력을 하며 확인한 화면 중 일부이다.

입력이 완료되었다는 설명을 읽었을 때 고기라고 멈추지않고 입력했을 때, "고기"의 입력이 끝나고 이벤트가 발생될 것이라 생각했었지만, 키입력 한번이 끝날때마다 입력 완료 이벤트가 발생했다.

키 입력마다 이벤트의 발생이 일어나 서버의 데이터와 확인하는 부분을 이곳에 만들면 너무 많은 request가 발생하게 되어 적합하지 않다는 결론을 내리게 됐다.

권한은 왜 필요할까?

안드로이드에서 권한의 목적은 사용자의 개인정보를 보호하는 것입니다. Android앱은 사용자의 민감한 데이터와 특정 시스템 기능을 실행할 때 권한을 요청해야 합니다. 주로 사용자의 연락처나 SMS데이터에 접근해야할 때나 카메라 및 인터넷을 사용해야 할때 사용자에게 요청을 승인받아야 합니다.

Android 보안 아키텍처의 중심 디자인 포인트는 기본적으로 앱에 다른 앱, 운영체제 또는 사용자에게 부정적인 영향을 줄 수 있는 작업을 수행할 권한이 없다는 것입니다. 

• 사용자의 개인 데이터를 읽거나 쓰기
• 다른 앱의 파일을 읽거나 쓰기
• 네트워크 액세스를 수행하고, 장치를 깨운 상태로 유지하는 것
• 등등

이 글에서 알아볼 것은 다음과 같습니다.

• 사용자에게 권한이 제공되는 방식
• 설치 시간과 런타임 권한 요청의 차이점
• 권한이 적용되는 방식
• 권한 유형 및 그룹과 같은 Android 권한의 작동 방식

권한 승인받기

App은 Manifest 파일에 <uses-permission>태그를 포함하여 필요한 권한을 공개해야합니다.

예를 들어 SMS를 보내야할 때 아래와 같은 코드를 작성해야 합니다.

공부를 하며 작성하는 포스트입니다. 완벽하진 않지만 최대한 이해하고 작성하려고 합니다. 잘못된 점은 알려주세요.

다시한번 원문을 읽으며 느낀 점은 읽는데 무리없도록 영어도 계속해서 공부해야겠습니다.

Android 사용자는 앱이 플랫폼과 일관된 방식으로 보이고 동작하기를 기대합니다. 개발자는 시각적 패턴 및 탐색 패턴을 위해 머티리얼 디자인 가이드라인을 준수해야 할 뿐만 아니라 호환성, 성능, 보안 등을 위해 품질 가이드라인을 준수해야 합니다.

다음 링크에서는 고품질의 Android 앱을 디자인하는데 필요한 모든 것을 제공합니다.
머티리얼 디자인 가이드라인
앱 품질 가이드라인

출처 : https://developer.android.com/design

1. Introduction

Material Design은 기술과 과학의 혁신으로 좋은 디자인의 고전적인 원칙을 종합한 시각적 언어입니다.

Goals : 목표

Create : 기술과 과학의 혁신과 가능성을 바탕으로 우수한 디자인의 고전적 원칙을 합성하는 시각적 언어를 만듭니다.

Unify : 플랫폼, 장치 및 입력 방법에서 사용자 경험을 통합하는 단일 기본 시스템을 개발하세요.

Customize : Material의 시각적 언어를 확장하고 혁신과 브랜드 표현을위한 유연한 기반을 제공하세요.

Principles: 원칙

• Material is the metaphor
  머티리얼 디자인은 빛을 반사하고 그림자를 드리우는 방법을 포함하여 실제 세계와 텍스처에서 영감을 얻었습니다. 재료 표면은 종이와 잉크의 매체를 재구성합니다.
• Bold, graphic, intentional
  머티리얼 디자인은 typography, grids, space, scale, color and imagery와 같은 인쇄 디자인 방법에 따라 안내되어 경험에 시청자를 몰입시키는 계층, 의미 및 초점을 만듭니다. 
• Motion provides meaning
  모션은 미묘한 피드백과 일관된 전환을 통해 주의를 집중시키고 연속성을 유지합니다. 요소가 화면에 표시되면 새로운 변환을 생성하는 상호 작용으로 환경을 변환하고 재구성합니다.
• Flexible foundation
  머티리얼 디자인 시스템은 브랜드 표현이 가능하도록 설계되었습니다. 구성 요소, 플러그인 및 디자인 요소를 원활하게 구현할 수 있는 사용자 지정 코드베이스와 통합되었습니다.
• Cross-platform
  머티리얼 디자인은 Android, iOS, Flutter 및 웹에서 공유 구성 요소를 사용하여 플랫폼에서 동일한 UI를 유지 관리합니다.

Getting around : 둘러보기

구글의 포괄적인 지침을 통해 아름다운 제품을 더 빠르게 만들 수 있습니다. 사용자 정의 머티리얼 및 작업 공유를위한 새로운 도구를 사용하여 설계 및 제작하고 머티리얼 스터디에서 영감을 찾고 머티리얼 테마로 제품의 고유한 정체성을 표현하세요. 

다음 세 섹션을 탐색하여 필요한 것을 찾으세요.

• Material Systeme
  확장 및 개선 된 설계 시스템은 재료 도구 및 구성 요소와 통합되어 설계와 개발 간의 워크 플로우를 향상시킵니다.
• Material Foundation
  머티리얼 디자인 아키텍처를 사용하여 앱을 구축하는 방법을 디자인하고 전략을 세우면서 머티리얼 디자인을 뒷받침하는 원칙과 이론을 배우세요.
• Material Giudelines
  디자인부터 코드까지 제품 전체에 걸쳐 고유한 재료 테마를 체계적으로 사용자 정의하고 구축하세요.

이전 머티리얼 가이드라인을 살펴볼 수 있습니다.

Up next

• MATERIAL STUDIES : About
• ENVIRONMENT : Elevation
• SHAPE : About Shape

References

• 머티리얼 디자인