안드로이드 공식 문서 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
'Android' 카테고리의 다른 글
[Android]Splash Screen 구현 Java (0) | 2021.09.20 |
---|---|
[Android]그라데이션 적용 -JAVA (0) | 2021.09.18 |
[코틀린] Actiivty 전환하기 (0) | 2021.09.14 |
안드로이드 4대 컴포넌트 (0) | 2021.09.13 |
LauncherApp 만들기 -java (0) | 2021.09.07 |