[안드로이드 스튜디오] 4.뷰 - 위젯과 레이아웃

목차

1 : [안드로이드 스튜디오] 1.개발 환경 구축

2 : [안드로이드 스튜디오] 2.첫 프로젝트 생성 및 실행

3 : [안드로이드 스튜디오] 3.이것저것 바꿔보기
now : [안드로이드 스튜디오] 4.뷰 - 위젯과 레이아웃

0.서론

오늘은 뷰(View)에 대해서 설명할 것입니다.

1.뷰와 뷰그룹

1)뷰와 뷰그룹

뷰(View)는 UI구성 요소로, 눈에 보이는 화면의 객체들이 뷰가 됩니다.

뷰그룹(ViewGroup)은 여러 뷰를 포함하고있는 것으로 뷰의 위치를 지정할 수 있습니다.

뷰와 뷰그룹의 특징은 뷰그룹이 뷰를 상속한다는 것입니다.

2)상속

상속이란 자식 클래스가 부모 클래스의 멤버를 사용하는 것인데,

간단히 설명하면 속성을 나타내는 요소를 물려받는 것입니다.

그러므로 뷰그룹 또한 뷰와 나타내는 방식이 같다고 생각하면 되겠습니다.

즉, 뷰그룹이 뷰들을 포함하는것처럼 뷰와 같은 뷰그룹도 포함할수 있다는 뜻이죠

(뷰그룹이 뷰그룹을 포함할 수 있습니다.)

상속의 다른 예로, TextView와 Button을 볼 수 있습니다.

저번에 했던대로 TextView를 Button으로 바꾸기만 해도 버튼으로 변경되는 이유는

Button이 구성되는 방식이 TextView와 같기 때문입니다.

View는 Object에서 상속되고, TextView나 ViewGroup은 View를 상속,

Button은 다시 TextView를 상속하게 됩니다.

3)위젯과 레이아웃

뷰 중에서 일반적인 컨트롤의 역할을 하는 것을 위젯(Widget)이라고 부르고,

뷰그룹중에서 뷰들을 포함하며 배치하는 역할을 하는것을 레이아웃(Layout)이라고 합니다.

마찬가지로 레이아웃 중 하나인 LinearLayout은 ViewGroup을 상속합니다.

2.뷰의 속성 살펴보기

대표적인 View의 속성으로는 

이름을 지정하는 id,

크기를 나타내는 layout_width, layout_height,

배경색을 지정하는 background등이 있습니다.

대표적인 View인 Button을 이용하여 속성을 살펴보겠습니다.

일단 xml파일로 가서 버튼을 생성합니다.

새 버튼을 생성하고 Text탭으로 넘어가 소스코드를 확인하면,
Button 내에 여러가지 속성이 있는것을 알 수 있습니다.

1)layout_width, height

속성 layout_width를 조절하기 위해

android:layout_width="wrap_content" 의 따옴표 안의 부분을 수정합니다.
android:layout_width="match_parent" 로 수정한 후 왼쪽화면을 보면.

가로가 가득 차게 버튼이 늘어나 있는것을 알 수 있습니다.wrap_content는 내부에 있는 콘텐츠에 딱 맞게 버튼크기를 만들고,match_parent는 부모 뷰의 크기에 딱 맞게 버튼 크기를 만듭니다.
height를 변경하면 마찬가지로 세로가 변경됩니다.

뷰의 크기를 정수값으로 지정할 수도 있는데, 그럴때는 단위를 함꼐 사용하여야 합니다.
px, dp(dip), sp(sip), in, mm등을 지원하며,
흔히 해상도에 따라 비율로 픽셀값이 계산되는 dp(dip)를 사용합니다.

높이를 100dp로 설정한 사진입니다. 오른쪽을 보면 크기가 변경된 것을 알 수 있습니다.

layout_width와 height 아래에는 차례로 text, id, layout_align...이 보입니다.

2)text

text는 말그대로 버튼에 내부에 들어가는 글자입니다.
따옴표 안의 내용을 바꾸면 그대로 적용이 됩니다.

3)id

그 다음은 android:id="@+id/button" 입니다.
id는 xml레이아웃 파일에서 정의한 뷰를 자바 파일에서 쓸 수 있게 해 줍니다.
xml레이아웃에서 뷰를 정의할때도 메모리에 객체화되는 인플레이션 과정을 거치게 되는데,
자바 코드에서 이 객체의 위치를 찾기 위해서 id를 R.id.[ID]와 같은 방식으로 참조하게 됩니다.
id를 등록하기 위해서는 위와 같이 '@+id/[ID]'를 사용합니다.

자바 파일에서 id를 생성해 봅시다.

Button button2 = (Button) findViewById(R.id.button);
button2.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        Toast.makeText(getApplicationContext(), "Hello 버튼이 눌렸습니다.", Toast.LENGTH_SHORT).show();
     }
});

를 onCreate내에 추가하면 button이라는 아이디를 이용하여 OnClickListener를 생성한 것입니다.
실행해보면 Toast가 생성되는것을 확인 할 수 있습니다.

4)layout_align...

layout_align은 뷰의 위치를 결정하는 속성인데

나중에 설명할 relative layout에서 사용되는 속성입니다.

다른 뷰들과의 상대적인 위치로 지정하는 것으로, 자세한것을 레이아웃을 다룰때 하겠습니다.

5)background

현재 속성에는 사용되지 않고 있는 background라는 속성또한 많이 사용됩니다.

말 그대로 내용 뒤의 뒷배경을 나타내는 것입니다.
컴퓨터에서 일반적으로 사용하는 형식인 #RGB, #ARGB,#RRGGBB,#AARRGGBB형식으로 나타냅니다.
ex) #ffff0000 = 불투명한 빨간색 #90ff0000 투명도가 50%정도 되는 빨간색

실제 프로그램에서 사용해보면

design 탭에서 버튼의 background속성에  #ff00ff를 하고

text탭을 열면 새로 background 속성이 추가된 것을 알 수 있습니다.

실행한 화면도 마찬가지로 마젠타색으로 뜨게 됩니다.

3.마무리

이로서 뷰들의 기본적인 속성에 대해 알아 보았습니다.
다음번에는 뷰 그룹의 일종에 해당하는 레이아웃에 대해 알아 보겠습니다.