투폭네

출처 : http://www.edwith.org/boostcourse-android/lecture/17044/

프레임 레이아웃

프레임 레이아웃은 한 번에 하나의 뷰만 보여주는 레이아웃입니다.

가장 단순한 레이아웃이죠.

이 레이아웃에 뷰를 여러 개 추가했다면 그중 가장 나중에 추가한 뷰만 화면에 보이게 됩니다.

이런 특성 때문에 뷰들을 여러 개 담아놓고 중첩할 때 주로 사용됩니다.

아래쪽에 깔린 다른 뷰를 화면에 보여주고 싶다면 위쪽으로 뷰를 올려줄 수도 있고 보고자 하는 뷰 외의 다른 뷰들을 보이지 않게 할 수도 있습니다.

가시성 속성의 사용

프레임 레이아웃 안에 중첩된 뷰들 중에서 하나만 보여주고 싶다면 가시성(visibility) 속성을 사용할 수 있습니다.

가시성(visibility) 속성의 값으로는 visible, invisible, gone이 있습니다. 보여주고 싶은 뷰의 visibility 속성값은 visible로 하고 보여주고 싶지 않은 뷰들은 invisible이나 gone으로 설정하면 visible로 지정한 뷰만 화면에 보이게 됩니다.

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
>
<ImageView
  android:id="@+id/imageView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@drawable/dream01"
  android:visibility="invisible" />
<ImageView
  android:id="@+id/imageView2"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@drawable/dream02"
  android:visibility="visible" />
</FrameLayout>

버튼을 눌렀을 때 중첩된 뷰 바꾸기

프레임 레이아웃 안에 들어가 있는 두 개의 뷰 중에서 처음에는 두 번째 뷰가 보였지만 버튼을 눌렀을 때 첫 번째 뷰가 보이도록 만들 수도 있습니다.

물론 버튼을 누를 때마다 첫 번째 뷰와 두 번째 뷰가 번갈아 보이도록 만들 수도 있죠.

사용자가 버튼을 클릭했을 때 무언가가 동작하도록 만드는 과정이 아직 익숙하지 않을 수도 있습니다.

하지만 하나씩 진행해보면 그리 복잡하지 않습니다.

화면에 버튼을 하나 추가하고 onClick 속성의 값으로 자바 소스 코드에 들어갈 메소드의 이름을 지정합니다.

그리고 그 메소드를 소스 코드에 추가합니다.

만약 버튼 클릭 시 onButton1Clicked라는 메소드가 동작하도록 지정하고 onButton1Clicked 메소드에서 changeImage라는 메소드를 호출하도록 입력했다면 다음과 같이 코드를 입력할 수 있습니다.

private void changeImage() {
  if (imageIndex == 0) {
    imageView.setVisibility(View.VISIBLE);
    imageView2.setVisibility(View.INVISIBLE);

    imageIndex = 1;
  } else if (imageIndex == 1) {
    imageView.setVisibility(View.INVISIBLE);
    imageView2.setVisibility(View.VISIBLE);

    imageIndex = 0;
  }
}

이 소스 코드에서는 상태에 따라 두 개의 이미지가 보이거나 보이지 않도록 설정합니다. 소스 코드에서 imageView, imageView2, imageIndex 변수는 미리 선언되고 초기화되어 있어야 합니다.

사용자가 버튼이나 화면을 눌렀을 때 발생하는 이벤트에 대해서는 나중에 자세히 살펴볼 것입니다.

생각해보기

뷰를 중첩시키고 보였다 안보였다 하는 또 다른 예는 어떤 것이 있을까요?
- 버튼색이 바뀌는것도 색을입히는것말고 이미 색이 입혀진 버튼을 보였다 안보였다 할수 있을것 같다.

화면의 일부분이 바뀌면서 보이는 것 말고 전체 화면이 다른 화면으로 바뀌면서 보이도록 만들 수도 있을까요?
- 가장 밖의 레이아웃을 프레임레이아웃으로 설정하다면 가능할것 같다.

이렇게 하기 위해서는 새로운 화면을 또 추가해야 하는 걸까요?
- 여러개의 화면을 숨겨놓고 사용하는것이기 때문에 따로 필요하지 않을것 같다.

상대 레이아웃

상대 레이아웃은 뷰를 담고 있는 부모 레이아웃이나 그 안에 들어있는 다른 뷰들과의 상대적 위치를 이용해 화면을 배치하는 레이아웃입니다. 

상대 레이아웃을 이용한 뷰의 배치

상대 레이아웃이 뷰를 담고 있다면 이 뷰의 입장에서는 상대 레이아웃이 부모 레이아웃이 됩니다.

그리고 부모 레이아웃의 상대적 위치를 이용할 수 있습니다.

부모 레이아웃과의 상대적 위치를 지정할 때 사용하는 속성으로는 layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight 등이 있습니다.

부모 레이아웃의 가운데에 배치하기 위한 layout_centerInParent 속성도 있죠.

다른 뷰와의 상대적 위치를 지정할 때 사용하는 속성으로는 layout_toLeftOf, layout_toRightOf, layout_alignTop, layout_alignBottom 등이 있습니다.

부모 레이아웃과의 상대적 위치를 지정할 때 사용하는 속성들은 모두 Parent 라는 단어가 들어가 있지만 다른 뷰와의 상대적 위치를 지정할 때 사용하는 속성들에는 Parent 라는 단어가 들어가 있지 않습니다.

위, 아래 뷰를 두고 가운데 꽉 차게 배치하기

리니어 레이아웃을 이용해 화면을 배치할 때 쉽게 되지 않는 것 중의 하나가 위, 아래에 뷰를 두고 가운데에 또 다른 뷰를 두면서 꽉 차게 만드는 것입니다.

가운데에 있는 뷰를 꽉 차게 하려면 layout_height 속성의 값을 match_parent로 해야 하는데 이렇게 하면 리니어 레이아웃에서는 아래쪽 뷰가 보이지 않는 문제가 생깁니다.

상대 레이아웃 안에 들어있는 뷰들에는 아래와 같이 속성이 지정될 수 있습니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

<Button
  android:id="@+id/button1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_alignParentTop="true" />

<Button
  android:id="@+id/button2"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_alignParentBottom="true" />

<Button
  android:id="@+id/button3"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_below="@+id/button1"
  android:layout_above="@+id/button2"
  android:text="Button" />

</RelativeLayout>

생각해보기

1. 상대 레이아웃을 잘 사용할 수 있다면 다른 레이아웃은 필요 없는 걸까요?
   -필요로 안할수도 있겠지만 역시 개발의 중요함은 편리함. 상대레이아웃 여러개쓰는것보다 그걸 위해 만들어진 다른 레이아웃을 쓰는게 더 효과적일수있다.
2. 리니어 레이아웃과 상대 레이아웃을 잘 조합해서 사용하는 방법을 생각해보세요.
   - 전체적인건 상대레이아웃으로 잡고 그안에 리니어들을 넣어서 깔끔하게 정리할 수 있다.
3. 화면에 보이는 뷰들의 일부가 겹쳐있도록 만들 수도 있을까요?
   - 가능하지만 지저분해보일수있으므로 정리가 필요하고 우선순위도 필요할것 같다.

리니어 레이아웃(LinearLayout)의 방향 속성과 정렬 속성

리니어 레이아웃에서 가장 중요한 속성은 방향을 결정하는 orientation 속성입니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" 
  android:layout_width="match_parent"
  android:layout_height="match_parent"
>

뷰를 정렬할 때는 layout_gravity와 gravity 속성이 사용됩니다.

Gravity는 지구의 ‘중력’처럼 끌어당기는 힘을 의미한다고 생각하면 이해하기 쉽습니다.

가로 방향으로 보았을 때 layout_gravity 속성의 값이 left이면 뷰를 왼쪽으로 끌어당겨 정렬하라는 의미거든요.

정렬은 가로 방향으로 왼쪽, 가운데, 오른쪽이 있을 수 있고 세로 방향으로 위쪽, 가운데, 아래쪽이 있을 수 있습니다.

이 외에도 여러 가지 속성이 있죠.

주의할 점은 layout_gravity는 뷰를 정렬하는 데 사용되고 gravity는 뷰 안에 들어있는 내용물을 정렬할 때 사용된다는 점입니다.

버튼을 예로 들면 버튼 안에 들어있는 글자가 내용물이 되니 gravity 속성을 주면 그 글자를 정렬하겠다는 의미가 됩니다.

또 한가지 주의할 점은 여유 공간이 있어야 정렬할 수 있다는 점입니다.

예를 들어 버튼의 가로 크기 속성인 layout_width의 값을 wrap_content로 해놓으면 gravity 속성의 값으로 가로 방향 왼쪽이나 오른쪽으로 정렬하라는 값을 주더라도 정렬은 아무 의미가 없습니다.

움직일 공간이 없기 때문이죠.

뷰의 마진, 패딩 그리고 공간분할

리니어 레이아웃 안에 들어가 있는 뷰가 차지하는 공간은 기본적으로 가로/세로 크기를 지정하는 layout_width와 layout_height 속성에 의해 결정됩니다.

그리고 추가적으로 마진을 설정할 수 있습니다.

마진(Margin)은 뷰의 테두리선 바깥쪽 공간을 얼마나 띄울 것인지를 지정하는 속성입니다.

예를 들어, layout_margin 속성의 값을 10dp 로 주면 위, 아래, 좌, 우 공간을 10dp 만큼 띄워줍니다.

원한다면 한쪽만 마진을 줄 수도 있습니다.

패딩(Padding)은 뷰 안에 들어있는 내용물을 테두리 선과 얼마나 띄울 것인지를 지정하는 속성입니다.

버튼 안에 들어있는 글자가 테두리선과 너무 붙어있다는 느낌이 든다면 이 속성을 사용해 공간을 띄워줄 수 있습니다.

예를 들어, padding 속성의 값을 10dp 로 주면 위, 아래, 좌, 우 공간을 10dp 만큼 띄워줍니다.

원한다면 한쪽만 패딩을 줄 수도 있습니다.

처음 안드로이드 화면을 만들어볼 때 가장 많이 혼동하는 속성이 layout_weight 입니다.

이 속성은 공간분할에 많이 사용됩니다.

예를 들어, 두 개의 버튼을 가로 방향으로 똑같은 크기만큼 반반씩 공간을 차지하도록 만들고 싶을 때 사용합니다.

그런데 이 속성은 남아있는 여유 공간만 분할합니다.

이 때문에 두 개의 버튼을 가로 방향으로 추가했다면 layout_width 속성의 값은 0dp 로 주는 것이 필요합니다.

layout_width 속성의 값이 0dp 이고 layout_weight 속성이 각각 1이라면 이 두 개의 버튼은 공간을 반반씩 나누어 가집니다.

왼쪽 버튼이 2/3, 오른쪽 버튼이 1/3씩 공간을 차지하도록 하고 싶다면 layout_width 속성의 값이 0dp 이고 layout_weight 속성이 각각 2와 1이 되도록 만들면 됩니다.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
  android:layout_width="0dp"
  android:layout_height="wrap_content"
android:layout_weight="1"
android:text="확인" /> 
<Button
      android:layout_width="0dp"
      android:layout_height="wrap_content"
android:layout_weight="1"
android:text="취소" /> 
</LinearLayout>

생각해보기

1. 리니어 레이아웃 안에 리니어 레이아웃을 포함시키면 어떤 화면이든 다 만들 수 있는 걸까요?
   -그렇다. 하지만 복잡한 레이아웃을 쉽게표현할수있는 다른 레이아웃들이 많다.
2. 화면의 위, 아래 끝에 작은 뷰를 배치하고 싶다면 리니어 레이아웃을 쓰는 것보다 더 좋은 방법이 있을까요?
   -제약레이아웃을 쓴다.

출처:http://www.edwith.org/boostcourse-android/lecture/17041/

대표적인 레이아웃

제약 레이아웃 외에 대표적인 레이아웃으로 리니어 레이아웃(LinearLayout), 상대 레이아웃(RelativeLayout), 프레임 레이아웃(FrameLayout) 등을 들 수 있습니다.

그중에서도 리니어 레이아웃이 가장 간단하면서도 자주 사용됩니다.

리니어 레이아웃은 상자를 쌓듯이 뷰를 하나씩 쌓을 수 있는 레이아웃입니다.

화면에서 뷰가 차지하는 영역을 상자라고 보고 이 상자를 한쪽 방향으로 쌓을 수 있게 해 줍니다.

상자를 위로도 쌓을 수 있고, 바닥에 어느 한방향의 일렬로 놓을 수도 있다고 생각하면 쉽습니다.

화면에서는 뷰를 아래쪽으로 쌓거나 오른쪽으로 쌓을 수 있도록 해주는데 어느 방향으로 쌓을 것인지를 먼저 결정해야 합니다.

방향 속성인 orientation 속성을 이용해 가로 방향은 Horizontal, 세로 방향은 Vertical로 지정합니다.

그다음에는 단순히 쌓기만 하면 됩니다.

아주 쉬운 레이아웃이지만 리니어 레이아웃 안에 다시 리니어 레이아웃을 여러 개 집어넣고 안에 들어간 리니어 레이아웃 각각에 서로 다른 orientation 속성을 설정하여 아주 복잡한 화면도 만들 수 있습니다.

생각해보기

1. 리니어 레이아웃 안에 리니어 레이아웃을 포함시키면 어떤 화면이든 다 만들 수 있는 걸까요?
   -가능하다. 하지만 리니어레이아웃 여러개쓸것을 쉽게 다른 레이아웃으로 표현할수 있다.

제약 레이아웃 (ConstraintLayout)

제약 레이아웃은 프로젝트를 처음 만들었을 때 자동으로 만들어지는 레이아웃입니다.

자동으로 만들어진 XML 레이아웃 파일인 activity_main.xml 파일을 열어보면 가장 바깥에 있는 최상위 태그가 ConstraintLayout인 것을 확인할 수 있습니다.

이 최상위 태그는 화면 전체를 담고 있는 레이아웃을 의미합니다.

그 태그 안에 들어있는 속성 중에 xmlns라는 지시자가 들어 있습니다.

이 지시자는 XML 파일 하나당 한 번씩만 사용되면 되는데, 보통 최상위 태그에 들어 있습니다.

xmlns 지시자에는 상당히 긴 URL이 값으로 설정됩니다.

이것은 안드로이드 SDK에 들어있는 속성을 사용하겠다는 의미로 해석되는데 일단 같은 URL이 매번 자동으로 만들어지므로 크게 신경 쓰지 않아도 됩니다.

다만 안드로이드 SDK에 들어있는 속성은 android: 라는 접두어를 붙여서 사용하므로 각각의 속성에 대부분 android: 접두어가 붙게 된다고 이해하면 됩니다.

이와 다르게 app라는 속성이 사용되는 경우도 있는데 이것은 여러분이 만든 프로젝트에서 지정한 속성을 사용하겠다는 의미입니다.

예를 들어, 외부 라이브러리를 사용하는 경우에는 안드로이드 SDK에 들어있지 않은 별도의 속성을 사용할 수 있게 되는데 이때는 app라는 지시자를 추가하고 각 속성의 앞에 app: 라는 접두어를 붙이면 됩니다.

제약 레이아웃은 제약조건을 이용해 그 안에 추가된 뷰들의 위치를 결정합니다.

그리고 그 제약조건은 연결선을 통해 만들어지죠.

연결선은 뷰의 상, 하, 좌, 우에 있는 연결점을 다른 레이아웃이나 위젯의 상, 하, 좌, 우와 연결하여 만들 수 있습니다.

만약 버튼을 제약 레이아웃 안에 추가했다면 버튼을 담고 있는 부모 레이아웃인 제약 레이아웃과의 연결선을 만들 수도 있고 그 안에 들어있는 다른 뷰들과의 연결선을 만들 수도 있습니다.

주의할 점은 연결선은 그 뷰의 위치를 결정할 만큼 만들어져야 한다는 것입니다.

예를 들어, 버튼의 연결선을 버튼의 왼쪽 연결점과 부모 레이아웃의 왼쪽 면과 연결하도록 하나만 만들었다면 이 버튼의 위치는 결정할 수 없게 됩니다.

왜냐하면, 이 상태에서는 버튼이 위, 아래 공간 중에서 어디에 위치하도록 할 것인지 알 수 없기 때문입니다.

따라서 버튼의 위쪽에 연결선을 하나 더 만들어주는 것이 필요합니다.

만약 상, 하 연결선을 모두 부모 레이아웃과 연결하여 만들게 되면 그 뷰는 부모 레이아웃의 가운데 지점에 있게 됩니다.

상, 하로 이어진 선의 중간 지점이죠.

상, 하, 좌, 우 모두 부모 레이아웃과 연결하면 어떻게 될까요?

화면의 가운데 부분에 위치하게 됩니다.

생각해보기

1. 레이아웃 안에 레이아웃을 넣는 방식으로 3~4개의 레이아웃을 중첩시켜 넣은 후 그 안에 버튼을 넣으면 하나의 
   레이아웃 안에 버튼을 넣었을 때와 다른 점이 있을까요? 어떤 경우에 이렇게 만들까요?
   -하나의 레이아웃에 넣었을때 만약 수정이 필요할때 일일히 하기가 힘들수있는데 레이아웃자체가 이것을 그룹화해주는 역할을 하는것 같다.
2. 제약 레이아웃 안에 두 개의 버튼을 넣고 하나의 버튼을 다른 버튼과 연결하여 위치시키면 
   하나의 버튼을 움직였을 때 다른 버튼도 따라 움직일까요?
   -연결하였을때 연결당한버튼을 움직이면 원래것도 같이 이동하지만 원래것을 이동하였을때는 같이 움직이지않는다.

뷰 (View)

뷰는 안드로이드 기본 화면을 구성하는 모든 기본 화면 구성요소를 말합니다.

눈에 보이지 않는 것도 있긴 하지만 눈에 보이는 각각의 것들을 뷰라고 이해하면 쉽습니다.

뷰 중에 눈에 보이지 않는 것들이 있다 보니 눈에 보이는 것들은 위젯, 눈에 보이지 않는 것들은 레이아웃이라고 구분합니다.

레이아웃은 그 안에 다른 뷰들을 담아둘 수 있는데 레이아웃도 뷰를 상속하여 정의되었기 때문에 레이아웃 안에 레이아웃도 담을 수 있습니다.

레이아웃 안에 레이아웃, 다시 그 레이아웃 안에 레이아웃을 넣는 방식을 사용하면 아주 복잡한 화면이 만들어지겠죠?

다른 뷰들을 담아둘 수 있도록 뷰그룹을 정의해두었는데 레이아웃은 이 뷰 그룹을 상속합니다.

아래 계층도를 보면 좀 더 쉽게 이해가 될 겁니다.

뷰의 크기 속성

화면에 추가한 버튼은 눈에 바로 보이는 것이고 그 버튼을 담고 있는 눈에 보이지 않는 것이 레이아웃입니다.

프로젝트를 처음에 만들면 제약 레이아웃이라는 것이 버튼을 담고 있는 형태로 만들어집니다.

버튼과 제약 레이아웃은 뷰의 한 종류 입니다. 뷰는 화면의 일정 공간을 차지하므로 크기 속성이 필수입니다.

즉, 크기를 알아야 화면의 공간 중에서 얼마만큼을 뷰에게 할당해줄지 알 수 있습니다.

화면을 구성할 때는 XML 파일을 만들게 되는데 XML 파일 안에는 태그와 속성들이 들어가게 됩니다.

이 XML 파일을 시스템이 읽어 들여 앱의 화면으로 보여주게 됩니다.

이 각각의 태그는 뷰를 의미하는데 가로, 세로의 크기가 필수 속성이므로 layout_width, layout_height 속성을 반드시 넣어주어야 합니다.

속성 앞에 붙어있는 android: 라는 지시어는 안드로이드 SDK에서 정의한 속성이라는 의미로 대부분의 속성이 SDK의 속성이므로 보통은 눈여겨보지 않아도 됩니다.

android:layout_width 속성을 layout_width 속성이라고 부르는 이유죠.

크기를 지정하는 방법은 세 가지가 있습니다.

"match_parent"는 상위 뷰의 크기에 맞게 구성 요소를 확장하고, 뷰 안에 들어있는 내용물의 크기에 딱 맞게 크기를 결정하는 wrap_content를 사용할 수도 있고 원하는 크기를 숫자로 지정할 수도 있습니다.

이때 크기를 나타내는 숫자 뒤에는 px나 dp와 같은 단위를 붙여줍니다.

생각해보기

1. 버튼에는 얼마나 많은 속성이 들어 있을까요?
   -기본적인 높이 너비 안에들어갈 글씨 말고도 밑에 모든속성보기를 누르면 그 속성의 갯수가 많다는걸 알수있다.
2. 버튼이 텍스트뷰를 상속받아 만들어진 것이라면 버튼을 텍스트뷰라고 말할 수 있는 걸까요?
   -이건 좀 애매한데 나는없다고본다. 애초에 버튼이 텍스트뷰를 상속받아서 만들어진것이라 속성들을 똑같이 가지고있지만 단지 상속되어있다는 것으로 버튼을 텍스트뷰라고하기는 애매한것 같다.