02-3 상대 레이아웃

상대레이아웃보다는 제약레이아웃이 권장된다. 하지만 간단하게 만들수 있기 때문에 아직도 많이 사용한다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    xmlns:app="<http://schemas.android.com/apk/res-auto>"
    xmlns:tools="<http://schemas.android.com/tools>"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@id/button3"
        android:text="Button"
        android:layout_above="@id/button2"
        android:background="#ff0088ff"/>

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

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

</RelativeLayout>

02-4 테이블 레이아웃

표나 엑셀시트 같은 형태로 화면을 구성하는 레이아웃이다.

테이블 레이아웃에는 TableRow라는 태그가 들어가는데 이는 하나의 행을 의미한다. TableRow안에는 여러개의 뷰가 들어가며, 각각의 뷰가 열이 되는 방식이다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    xmlns:app="<http://schemas.android.com/apk/res-auto>"
    xmlns:tools="<http://schemas.android.com/tools>"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="0,1,2">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

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

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <EditText
                android:id="@+id/editTextTextPersonName2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_span="2"
                android:ems="10"
                android:inputType="textPersonName"
                android:text="Name" />

            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </TableLayout>
</LinearLayout>

02-5 프레임 레이아웃과 뷰의 전환

프레임 레이아웃은 하나의 뷰만 화면에 표시하는 단순한 레이아웃이다. 프레임 레이아웃은 자주 사용된다.

프레임 레이아웃의 핵심은 중첩(Overlay)이다. 하나 이상의 뷰를 추가하면 추가된 순서대로 차곡차곡 쌓인다. 가장 먼저 추가한 뷰가 가장 아래쪽에 쌓이고, 그 다음에 추가한 뷰는 차례대로 위에 쌓인다. 마지막에는 가장 나중에 쌓인 뷰만 보이게 된다.

위의 뷰를 보이지 않게 하면 아래쪽의 뷰가 보이게 된다. 이러한 가시성(Visibility)속성을 이용하여 뷰를 전환할 때 사용한다.

뷰는 xml화면이나, java의 addView메소드를 통해서 추가할 수 있다.

또 가시성 속성은 xml에서는 visibility로 설정하고 자바 소스코드에서는 setVisibility메소드를 사용한다.

public class MainActivity extends AppCompatActivity {

    ImageView view1;
    ImageView view2;

    int imageIndex=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        view1 = findViewById(R.id.imageView);
        view2 = findViewById(R.id.imageView2);
    }

    public void onButton1Clicked(View view) {
        changeImage();
    }

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

            imageIndex=1;
        }else if(imageIndex == 1){
            view1.setVisibility(View.INVISIBLE);
            view2.setVisibility(View.VISIBLE);

            imageIndex=0;
        }
    }
}

<aside> 💡 하나의 화면은 XML파일과 소스 파일로 나눠져 있다. 이 두개의 파일이 쌍을 이뤄서 하나의 화면이 만들어지고, 소스파일에 어떤 XML파일과 쌍을 이루는지에 대한 정보가 있다. 액티비티 소스파일에서는 setContentView라는 메소드의 파라미터로 XML파일을 넘겨줄 수 있는데 이를 통해 소스파일과 XML파일이 연결된다.

</aside>

<aside> 💡 findViewById라는 메소드는 ID를 이용해 뷰를 찾는다는 뜻이다. XML파일에 추가한 뷰에는 ID값을 할당할 수 있다. 소스파일에서는 이 ID를 사용해 메모리에 만들어진 뷰 객체를 찾을 수 있는 것이다.

</aside>