1. View의 개요
1. View와 View Group
안드로이드 화면에서 실제로 사용되는 것들은 모두 View라는 클래스의 상속을 받는다.
뷰 클래스는 '위젯'이라고도 하는데, 쉽게 말해 화면에서는 버튼을 버튼 위젯, 시제 코드에서는 버튼 클래스라고 부른다.
또한, 다른 위젯을 담을 수 있는 위젯을 특별히 레이아웃이라 하며, 레이아웃은 ViewGroup이라는 클래스 아래에 존재한다.
그러나 위젯은 단독으로 존재하지 않으며, 위젯을 담아 배치하는 틀이 바로 레이아웃이다.
레이아웃은 위젯을 포함하는 컨테이너 역할을 하므로 눈에 보이는 개념이 아니다.
위젯은
-넓은 의미로 View 클래스 하위의 모든 클래스를 지칭.
-좁은 의미로 레이아웃 이외의 클래스를 지칭.
View 클래스 계층도
안드로이드에서 View 클래스의 상속을 받은 클래스(위젯) 계층도의 일부를 살펴보자.
위 그림을 보면 최상단에 Object 클래스가 있고, 이를 상속받은 View 클래스가 있다.
안드로이드 화면에 나타나는 모든 위젯은 View 하위에 존재한다.
레이아웃은 ViewGroup을 상속받은 LinearLayout, RelativeLayout, FrameLayout,GridLayout,TableLayout을 지칭한다.
뷰 컨테이너는 ListView,GridView,TabHost,Gallery 등이 있다. 뷰 컨테이너도 ViewGroup 클래스에서 상속받는다.
2. View 클래스의 XML 속성
View 클래스의 XML 속성은 수십 개가 넘으니 자주 사용할 것만 살펴보자. 다음은 Button의 기본 형태이며 View 클래스로부터 상속받았다.
버튼의 id,layout_width 등 몇 가지 기본적인 XML 속성이 표현되었다. 이러한 속성을 하나씩 살펴보자.
id 속성
id 속성은 모든 위젯의 아이디를 나타낸다. java 코드에서 버튼 등의 위젯에 접근할 때 id 속성에 지정한 아이디를 사용한다. 일반적으로 id 속성은 위젯에 아이디를 새로 부여하는 개념이므로 '@+id/' 형식으로 지정한다. 그 다음 새로 지정할 아이디를 넣는다. "@+id/btn1"
위젯에 접근하기 위해 Java 코드에서 다음과 같은 형식을 사용한다.
위 버튼 예제는 Java 코드에서 다음과 같은 접근 방식을 사용할 수 있다.
Button, RadioButton,CheckBox 등의 위젯은 일반적으로 클릭 또는 터치했을 때, 어떤 동작을 하기 위한 것이므로 id 속성을 지정한다.
하지만, 클릭이나 터치를 해도 아무 동작이 필요없는 글자(텍스트뷰)나 배경 이미지(이미지뷰)등은 굳이 id 속성을 지정하지 않아도 된다.
layout_width, layout_height 속성
layout_width,layout_height 속성은 모든 위젯에 필수로 들어간다. 매우 중요하다.
이 둘은 각각 위젯의 너비와 높이를 나타내며 match_parent 와 wrap_content 값으로 설정할 수 있다.
match_parent: 이름 그대로 자신의 부모(대개는 레이아웃)에 너비나 높이를 맞춘다는 의미.
wrap_content: 글자가 꼭 들어갈 정도로 자신의 너비나 높이를 설정한다는 의미.
버튼의 경우 그 안에 들어갈 것이 글자이기 때문에 글자가 곡 들어갈 정도라고 표현했다. 하지만 다른 위젯에는 글자 외의 것이 들어간다. 예를 들면 이미지뷰에는 이미지가 들어가고 wrap_content는 이미지가 꼭 들어갈 정도로 너비나 높이가 설정된다.
예제를 살펴보자.
위 예제들에서 볼 수 있듯이 layout_width 속성에 wrap_content 값을 사용하면 버튼의 너비가 그 안의 글자인 '버튼입니다'에 꼭 맞는 크기가 되고, match_parent(또는 fill_parent)값을 사용하면 '버튼입니다' 글자와 관계없이 버튼을 싸고 있는 부모(linear_layout)의 너비에 꽉 차는 크기가 된다.
값을 숫자로 직접 지정할수는 있지만 단위에 주의해야 한다. 가장 단순한 방법이 px(PiXel)단위이다.
background 속성
background 속성은 위젯의 색상을 주로 #RRGGBB 값으로 지정한다. 각 값은 Red, Green, Blue를 의미하며 RR,GG,BB의 위치는 16진수 00~FF로 표현할 수 있다. 예를 들면 빨간색은 #FF0000, 파란색은 #0000FF로 지정한다. 값을 적절히 조합하면 필요한 색을 만들 수도 있다.
예제를 살펴보자.
위 예제는 레이아웃을 빨간색(#ff0000), 버튼을 초록색(#00ff00)으로 표현했다.
색상을 지정하기 위해 #AARRGGBB 방식을 사용할 수도 있다. AA는 알파 값으로 투명도이다. 00~FF로 지정할 수 있는데 00은 완전 투명을, FF는 완전 불투명을 나타낸다.
즉, #FF0000FF는 불투명파랑, #000000FF는 완전 투명이므로 색상이 나타나지 않는다. #770000FF는 반투명 파란색이다.
padding, layout_margin 속성
padding 속성을 사용하여 위젯의 경계선으로부터 위젯 안의 요소가 떨어지게 설정할 수 있다. 기본적으로는 레이아웃 내에 버튼, 텍스트 뷰 등을 여러 개 두었을 때 레이아웃의 경계선에 딱 붙어서 표현되는데, padding 속성을 사용하면 레이아웃의 경계선과 위젯 사이에 여백을 둘 수 있다.
우선 텍스트뷰, 에디트텍스트, 버튼이 있는 XML 파일을 살펴보자.
위 코드를 이용해 결과를 살펴보면 경계선에 붙어 있어 답답해 보인다. 레이아웃에 padding 속성을 사용해보자.
*padding 은 상하좌우 모두에 지정하는 속성이다. 각각 따로 지정하고 싶으면 paddingTop, paddingBottom, paddingLeft,paddingRight를 이용한다.
LinearLayout에 지정된 padding속성 때문에 그 안의 요소들의 경계선에서 30dp만큼 떨어져 출력되었다.
위 에제는 LinearLayout에 padding을 설정했지만, Button에 padding을 설정하면 버튼 안의 글자가 버튼의 경계선에서 일정 간격 떨어져서 표현된다. 이와는 반대로 위젯과 위젯 사이에 여유를 두고 싶다면 layout_margin 속성을 사용하자.
*layout_margin은 상하좌우 모두에 지정하는 속성이다. 각각 따로 지정하고 싶으면 layout_marginTop, layout_marginBottom, layout_marginLeft,layout_marginRight를 이용한다.
정리하면 padding 속성에는 자신의 내부에 들어 있는 위젯과 자신의 경계선 사이 간격을 지정하고, layout_margin 속성에는 자신과 부모 레이아웃이나 위젯 사이의 간격, 주위 다른 위젯과 간격을 지정한다. 따라서, layout_margin은 각 위젯의 속성으로 지정해야 한다.
Visibility 속성
visibility 속성으로 위젯을 보일 것인지 여부를 설정할 수 있다. 세 가지 값을 지정할 수 있는데 디폴트인 visible은 보이는 상태, invisible과 gone은 안 보이는 상태이다.
invisible과 gone의 차이는, invisible은 보이지 않을 뿐 원래의 자리를 계속 유지하지만 gone은 그 자리까지 아예 내놓는다는 것이다.
visibility 속성은 XML 보다 Java 코드에서 상황에 따라 동적으로 필요한 버튼 등을 보이거나 안보이게 하는 경우에 주로 활용된다.
Enabled, Clickable 속성
위젯의 동작 여부는 enabled 속성으로 설정한다.
클릭이나 터치가 가능하게 하는 것은 clickable 속성으로 설정한다.
값은 true와 false로 지정하며 디폴트 값은 true 이다. enabled, clickable 속성은 XML 보다 Java 코드에서 주로 사용한다.
Rotation 속성
rotation 속성은 위젯을 회전시켜 출력하며 값은 각도로 지정한다. 특별 화면을 만들 때 사용한다.
지금까지는 많이 사용되는 XML 속성을 살펴보았다. 이 외에도 상당히 많지만 필요할 때마다 설명하겠다.
[자료 출처: Android Studio를 활용한 안드로이드 프로그래밍(6판)]
'Computer engineering > Android Programming' 카테고리의 다른 글
안드로이드 Toolbar 없이 Toolbar만들기 (0) | 2022.06.14 |
---|---|
RecyclerView & GirdLayout Decoration Customizing & Caution (0) | 2022.06.13 |
레이아웃 개요 (0) | 2021.04.24 |
기본위젯 활용하기 (0) | 2021.04.24 |
기본 위젯 다루기 (0) | 2021.04.06 |