[APP 개발] 안드로이드 스튜디오 UI 구성 뷰(View) 간단 설명

 

 

안드로이드 앱에서

사용자가 보는 화면은 Activity 라고 합니다.

그리고 그 안에서

 

 

Wolfy App, Contents1, 등을 View라고 부릅니다.

 

명칭이 그냥 그런거니까 머리속에 기억하고 가시는게 좋습니다.

유니티에서는 Activity 즉, 화면을 Scene, View를 각각 오브젝트라고 부르는 것들입니다.

 

ㅇ앱 화면 만드는 방법

 

UI를 만들 때 Activity에 View를 구성하는 방법으론

자바 코드로도 가능하고, XML로도 Design, 작성이 가능합니다.

 

자바 코드로 접근하기에는 처음에 외워야 할 게 좀 있으니

화면 구성은 그냥 끌어다 쓰는게 초심자가 쓰기에 좋습니다.

 

 

 

XML파일에서 Design을 누르면 드래그 & 드롭으로 각각의 요소들을 끌어다가 화면을 구성할 수 있습니다.

 

TextView : 문자들을 나타내는 Box

Button : 클릭 되었을 때 자바 코드로 작성된 이벤트를 받아 실행하는 애

ImageView : 이미지를 나타내는 Box

ScrollView : 한 Box에서 여러개의 컨텐츠를 보여주고 싶을 때 쓰는 애

Switch : On Off가 가능한 스위치

 

Text를 클릭하면 

 

 

XML기반 언어로 작성해서 쓸 수 있는데

세부적으로 조정해야 할 필요가 있을 때 쓰시면 됩니다.

 

XML Text로 작성할 때에는

Design에 있는 단어들을 그대로 사용하면 됩니다.

(TextView, Button 같은)

 

ㅇView의 계층 구조

 

UI를 구성할 때 중요한 것은 어떤 Box안에 Box를 채워넣을 수 있다는 것입니다.

 

 

ScrollView에 저렇게 1,2,3이라는 사진을 넣어놓으면 그 안에서

저 이미지들이 좌우 혹은 상하로 이동할 수 있습니다.

이렇게 어떤 View 안에 다른 View를 넣어 화면구성을 할 수 있습니다.

 

이것이 View의 계층 구조라는 개념입니다.

 

ㅇView의 크기 조절

 

앱을 개발할 때 가장 중요한 것은 사용자가 보는 화면을 일관성있게, 혹은 최적화해서 보여주는 것입니다.

View의 크기를 조절하는 게 가장 중요한데

layout_width, layout_height라는 속성값을 적절하게 변경해주어야 합니다.

android:layout_width ="match_parent"

이건 부모View의 크기에 맞추겠다는 것이고

(부모View가 없으면 핸드폰 화면에 맞추는 것)

 

android:layout_height = "wrap_content"

이것은 안드로이드가 자체적으로 안에 들어있는 내용물에 따라

크기를 자동으로 조절해주는 것입니다.

 

margin, padding도 중요한데

 

 

margin은 View와 View 사이

padding은 View 내부 공간

 

패딩입으면 바깥과 몸사이에 공간생기잖아요 ? 그런느낌

(ㅈㅅ)

 

ㅇid 속성

 

만약에 사용자에 따라 다른 상품을 보여주고 싶다면 어떻게 할까요?

View에 id라는 속성값을 줘서 Java로 해당 언어를 참조해서 변경해주면 됩니다.

 

 

저 findViewById(R.id.switch1)는 자주 사용하니 외우시면 되는데 

XML의 @+id/switch1과 자바의 R.id.switch1은 서로 같은 것을 지칭합니다.

 

 

표기법만 잘 알아두시면 서로 다른곳에서 사용할 때 어떻게 바꿔서 사용해야 할지 감이 올겁니다.

 

Visibility 속성

Visibility 도 중요합니다. 필요한 상황에 보여주기 위해서 사용하는 것으로

 

visibility의 속성에는

visible, invisible, gone이 있습니다.

invisible과 gone은 보이지 않게 한다는 것에서 같지만

invisible은 원래 있던 공간을 차지하면서 안보이게 되는 것이고

gone은 공간마저 없애버리는 것입니다.

 

 

 

자바에서 사용할 때는

view 변수.setVisibility(View.VISIBLE)

(View.INVISIBLE)

(View.GONE)으로 사용하시면 됩니다.

 

ㅇTextView의 속성

 

android:text = "Wolfy App"

android:text = "@string/hello"

 

 

@string/hello는 자바에서 R.string.hello와 같습니다.

 

 

Typeface =폰트

Typeface 변수 = Typeface.createFromAsset(getAssets(),"xmas.ttf");

TextView 변수.setTypeface(Typeface 변수);

 

textStyle = normal, bold, italic

textColor = #FF0000 (16진수 RGB포맷)

testSize = 16dp 폰트 사이즈

autoLink= web, email, phone 텍스트를 자동으로 웹링크 연결, 메일, 전화 연결할 수 있게 해줌

maxLines = 최대 줄 수

ellipsize 최대 줄 수 지정으로 같지만 줄임표시(...)

 

*빨간 글씨에 있는 저 메서드를 사용하기 위해서는 

Assets폴더를 추가하고 xmas.ttf파일을 넣어주면 됩니다.

정말 간단하ㅈㅛ?

 

 

 

ㅇ ImageView의 속성

 

src = 어떤 이미지를 보여줄 것인지

XML에선 android:src = "@drawable/sample"와 같이 지정

adjustViewBounds = 길어서 어려워보이는데 결국 가로세로 비율 유지할건지

tint = 이미지에 다른 색상을 입힐 때 사용

 

ㅇ EditText의 속성

 

lines = 보여지는 줄 수 (3이면 세 줄만큼만 보인다. 안의 내용이 3줄 이상이면 스크롤됨)

maxLines = 3 (처음 보일 때 한줄로보이지만 세 줄만큼 늘어남 마찬가지로 스크롤)

★inputType = 제일 중요 (사용자의 키패드를 어떻게 할것인지)

자주 쓰는 네 가지

none: 모든 문자 입력 가능

textPassword: 비밀번호 입력용 (점으로 표시되는 거)

number: 숫자 입력 가능

numberPassword: 비밀번호 입력용 (점표시, 숫자만)

gravity 텍스트 편집 할 때 어디로 정렬할 건지 (기본: left top)

 

ㅇButton, CheckBox, RadioButton,

 

Button은 클릭 시 이벤트

CheckBox는 여러 개 체크 가능한 것

isChecked() = true / false return, setChecked(true/false), toggle() 반대로 변경

RadioButton은 RadioGroup중에서 한 개만 체크 가능

 

 

 

 

 

 

 

RadioGroup의 메서드

check() = RadioButton의 id를 전달하면 해당 버튼이 체크됨

clearCheck() = 모든 체크 상태 해제

getCheckedRadioButtonId() = 현재 체크된 RadioButton의 id를 return

 

 

간단하게 정리한다고 노력했는데 생각보다 간단해보이지 않는건 기분탓입니다.