BirthdayCard App

안드로이드 공식 문서 Kotlin - Basic 과정

 

Empty 템플릿으로 새로운 프로젝트를 만들면

아래와 같은 기본 화면이 생성된다.

 

사용자 인터페이스(UI) 정보

• UI 는 화면에 표시되는 텍스트, 이미지, 버튼, 기타 여러 유형의 요소
• UI 를 통해 앱은 사용자에게 콘텐츠를 표시하고 사용자는 앱과 상호작용을 한다
• 이러한 각 요소를 VIew 라고 하며, 앱 화면에 표시되는 대부분의 내용은 View 이다
• View 는 클릭 가능한 버튼, 수정 가능한 입력란 처럼 상호작용이 가능하다

// activity_main.xml(res > layout > activity_main.xml)을 엽니다

 

1→2→3 순서에 맞춰 Hello World! 를 Happy BirthDay!! 로 수정

 

현재 TextView 삭제

 

 

위의 사진처럼 TextView를 클릭하고 삭제하는 방법과

 

 

code 메뉴에서 삭제하는 방법이있다

 

 

 

다시 TextView 를 만드는 방법은 1번에서 TextView 선택하고 2번으로 드래그 를 하게되면 좌측 하단에 빨간 느낌표가 떠있을 것이다.

// ConstraintLayout 의 특징이다.

뷰를 제한하지않아 앱을 실행할 때 위치가 변동 될 수 있다는 경고이며,

3번에서 레이아웃과 TextView 간의 간격을 정해줘야 한다.

똑같이 하단에도 TextView 를 생성하고 문구를 정해주면 된다.

텍스트 스타일 추가

수정하려는 TextView 를 클릭하고 Attribute 창의 Common Attributes 섹션메뉴를

이용해서 폰트 크기 , 스타일 등을 다양하게 수정할 수 있다

상단 : fontsize 30sp / fontFamily sans-self-light

하단 : fontsize 24sp / fontFamily casual

다음은 배경이미지를 넣어보자

 

 

imageView 를 선택해서 화면 가운데로 드래그 한다

원하는 이미지 선택 후 ok // 안드로이드 공식에서 제공해주는 이미지를 사용

 

이렇게 나오게 된. 공식 가이드를 따라하면 이건 안이쁘다고 하니!

이미지가 꽉 차야 이쁘다고 한다!

Attributes 메뉴 중 scaleType 을 이용해서 이미지 크기를 조정하고 정렬할 수가 있다

scaleType 을 ceterCrop 으로 설정하면 화면에 꽉 차게된다

 

 

이미지를 전체 채웠기에 textView가 실종 ㅡ.ㅡ

이유는 ConstaintLayout 은 레이아웃 View 요소를 추가하면 마지막으로 추가한 View 요소가 이전 요소 위로 덮어지는? 구조이기 때문이다. 지금 imageView 를 전체화면으로 했기에 TextView 가 덮어진 것이다.

 

요소 구조 부분에서 imageView 를 제일 위로 순서를 변경해주면 해결

//안드로이드 kotlin 공식문서 공부

developer.android.com/courses/pathways/android-basics-kotlin-three