레이아웃 구성하기

드디어 레이아웃 구성에 대해 작성해보려고한다!!!! 사진자료들은 모두 졸업프로젝트에서 만들고있는 매직박스의 코드들이다.

 

1. 일단 레이아웃이란, 직관적으로 말하면 안드로이드 어플리케이션 화면 생김새를 결정하는 파일들이다.

맨 왼쪽에 보연 res > layout이 있고, 그 밑에 내가 만들어놓은 magicbox를 구성하는 레이아웃 xml파일들이 있다. 대부분 이름은 activity_(화면특징들어가는 단어)로 짓는다. 

 

2. layout 폴더를 우클릭하고 layout resource file을 클릭하면 새로운 레이아웃 xml 파일을 만들 수 있다. 만들고 나면 위와 같은 화면이 뜰것이다. 레이아웃 파일을 보는 방식은 2가지인데, 1)코드를 보는것 2)실제 디자인을 보는것 으로 나눌 수 있다. 보는 방식은 오른쪽 위에서  1)code 2) split 3)design으로 바꿀 수 있다. 

 

 

 

3. 레이아웃 코드를 작성할때는 직접 코드를 작성해도되고, 위 사진처럼 design 화면에서 palette를 통해서 직관적으로 작성하는것도 가능하다. (왼쪽에 있는 palette 툴에서 예를들어 button을 drag해서 핸드폰 화면같아 보이는 쪽에 drop하면 >> 화면에 버튼을 생성할 수 있다. >> 그리고 자동적으로 화면에 버튼을 생성하는 코드가 코드쪽 화면에 작성돼있다.)

 

 

지금까지 보여준 사진들은 magicbox 앱 화면중에서도 메인이 되는 로그인화면이다! 그럼 로그인화면의 실제코드를 보면서 레이아웃 구성방식을 이해해보자 (๑•̀ㅂ•́)و✧

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

//1. 이 화면의 전체적인 레이아웃을 설정하는 코드
//constraintlayout은 layout 속 구성요소들끼리의 관계를 통해 구성요소들 위치를 설정
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="#FFFFFF"
    tools:context=".MainActivity">

	//2. 전체 레이아웃 안에 또 레이아웃을 짤 수 있다. 
    //linearlayout은 layout 속 구성요소들을 한줄로 나열하는 방식
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="90dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/logo"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.496"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0" />

        <EditText
            android:id="@+id/text_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/id_hint"
            android:inputType="textPersonName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:layout_editor_absoluteY="390dp" />

        <TextView
            android:id="@+id/id_error"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="영문or숫자or특수문자(_)로 5-12자이내에서 작성해주세요"
            android:textColor="@color/colorError"
            android:textSize="12sp"
            android:visibility="gone" />

        <EditText
            android:id="@+id/text_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/pw_hint"
            android:inputType="textPassword"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:layout_editor_absoluteY="447dp" />

        <TextView
            android:id="@+id/pw_error"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="영어,숫자 포함 8-15자로 작성해주세요"
            android:textColor="@color/colorError"
            android:textSize="12sp"
            android:visibility="gone" />

        <Space
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp" />

        <Button
            android:id="@+id/button_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/button"
            android:text="로그인"
            android:textColor="@color/colorTheme_yellow"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />

        <Space
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp" />

        <Button
            android:id="@+id/button_signin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00FFFFFF"
            android:text="아직 가입을 안하셨나요?"
            android:textColor="@color/colorTheme_black"
            android:textSize="15sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />

    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

코드는 크게보면:

<레이아웃>
레이아웃정보작성
   
    <구성요소>
    구성요소 위치코드(레이아웃에 맞춰서)

          구성요소정보작성
          구성요소정보작성

    </구성요소>

</레이아웃>

이런식으로 구성되어있다!! 맨바깥에 구성요소들을 어떤 레이아웃에 따라 위치시킬건지 명시해놓고, 그 레이아웃에 따라 위치시킬 구성요소들을 레이아웃 코드 안쪽에 작성하는것이다 :D!

레이아웃의 구성요소로 레이아웃을 넣을수도있다.

 

코드를 조금 떠 뜯어보자.

1. 모든 코드를 감싸고 있는 레이아웃코드이다!! 즉 이 화면 자체에 대한 레이아웃을 정하는거다 > 레이아웃도 종류가 다양한데 그중에서 constraintlayout을 사용하였다. 사실 제일 많이 사용하는 레이아웃 종류다! 화면 안 다양한 요소들간의 관계를 통해 요소들을 위치시키는 방식이라 유연한편이다.

     1)<>여기 안에다가 어떤 종류의 레이아웃인지 적고,

     2)<>~</> 사이에 이 레이아웃의 정보를 적어준다. 

            위 코드에서 예시를 들어 설명하면, android:background="#ffffff"은 이 레이아웃의 배경색을 흰색으로 설정해 

            주는 코드이다. 1번 레이아웃은 화면 전체에 대한 레이아웃이니까, 화면전체 배경색이 흰색으로 고정된다.

 

2. 화면 레이아웃 안의 또 다른 레이아웃을 설정한것 > linearlayout은 요소들을 일렬로 나열하겠다는 뜻이다. 레이아웃 정보코드에서 android:orientation="vertical"는 일렬로 나열하는데, 세로로 나열하겠다는 뜻이다. 반대로 ""안에 horizontal이라고 쓰면 가로로 나열한다는 뜻!

 

3. linearlayout안에는 다양한 화면 구성요소들이 적혀있다. 간단히만 설명하려고한다!

     1)<여기 옆에 역시 어떤 구성요소인지 적어준다. ImageView는 이미지, TextView는 글씨, EditText는 사용자가 입력

        할 수 있는 입력칸이 된다. 그외에도 Button, spinner, calender등 다양하게 있다. 추가적으로 space는 아무 기능도

        없고, 구성요소와 구성요소 사이에 빈칸을 만들어주는 요소이다! (구성요소간 거리조정 시 사용)

     

     2)< /> 사이에 구성요소 정보를 적어준다. 배경색, 크기, text라면 어떤 글씨를 보여줄것인지, 글씨 크기 등등이 들어

        간다. 이중에 좀 중요하다고 생각되는 코드는 android:id="@+id/~~~"이다! 나중에 .java 파일들에서 실직적인 구

        동방식을 적게되는데 이때, activity_main에 있는 로그인 버튼을 누르면 ~~를 해라! 이런식으로 적어줘야하는데,

        id가 없으면 컴퓨터에게 어떤 버튼이 로그인 버튼인지 알려줄 길이없다! 즉, id는 각 구성요소들을 코드안에서 뭐

        라고 불러줄지를 정하는 일종의 별명같은거다.

 

대충 오늘은 여기서 일단락하도록하자!