안드교양 7주차 레이아웃, 시험범위

시험범위 렐러티브 레이아웃 까지 !

렐러티브 레이아웃으로 페이지 만들기랑, 위젯 속성(button - backgroundtint로 하는거나 edittext에는 힌트가 있고 등등 위젯 마다 다른 속성, 토스트메세지 이벤트로 텍스트 변경하는거 등등이 나온다)

xml 화면 구성이나 이벤트 등등을 주의깊게 보자

 

리니어 레이아웃 정렬

<?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"
    android:background="#FF0"
    android:orientation="vertical"
    android:gravity="center">

    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="#ff00"
        android:gravity="center">
        <LinearLayout
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:background="#0f0">

        </LinearLayout>
    </LinearLayout>


</LinearLayout>

RelativeLayout

시작은 좌상단, layout_alignParent방향 속성으로 위치 지정 가능, 리니어와 다르게 각각 위치시켜야한다

 

<?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">
    <TextView
        android:text="text5번"
        android:textSize="40dp"
        android:layout_centerInParent="true"
        android:padding="10dp"
        android:background="#0ff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:text="text6번"
        android:textSize="40dp"
        android:layout_centerInParent="true"
        android:layout_alignParentLeft="true"
        android:padding="10dp"
        android:background="#f0a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:text="text8번"
        android:textSize="40dp"
        android:layout_centerHorizontal="true"
        android:padding="10dp"
        android:background="#f0a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:text="text9번"
        android:textSize="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:padding="10dp"
        android:background="#f0a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:text="text1번"
        android:textSize="40dp"
        android:padding="10dp"
        android:background="#0f0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:layout_alignParentRight="true"
        android:text="text2번"
        android:textSize="40dp"
        android:padding="10dp"
        android:background="#f00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="text3번"
        android:textSize="40dp"
        android:textColor="#fff"
        android:padding="10dp"
        android:background="#00f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="text4번"
        android:textSize="40dp"
        android:padding="10dp"
        android:background="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


</RelativeLayout>

RelativeLayout을 위젯 id 기준으로 요소 찾기

base 기준으로 상하좌우에 요소를 정렬했다

<?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">

    <TextView
        android:layout_centerInParent="true"
        android:id="@+id/base"
        android:text="base"
        android:textSize="40dp"
        android:textAlignment="center"
        android:background="#f00"
        android:layout_width="150dp"
        android:layout_height="150dp"/>
    <TextView
        android:layout_toLeftOf="@+id/base"
        android:layout_alignTop="@+id/base"
        android:text="1"
        android:textSize="30dp"
        android:padding="10dp"
        android:background="#800f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_toRightOf="@+id/base"
        android:layout_alignTop="@+id/base"
        android:text="1"
        android:textSize="30dp"
        android:padding="10dp"
        android:background="#800f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_toLeftOf="@+id/base"
        android:layout_alignBottom="@+id/base"
        android:text="3"
        android:textSize="30dp"
        android:padding="10dp"
        android:background="#8ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:layout_toRightOf="@+id/base"
        android:layout_alignBottom="@+id/base"
        android:text="4"
        android:textSize="30dp"
        android:padding="10dp"
        android:background="#8ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_above="@+id/base"
        android:layout_alignLeft="@+id/base"
        android:text="5"
        android:textSize="30dp"
        android:padding="10dp"
        android:background="#8ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_above="@+id/base"
        android:layout_alignRight="@+id/base"
        android:text="6"
        android:textSize="30dp"
        android:padding="10dp"
        android:background="#8ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_below="@+id/base"
        android:layout_alignLeft="@+id/base"
        android:text="7"
        android:textSize="30dp"
        android:padding="10dp"
        android:background="#8ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_below="@+id/base"
        android:layout_alignRight="@+id/base"
        android:text="8"
        android:textSize="30dp"
        android:padding="10dp"
        android:background="#8ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

기준 여러개로 만드는 렐러티브 레이아웃

<?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">

    <TextView
        android:id="@+id/base1"
        android:text="기준1"
        android:textSize="40dp"
        android:padding="10dp"
        android:textColor="#fff"
        android:background="#008"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:id="@+id/base2"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="기준2"
        android:textSize="40dp"
        android:padding="10dp"
        android:textColor="#fff"
        android:background="#008"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_toRightOf="@+id/base1"
        android:layout_above="@+id/base2"
        android:text="text1"
        android:textSize="40dp"
        android:padding="10dp"
        android:background="#eea"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_below="@+id/base1"
        android:layout_alignParentRight="true"
        android:text="text2"
        android:textSize="40dp"
        android:padding="10dp"
        android:background="#eea"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

 

실습

 

전화번호 화면 만들기

<?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">


    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="전화번호"
        android:textSize="30dp"
        android:layout_marginTop="5dp"/>

    <EditText
        android:id="@+id/edit1"
        android:layout_toRightOf="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="000-0000-0000"
        android:textSize="30dp" />
    <Button
        android:id="@+id/btn1"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text1"
        android:layout_alignParentRight="true"
        android:textSize="30dp"
        android:text="cancel"
        android:backgroundTint="#0f0"/>
    <Button
        android:id="@+id/btn2"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/text1"
        android:layout_toLeftOf="@id/btn1"
        android:layout_marginRight="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#0f0"
        android:textSize="30dp"
        android:text="ok"/>


</RelativeLayout>