안드로이드 스튜디오 레이아웃&스크롤뷰(배달의 민족 앱 만들어보기)

 

 

※ 이 프로젝트는 앱 개발 경험을 쌓기 위한 프로젝트이며 절대 상업적 용도로는 사용하지 않습니다. 

 

 

 

이번 포스팅에서는 기기별 디스플레이를 고려한 레이아웃과 스크롤뷰를 적용해 화면 스크롤이 가능하도록 코드를 작성해보겠습니다.

 

 

먼저 기존 버튼의 코드를 보면

<activity_main.xml>

<!--생략-->

<Button
                android:id="@+id/btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="한식" />
                
<!--생략-->

 

이렇게 width, height가 wrap_content로 되어 있습니다. 글자 크기만큼을 버튼 크기로 하겠다는 뜻인데, 저는 좀 더 깔끔하게 보이기 위해 padding을 사용했습니다.

 

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="한식"
                android:padding="15dp"/>

 

padding을 사용하면 버튼 크기를 좀 더 여유있게 만들 수 있어 보기에도 더 편하다는 생각이 듭니다.

 

 

다음은 본격적으로 레이아웃 부분입니다.  

 

weight를 사용해서 기기별로 디스플레이의 너비가 다르더라도 버튼의 위치를 일정한 비율로 유지할 수 있도록 지정할 수 있습니다.

 

<activity_main.xml>

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


            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1인분"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:padding="15dp"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:text="한식"
                android:padding="15dp"/>



        </LinearLayout>

 

버튼을 감싸고 있는 LinearLayout에서(5번 줄) weight를 4라고 지정했습니다.

 

자식으로 볼 수 있는 Button의 코드를 보면 둘 다 layout_weight = "2" 라고 되어 있습니다.   

 

두 버튼이 동일한 비율로 디스플레이를 차지하겠다는 뜻입니다.

 

예를 들어 1인분 버튼을 1로, 한식 버튼을 3으로 지정한다면 1인분 버튼이 차지하는 비율이 더 작게됩니다. 

 

저는 버튼이 4개니까 다음과 같이 지정해주었습니다.

 

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">



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

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


            <Button
                android:id="@+id/btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:text="선물하기"
                android:padding="15dp"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:text="포장/방문"
                android:padding="15dp"/>

        </LinearLayout>

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


            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1인분"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:padding="15dp"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:text="한식"
                android:padding="15dp"/>


        </LinearLayout>

    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

 

아, 그리고 LinearLayout에서 android:layout_width="match_parent" 로 설정해주셔야 디스플레이 크기의 영향을 받지 않습니다.

 

무조건 디스플레이 크기만큼 레이아웃을 차지하겠다는 뜻입니다.

 

 

 

마지막으로, 스크롤 뷰를 적용해보겠습니다.

 

스크롤뷰 적용은 간단합니다. 전체 코드를 감싸주기만 하면 됩니다.

 

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">



    <ScrollView
        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="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="배너 공간"
            android:textSize="100dp"/>
            

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


            <Button
                android:id="@+id/btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:text="선물하기"
                android:padding="15dp"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:text="포장/방문"
                android:padding="15dp"/>

        </LinearLayout>

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


            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1인분"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:padding="15dp"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_margin="20dp"
                android:text="한식"
                android:padding="15dp"/>


        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="스크롤 뷰 테스트 중입니다."
            android:textSize="150dp">

        </TextView>


    </LinearLayout>



    </ScrollView>


</androidx.constraintlayout.widget.ConstraintLayout>

 

다음 포스팅에서 만들어볼 배너 위치를 텍스트뷰가 차지하도록 구현해놨습니다.

 

 

일반 휴대폰과 폴더블(가로가 넓은 형태) 휴대폰으로 테스트 해보았습니다. 

 

<일반 휴대폰> 

+동영상의 광고는 제가 붙이는 것이 아니라 카카오TV에서 붙입니다...

 

 

 

<폴더블 휴대폰>

 

 

 

두 기종 다 비율 적용이 잘 되는 것을 확인할 수 있습니다.

 

 

 

다음 포스팅에서는 배달의 민족 어플의 메인 화면에 있는 배너와 하단 고정 버튼을 구현해보도록 하겠습니다.