드디어 레이아웃 구성에 대해 작성해보려고한다!!!! 사진자료들은 모두 졸업프로젝트에서 만들고있는 매직박스의 코드들이다.
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는 각 구성요소들을 코드안에서 뭐
라고 불러줄지를 정하는 일종의 별명같은거다.
대충 오늘은 여기서 일단락하도록하자!
'ANDROID' 카테고리의 다른 글
[졸업프로젝트 개발일지] 안드로이드 심화 - 서버와 협업하는 앱 만들기 (0) | 2021.01.29 |
---|---|
졸업프로젝트 스타트13팀 안드로이드 구현 & 학습 (0) | 2020.12.08 |
magicbox앱 코드로 이벤트 배우기 (0) | 2020.11.21 |
새프로젝트 시작하기 + 깃허브 사용하기 (0) | 2020.11.21 |