기타 레이아웃

RelativeLayout

 

RelativeLayout 은 레이아웃 내부에 포함된 widget 을 상대적인 위치로 배치한다.

RelativeLayout 안에 포함된 widget은 자신의 위치를 RelativeLayout 의 어디쯤에 위치시킬 것인지 지정해야 한다.

RelativeLayout 에 있는 위젯의 위치와 관련된 속성은 크게 두 부류로 나눌 수 있다.

상하좌우에 배치하거나 다른 위젯의 상대적 위치를 변경할 수 있다.

 

XML Code

 

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="위쪽"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="좌측"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="중앙"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="우측"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="아래"/>


</RelativeLayout>

 

 

XML Code

 

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

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:id="@+id/baseBtn"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="기본 위젯"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1번"
        android:layout_alignTop="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2번"
        android:layout_alignBaseline="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3번"
        android:layout_alignBottom="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/baseBtn"
        android:layout_alignLeft="@+id/baseBtn"
        android:text="4번"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/baseBtn"
        android:layout_below="@+id/baseBtn"
        android:text="5번"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/baseBtn"
        android:layout_toRightOf="@+id/baseBtn"
        android:text="6번"/>

</RelativeLayout>

 

 

XML Code

 

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/baseBtn1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="기준1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/baseBtn2"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="기준2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/baseBtn2"
        android:layout_toRightOf="@+id/baseBtn1"
        android:text="1번"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/baseBtn1"
        android:text="2번"/>

</RelativeLayout>

 

 

연습 ) 다음 화면을 LinearLayout, RelativeLayout 으로 작성하기

 

 

LinearLayout 으로 작성한 XML Code

 

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="전화번호"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="여기를 입력하세요"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="입력"
            android:layout_margin="10dp"
            android:background="#00FF00" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="취소"
            android:layout_margin="10dp"
            android:background="#00FF00" />

    </LinearLayout>


</LinearLayout>

 

RelativeLayout 으로 작성한 XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="전화번호"
        android:id="@+id/baseText"
        android:layout_margin="15dp"
        android:layout_alignPraentLeft="true"
        android:layout_alignParentTop="true"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="여기를 입력하세요"
        android:layout_toRightOf="@+id/baseText"
        android:id="@+id/baseEdit"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FF00"
        android:text="입력"
        android:id="@+id/baseBtn"
        android:layout_margin="10dp"
        android:layout_alignRight="@+id/baseEdit"
        android:layout_below="@+id/baseEdit"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FF00"
        android:text="입력"
        android:layout_margin="10dp"
        android:layout_alignBaseline="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn" />

</RelativeLayout>

 

두 XML Code 를 작성한 결과 진짜 쓸 일 아니면 쓸 일이 없을 것 같은 RelativeLayout 이였다.

 

TableLayout

 

TableLayout 은 주로 widget 을 표 형태로 배치할 때 사용한다.

TableLayout을 사용하여 행과 열의 수를 정하고 그 안에 위젯을 배치하면 편리하다.

<TableRow> 와 함께 사용되는데 <TableRow> 의 수가 바로 행의 수가 된다.

그리고 열의 수는 <TableRow> 안에 포함된 위젯의 수로 결정된다.

 

TableLayout 에서 설정되는 속성 중 layout_span, layout_column, stretchColumns 가 있다.

layout_span 과 layout_column 은 TableLayout 안에 포함된 위젯에 설정하는 속성이다.

 

layout_span => 열을 합쳐서 표시하는 의미로 layout_span = "2" 는 현재 셀부터 2개의 셀을 합쳐서 표시함

layout_column => 지정된 열의 현재 위젯을 표시하는 의미stretchColumns => <TableLayout> 자체에 설정하는 속성으로 지정된 열의 폭을 늘리라는 의미

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TableRow>
        <Button
            android:text="1"/>
        <Button
            android:layout_span="2"
            android:text="2" />
        <Button
            android:text="3"/>
    </TableRow>

    <TableRow>
        <Button
            android:layout_column="1"
            android:text="4"/>
        <Button
            android:text="5" />
        <Button
            android:text="6"/>
    </TableRow>

</TableLayout>

 

 

연습 ) TableLayout 을 이용하여 계산기 앱 만들기

 

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TableRow
        android:gravity="center">
        <EditText
            android:id="@+id/edit1"
            android:layout_span="4"
            android:hint="숫자1 입력" />
    </TableRow>

    <TableRow
        android:gravity="center">
        <EditText
            android:id="@+id/edit2"
            android:layout_span="4"
            android:hint="숫자2 입력" />
    </TableRow>

    <TableRow
        android:gravity="center">
        <Button
            android:id="@+id/btn0"
            android:text="0" />
        <Button
            android:id="@+id/btn1"
            android:text="1" />
        <Button
            android:id="@+id/btn2"
            android:text="2" />
        <Button
            android:id="@+id/btn3"
            android:text="3" />
    </TableRow>

    <TableRow
        android:gravity="center">
        <Button
            android:id="@+id/btn4"
            android:text="4" />
        <Button
            android:id="@+id/btn5"
            android:text="5" />
        <Button
            android:id="@+id/btn6"
            android:text="6" />
        <Button
            android:id="@+id/btn7"
            android:text="7" />
    </TableRow>

    <TableRow
        android:gravity="center">
        <Button
            android:id="@+id/btn8"
            android:text="8" />
        <Button
            android:id="@+id/btn9"
            android:text="9" />
    </TableRow>

    <TableRow
        android:gravity="center">
        <Button
            android:layout_span="4"
            android:text="더하기"
            android:id="@+id/addBtn"/>
    </TableRow>

    <TableRow
        android:gravity="center">
        <Button
            android:layout_span="4"
            android:text="빼기"
            android:id="@+id/subtractBtn"/>
    </TableRow>

    <TableRow
        android:gravity="center">
        <Button
            android:layout_span="4"
            android:text="곱하기"
            android:id="@+id/multiplyBtn"/>
    </TableRow>

    <TableRow
        android:gravity="center">
        <Button
            android:layout_span="4"
            android:text="나누기"
            android:id="@+id/divideBtn"/>
    </TableRow>

    <TableRow
        android:gravity="center">
        <TextView
            android:layout_span="4"
            android:text="계산 결과 : "
            android:textColor="#FF0000"
            android:textSize="25dp"
            android:id="@+id/text1"/>
    </TableRow>

</TableLayout>

 

Java Code

 

public class MainActivity extends AppCompatActivity{

    EditText edit1, edit2;
    Button []btn = new Button[10];
    int []btnId = {R.id.btn0, R.id.btn1,R.id.btn2, R.id.btn3,
            R.id.btn4, R.id.btn5,R.id.btn6, R.id.btn7,
            R.id.btn8, R.id.btn9};
    Button addBtn, subBtn, mulBtn, divBtn;
    TextView text;

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

        edit1=(EditText)findViewById(R.id.edit1);
        edit2=(EditText)findViewById(R.id.edit2);

        for(int i=0; i<btn.length; i++){
            btn[i] = (Button)findViewById(btnId[i]);
            final int Number = i;
            btn[i].setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if(edit1.isFocused()){
                        String s = edit1.getText().toString();
                        edit1.setText(s + Integer.toString(Number));
                    }
                    else if(edit2.isFocused()){
                        String s = edit2.getText().toString();
                        edit2.setText(s + Integer.toString(Number));
                    }
                }
            });
        }

        addBtn = (Button)findViewById(R.id.addBtn);
        subBtn = (Button)findViewById(R.id.subtractBtn);
        mulBtn = (Button)findViewById(R.id.multiplyBtn);
        divBtn = (Button)findViewById(R.id.divideBtn);
        text = (TextView)findViewById(R.id.text1);

        addBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int x = Integer.parseInt(edit1.getText().toString());
                int y = Integer.parseInt(edit2.getText().toString());
                text.setText("계산 결과 : " + (x+y));
            }
        });

        subBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int x = Integer.parseInt(edit1.getText().toString());
                int y = Integer.parseInt(edit2.getText().toString());
                text.setText("계산 결과 : " + (x-y));
            }
        });

        mulBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int x = Integer.parseInt(edit1.getText().toString());
                int y = Integer.parseInt(edit2.getText().toString());
                text.setText("계산 결과 : " + (x*y));
            }
        });

        divBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int x = Integer.parseInt(edit1.getText().toString());
                int y = Integer.parseInt(edit2.getText().toString());
                if(y==0) text.setText("0으로 나누실 수 없습니다!");
                else text.setText("계산 결과 : " + (x/y));
            }
        });

    }
}

 

Java Code 에서 final 상수를 사용한 이유는 익명 클래스 안에서 i 를 직접 사용하는 경우 Error 가 발생하기 때문

 

GridLayout

 

GridLayout 도 TableLayout 과 마찬가지로 widget 을 표 형태로 배치할 때 사용하지만 좀 더 직관적이다.

또한 테이블레이아웃에서 좀 어려웠던 행 확장 또한 간단하게 할 수 있어서 flexible 한 화면 구성에 적합하다.

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:rowCount="2">

    <Button
        android:layout_column="0"
        android:layout_row="0"
        android:layout_rowSpan="2"
        android:layout_gravity="fill_vertical"
        android:text="1"/>

    <Button
        android:layout_column="1"
        android:layout_row="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="2"/>

    <Button
        android:layout_column="3"
        android:layout_row="0"
        android:text="3"/>

    <Button
        android:layout_column="1"
        android:layout_row="1"
        android:text="4"/>

    <Button
        android:layout_column="2"
        android:layout_row="1"
        android:text="4"/>

    <Button
        android:layout_column="3"
        android:layout_row="1"
        android:text="4"/>

</GridLayout>

 

 

FrameLayout

 

FrameLayout 은 단순히 레이아웃 내의 widget을 왼쪽 상단부터 겹쳐서 출력해준다.

FrameLayout 은 그 자체를 사용하기 보다는 탭 위젯 등과 혼용할 때 유용하다.

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/lion"
    android:foregroundGravity="center|fill_horizontal">

    <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/oreo"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</FrameLayout>