[안드로이드] UI, Activity(액티비티)-View(뷰) 이해 및 기초 뷰 활용
안드로이드의 소프트웨어 아키텍처는 컴포넌트 기반으로 실행된다. 앱 내에 컴포넌트 클래스가 하나도 없다면 실행 자체가 안될 것 이다.
안드로이드에는 대표적인 컴포넌트 4개가 있는데, 그것은 '액티비티', 브로드캐스트 리시버', '서비스', 콘텐트 프로바이더' 이다. 이 중 가장 기본이 되는 것은 '액티비티' 로, 화면을 구성해서 출력해주는 역할을 한다.
여기서 액티비티만 있다고 해서 화면에 무언가를 볼 수 있는건 아니다. 액티비티-뷰 구조로 하여금, 액티비티(화면) 내에 위젯(버튼, 텍스트 등등)을 만들어 주어야 한다. 그럼 버튼이나 텍스트 등은 View가 될 것이다. 액티비티-뷰 구조로 화면이 구성되면 비로소 화면에 무언가가 나오는 것을 볼 수 있다.
그럼 이렇게 만들어진 뷰들을 어떻게 출력할 수 있을까? 그건 보통 액티비티를 새로 만들게 되면 볼 수 있는 클래스 내에 setContentView() 함수로 뷰를 출력할 수 있다.
* 간단히 정리해보자면 안드로이드에는 4가지 컴포넌트가 있고 대표적인 것은 액티비티이며, 액티비티는 뷰와 구조를 이루는데 액티비티가 컴퓨터 본체 케이스라면 뷰는 그 안에 각각의 기능들을 담당하는 쿨러, CPU, 램 등이라고 이해할 수 있겠다.
이제 뷰의 기초 속성을 알아보도록 하겠다.
id 속성 (android:id="@+id/아이디명")
뷰의 이름같은 존재이다. 클래스 내에서 이 뷰에 대한 제어를 하고 싶을 경우 아이디를 통해 가능하다. (자바 명명규칙 따름)
layout_width, layout_height 속성
뷰의 크기를 설정해주는 필수 속성이다. 이름과 같이 넓이, 높이를 담당한다.
wrap_content, match_parent, 50dp 등 순서대로 크기를 사용하는 만큼 알아서 늘리기, 화면 크기 꽉 채우기, 임의로 설정하기 로 생각하면 되겠다.
margin, padding 속성
두 속성 모두 간격에 대한 속성이다. 얼마나 간격을 띄울건지 이런 것이다. 기본 margin, padding은 4방향(동서남북) 모두 영향을 주지만, 단일 속성으로 marginLeft, paddingTop 등 한 쪽 방향, 단일로 값을 줄 수 있다.
magin은 뷰와 뷰 사이의 간격을 지정하는 속성, padding은 뷰 내부에서 내용과 뷰의 테두리 간의 간격을 지정하는 속성이다.
clickable 속성 (android:clickable="true")
모든 뷰는 기본적으로 사용자의 클릭 이벤트나 롱클릭 이벤트에 반응한다. 버튼은 clickable 속성이 없더라도 기본으로 클릭 이벤트를 처리할 수 있다. 그러나 텍스트뷰, 이미지뷰 등은 명시적으로 지정하지 않으면 이벤트에 반응하지 못한다. 그러므로 버튼이 아닌 뷰에서 버튼 효과를 내고 싶을 때 사용할 수 있다.
visibility 속성
뷰를 화면에 출력할지 말지 결정하는 속성이다. 디폴트는 true라 숨길 의도가 아닌 이상 사용되지 않는다.
속성 값으로는 invisible, gone 등이 있는데, 둘 다 화면에는 안보이지만, invisible은 크기를 확보하고, gone은 크기도 확보하지 않는다.
뷰의 계층구조
View: 안드로이드 뷰 클래스의 최상위 클래스
ViewGroup: 다른 뷰 (Button 같은) 여러 개를 뷰그룹에 포함(Add)하여 한꺼번에 제어하기 위한 목적
TextView: 특정 UI를 출력할 목적으로 제공되는 클래스
기초 뷰 활용
TextView
1. text
화면에 출력할 문자열을 지정하는 속성이다. 레이아웃 xml 파일에 직접 문자열을 명시할 수도 있고 문자열 리소스를 이용할 수도 있다.
android:text="hello" or android:text"@string/hello"
2. typeface
화면에 출력할 문자열의 폰트를 지정하는 속성이다. 기본으로 제공되는 normal(디폴트), sans, serif, monospace 등이 있다. 다른 폰트를 사용하고 싶다면 폰트 파일(ttf)을 assets 폴더에 복사한 후 코드에서 setTypeFace() 함수를 이용하여 지정해주면 된다.
Typeface typeface = Typeface.createFromAsset(getAssets(), "xmas.ttf");
.setTypeface(typeface);
3. textStyle
문자열 효과로 normal(디폴트), bold, italic 등이 있다.
4. textColor
문자열 색상을 16진수 RGB 포맷으로 지정할 때 사용 (#FFFFFF)(흰색)
5. textSize
문자열 크기를 지정할 때 사용
6. autoLink
문자열을 분석해 문자열 내에 autoLink 값에 해당하는 URL 문자열이 포함되었으면, 이 URL 문자열 부분을 자동 링크 형태로 출력해준다. 또한, 클래스 내에서 이벤트를 처리하지 않아도 클릭이 있을 경우 자동으로 다양한 화면으로 연결해준다.
android:text = "가나다라 http://www.google.com 마바사 a@a.com 아자차카타 02-1234-5678"
android:autoLink = "web|email|phone"
7. maxLines
긴 문자열을 입력하면 자동 개행하여 여러 줄로 출력된다. 특정 줄만큼만 출력하려면 maxLines 속성을 사용한다.
android:maxLines = "3"
8. ellipsize
maxLines로 지정한 줄만큼만 출력할 수 있는데, 줄임 표시(...)를 하고 싶을 때가 있다. 이 표시를 자동화하는 속성이 ellipsize 속성이다. 속성 값으로 end, start, middle 등이 있다.
android:maxLines = "3"
android:ellipsize = "end"
ImageView
1. src
화면에 출력할 이미지를 지정
2. maxWidth, maxHeight
화면에 출력할 이미지의 최대 크기를 지정하는 속성이다. 사진이 너무 클 경우 wrap_content로 지정하더라도 원본 이미지가 너무 커서 화면에 이미지의 일부분 밖에 안보이는 상황이 발생할 수 있다. 이럴 때 뷰의 크기를 조정하는 것이 아니라, 이미지 자체의 출력 크기를 변경해야 하며, 이 때 maxWidth, maxHeight 속성을 사용한다.
이 속성들은 adjustViewBounds 라는 속성과 함께 사용하며, 이 속성(adjustViewBounds)으로 이미지의 가로, 세로 비율을 유지할 수 있다.
3. adjustViewBounds
이미지의 크기를 변경할 때 가로, 세로 비율을 유지할지 지정하는 속성 (true or false)
4. tint
이미지 위에 다른 색상을 입힐 때 사용하는 속성
EditText
1. lines
처음 화면에 보일 때부터 특정 줄만큼 보이게 할 때 사용하는 속성이다. 만약 lines="3"으로 지정하면 처음부터 세로 방향 3줄 입력 크기로 출력되고 더 늘거나 줄지 않는다. 3줄 고정이란 말이지 스크롤로 3줄 이상 입력 가능하다.
2. maxLines
처음 화면에 보일 때는 한줄 입력 크기로 보이지만, (maxLines="3"일 경우)엔터를 할 경우 아래로 늘어나는 줄이 최대 3줄까지 늘어나고 더 늘어나지 않는다. 이것도 마찬가지로 스크롤 되어 여러 줄 입력 가능하다.
3. inputType
목적 1: 글을 입력하기 위해 올라오는 키보드의 모드를 제어
목적 2: 사용자에게 한 줄 혹은 여러 줄 입력을 강제
목적1 예시
전화번호만 받을 경우 android:inputType = "phone"
목적2 예시
한 줄 입력을 강제할 경우: android:inputType = "text"
종류
4. gravity
글의 위치를 지정할 수 있다. 기본ㄱ밧은 left top 이며 이를 center or right 등으로 지정하여 위치 조절 가능하다.
Button
버튼은 TextView의 서브 클래스이므로 문자열 속성을 그대로 적용할 수 있다.
1. CheckBox: 선택되지 않은 두 가지 상태를 표현하기 위한 뷰이다.
- isChecked(): 해당 checkbox가 체크된 상태인지 반환, true면 체크된 상태, false면 체크가 안 된 상태
- setChecked(): 체크 상태를 바꾸기 위한 함수이다. true면 체크 상태로, false면 체크 해제
- toggle(): checkbox의 상태와 상관없이 상태가 반대로 바뀐다.
2. RadioButton: 체크 상태를 표현하기 위한 뷰이다. checkbox는 다중 선택 표현이 가능하지만, 라디오버튼은 단일 선택을 표현한다는 점이다.
RadioButton은 RadioGroup으로 묶여야 한다.
- check(): 매개변수로 체크하고자 하는 라디오버튼의 id 값을 주면 해당 라디오버튼 체크
- clearCheck(): 라디오그룹의 라디오버튼의 체크 상태를 해제
- getCheckedRadioButtonId(): 체크된 라디오버튼의 id 값을 획득
감사합니다.
참고: 깡샘의 안드로이드 프로그래밍