chapter 8.1 - 부동산 앱 화면 따라 만들기 (1) - 기초 화면 작성

이번 chapter 8은 기존에 배운 내용을 복습하는 겸 추가 기능을 다룰 것입니다.

이번 8.1은 만들 앱의 전체적인 구조를 만들 것입니다. 새로운 내용은 따로 없습니다.

8.2부터는 새로운 내용을 다룰 예정이어서 새로운 내용을 따라 할 생각이 있으시다면 직접 코드를 쳐보시는 것을 권합니다.

 

 

 

만약 이 글을 보고 연습하시는 분이 있다면 가장 먼저 올린 사진을 보고 따라 하신 후 코드를 비교하며 수정하기를 권합니다. 파이팅!

 

 

 

<부동산 앱 예시 화면>

 

저는 각 xml과 kt파일의 이름을 activity_main.xml, RoomAdapter.kt, Room.kt, room_list_item.xml, MainActivity.kt로 총 5개를 이용하였습니다.

가격을 제외한 나머지는 어댑터를 연결하여 정보가 보이도록 text를 사용하였습니다.

 

방들의 세부 정보

mRoomList.add( Room( 7500, "서울시 동대문구", 8, "동대문구의 8층 7500만원 방입니다." ) )
mRoomList.add( Room( 24500, "서울시 서대문구", 0, "서대문구의 반지하 2억 4500만원 방입니다." ) )
mRoomList.add( Room( 8500, "서울시 동작구", 0, "동작구의 반지하 8500만원 방입니다." ) )
mRoomList.add( Room( 4500, "서울시 은평구", -2, "은평구의 지하 2층 4500만원 방입니다." ) )
mRoomList.add( Room( 182500, "서울시 중랑구", 5, "중랑구의 5층 1억 18억 2500만원 방입니다." ) )
mRoomList.add( Room( 235000, "서울시 도봉구", 7, "도봉구의 7층 1억 23억 5000만원 방입니다." ) )
mRoomList.add( Room( 24000, "서울시 강남구", 19, "강남구의 19층 2억 4000만원 방입니다." ) )
mRoomList.add( Room( 3700, "서울시 서초구", -1, "서초구의 지하 1층 3700만원 방입니다." ) )

 

 

 

코드를 알려드리겠습니다.

 

 

 

코드를 작성한 곳은 activity_main.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:orientation="vertical">

    <ListView
        android:id="@+id/roomListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</LinearLayout>

 

코드를 작성한 곳은 RoomAdapter.kt입니다. 어댑터의 이름입니다.

 

package com.example.landapp2.adapters

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.TextView
import com.example.landapp2.R
import com.example.landapp2.datas.Room

class RoomAdapter(val mContext: Context,
                  val resId: Int,
                  val mList: ArrayList<Room>): ArrayAdapter<Room>(mContext, resId, mList){

    val inflater = LayoutInflater.from(mContext)

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {

        var tempRow = convertView
        if (tempRow == null) {
            tempRow = inflater.inflate(R.layout.room_list_item, null)
        }

        val row = tempRow!!

        val roomData = mList[position]

        val priceTxt = row.findViewById<TextView>(R.id.priceTxt)
        val addressAndFloorTxt = row.findViewById<TextView>(R.id.addressAndFloorTxt)
        val descriptionTxt = row.findViewById<TextView>(R.id.descriptionTxt)

        addressAndFloorTxt.text = roomData.address
        descriptionTxt.text = roomData.description

        return row
    }
}

 

코드를 작성한 곳은 Room.kt입니다. 방의 정보를 입력하는 곳입니다.

 

package com.example.landapp2.datas

class Room(
    val price: Int,
    val address: String,
    val floor: Int,
    val description: String) {
    
}

 

코드를 작성한 곳은 room_list_item.xml입니다. 뿌려질 한 줄의 모양을 만드는 곳입니다.

 

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 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="horizontal">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher"
            android:scaleType="centerCrop"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingLeft="10dp"
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/priceTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="8,000"
                android:textSize="23sp"
                android:textStyle="bold"
                android:textColor="#DD781C"/>

            <TextView
                android:id="@+id/addressAndFloorTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="동작구 상도동, 1층"
                android:textStyle="bold"
                android:textColor="@color/black"/>

            <TextView
                android:id="@+id/descriptionTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="방에 대한 설명 문구" />

        </LinearLayout>


    </LinearLayout>

</LinearLayout>

 

코드를 작성하는 곳은 MainActivity.kt입니다.

 

package com.example.landapp2

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.landapp2.adapters.RoomAdapter
import com.example.landapp2.datas.Room
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    val mRoomList = ArrayList<Room>()

    lateinit var mRoomAdapter: RoomAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mRoomList.add( Room( 7500, "서울시 동대문구", 8, "동대문구의 8층 7500만원 방 입니다." ) )
        mRoomList.add( Room( 24500, "서울시 서대문구", 0, "서대문구의 반지하 2억 4500만원 방 입니다." ) )
        mRoomList.add( Room( 8500, "서울시 동작구", 0, "동작구의 반지하 8500만원 방 입니다." ) )
        mRoomList.add( Room( 4500, "서울시 은평구", -2, "은평구의 지하 2층 4500만원 방 입니다." ) )
        mRoomList.add( Room( 182500, "서울시 중랑구", 5, "중랑구의 5층 1억 18억 2500만원 방 입니다." ) )
        mRoomList.add( Room( 235000, "서울시 도봉구", 7, "도봉구의 7층 1억 23억 5000만원 방 입니다." ) )
        mRoomList.add( Room( 24000, "서울시 강남구", 19, "강남구의 19층 2억 4000만원 방 입니다." ) )
        mRoomList.add( Room( 3700, "서울시 서초구", -1, "서초구의 지하 1층 3700만원 방 입니다." ) )

        mRoomAdapter = RoomAdapter(this, R.layout.room_list_item, mRoomList)
        roomListView.adapter = mRoomAdapter
    }
}