03_앱 레이아웃 따라하기 실전-1

이번 글에서는 앱 레이아웃 따라하기 실전편 1을 다루도록 하겠다.

 

시작하기에 앞서 공부한 내용을 정리하는 것이기 때문에 내용이 잘못되었을 수도 있다.

 

 

레이아웃 구성은 기존에 계속해 다루었던, .XML파일이 아닌 MainActivity.java에서 다루게 된다.

 

레이아웃에서 TextView는 기존에 설명을 했기 때문에, 여기서는 ImageView와 EditText, Button에 대해 설명하겠다.

 

---

1. ImageView

ImageView는 기본적으로 그림을 넣고자 할 때 사용하는 것이라고 인지하고 있으면 된다.

ImageView는 구현하는 방식이 크게 2가지가 있다.

1) android:background

기존에도 배웠던 함수이지만, 이 방식으로 구현하면 이미지가 칸에 맞춰 채워지기 때문에 온전한 이미지를 넣는 것이 힘들다. 물론, 해결책도 존재하지만 뒤에서 설명한다.

2) android:src

먼저 이 방식을 사용하려면 android:background를 다음과 같이 설정해야 한다.

andriod:background="@null"

src는 background와는 다르게 이미지 크기를 해당 칸에 넣는다는 개념이다.

코드는 아래와 같다.

android:src="@ipmap/ic_launcher"

형식은

android:src="이미지 경로 또는 명령어"

이다.

 

 

2. EditText

EditText는 흔히 애플리케이션에서 보는 입력창이라고 생각하면 된다. 다만, 이 입력창이 무엇인지 나타내는 텍스트 창은 넣을 수 없기에 이점을 유의해야 한다. 물론, 좀 더 발전된 방식이 있지만 후에 설명한다.

코드는 아래와 같다.

<EditText
    andriod:layout_width="match_parent"
    android:layout_height="50dp" />

 

 

3. Button

Button은 너무 쉬운 도구 중 하나이다. 코드도 간편하고, 심지어 글자도 넣을 수 있다.

Button에 대한 코드는 다음과 같다.

<Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Login"
        />

글자를 넣는부분은 android:text 이다.

 

---

다음으로 TextView를 병렬 배열하는 법을 알아보겠다.

 

흔히 LinearLayout(Vertical)에서 TextView를 병렬 배열 하려면 레이아웃 안에 또 다른 LinearLayout을 정의하면 된다.

물론, 제대로 구역을 나누려면 저번 글에서 알아본 weight를 사용하여 구역을 정확히 나누는 것이 좋다.

 

아래는 이번에 작성해본 전반적인 코드이다.

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

    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="24sp"
        android:text="LOGIN"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:src="@mipmap/ic_launcher"
        android:gravity="center"
        />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Login"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Or"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Login"
        />

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="5"
            android:textSize="24sp"
            android:text="Find Password"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="5"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="24sp"
            android:text="Sign Up"/>
    </LinearLayout>

</LinearLayout>

아래는 위 코드를 돌린 결과물이다.

실행 결과

다음 글에는 "앱 레이아웃 따라하기 실전편 2"을 다루겠다.

 

잘못된 점이나 지적 사항이 있으면 댓글로 알려주시면 언제든 다시 해보겠습니다.

 

▼ 이전글

2021.12.29 - [앱 개발/안드로이드] - 02_화면그리기, 레이아웃

02_화면그리기, 레이아웃

▼ 다음글

2022.01.01 - [앱 개발/안드로이드] - 04_앱 레이아웃 따라하기 실전-2

04_앱 레이아웃 따라하기 실전-2