[Kotlin] 도서 검색 앱 만들기１

도서 검색 앱을 만들기 전에 Retrofit2에 대해서 알아보도록 해봅시다.

 

▪️Fragment

https://jslee-tech.tistory.com/13

(Retrofit2) 1. 시작하기

 

먼저 UI 구성부터 했으며 총 5개의 파일로 만들었습니다.

 

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">

    <FrameLayout
        android:id="@+id/act_main_screen"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".fragment.HomeFragment"
    android:padding="5dp">

    <LinearLayout
        android:id="@+id/fra_hom_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SearchBook"
            android:textSize="20dp"
            android:textColor="@color/black"
            android:fontFamily="@font/gothic_bold"
            android:layout_gravity="center"/>

    </LinearLayout>

    <Space
        android:id="@+id/fra_hom_space1"
        android:layout_width="match_parent"
        android:layout_height="5dp"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fra_hom_top"/>

    <LinearLayout
        android:id="@+id/fra_hom_search_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp"
        android:background="@drawable/background_round"
        android:backgroundTint="#EAEAEA"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fra_hom_space1">

        <EditText
            android:id="@+id/fra_hom_search_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="책 제목을 입력하세요"
            android:textSize="15dp"
            android:textColor="@color/black"
            android:fontFamily="@font/gothic_bold"
            android:background="@null"
            android:padding="5dp"
            android:inputType="text"
            android:maxLines="1"/>

        <Space
            android:layout_width="5dp"
            android:layout_height="match_parent"/>

        <ImageView
            android:id="@+id/fra_hom_search_button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/icon_search"
            android:background="#EAEAEA"
            android:layout_gravity="center"/>

    </LinearLayout>

    <Space
        android:id="@+id/fra_hom_space2"
        android:layout_width="match_parent"
        android:layout_height="10dp"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fra_hom_search_bar"/>

    <TextView
        android:id="@+id/fra_hom_empty_history"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="❗최근 검색한 책이 없습니다"
        android:textSize="20dp"
        android:textColor="@color/black"
        android:fontFamily="@font/gothic_regular"
        android:gravity="center"
        android:visibility="gone"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fra_hom_space2"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <LinearLayout
        android:id="@+id/fra_hom_history"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fra_hom_space2"
        app:layout_constraintBottom_toBottomOf="parent">

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="▪최근 검색한 책"
                android:textSize="17dp"
                android:textColor="@color/black"
                android:fontFamily="@font/gothic_bold"/>

            <Space
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>

            <TextView
                android:id="@+id/fra_hom_history_delete_all"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="비우기"
                android:textSize="13dp"
                android:textColor="#E91E63"
                android:fontFamily="@font/gothic_regular"
                android:textStyle="bold"
                android:layout_gravity="center"/>

        </LinearLayout>

        <Space
            android:layout_width="match_parent"
            android:layout_height="5dp"/>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/fra_hom_history_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

fragment_searce.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".fragment.SearchFragment"
    android:padding="5dp">

    <LinearLayout
        android:id="@+id/fra_sea_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/fra_sea_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_back"
            android:layout_gravity="center"/>

        <Space
            android:layout_width="5dp"
            android:layout_height="match_parent"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:background="@drawable/background_round"
            android:backgroundTint="#EAEAEA"
            android:padding="5dp">

            <EditText
                android:id="@+id/fra_sea_search_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="책 제목을 입력하세요"
                android:textSize="15dp"
                android:textColor="@color/black"
                android:fontFamily="@font/gothic_bold"
                android:background="@null"
                android:padding="5dp"
                android:inputType="text"
                android:maxLines="1"/>

            <Space
                android:layout_width="5dp"
                android:layout_height="match_parent"/>

            <ImageView
                android:id="@+id/fra_sea_search_button"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/icon_search"
                android:background="#EAEAEA"
                android:layout_gravity="center"/>

        </LinearLayout>

    </LinearLayout>

    <Space
        android:id="@+id/fra_sea_space1"
        android:layout_width="match_parent"
        android:layout_height="10dp"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fra_sea_top"/>

    <TextView
        android:id="@+id/fra_sea_empty_search_list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="❗검색 결과가 없습니다"
        android:textSize="20dp"
        android:textColor="@color/black"
        android:fontFamily="@font/gothic_regular"
        android:gravity="center"
        android:visibility="gone"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fra_sea_space1"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/fra_sea_search_list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        android:visibility="gone"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fra_sea_space1"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

history_list_item.xml

<?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="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/history_list_item_search_word"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="책 제목"
        android:textColor="@color/black"
        android:textSize="15dp"
        android:fontFamily="@font/gothic_bold"
        android:layout_gravity="center"/>

    <ImageView
        android:id="@+id/history_list_item_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_delete"/>

</LinearLayout>

 

search_list_item.xml

<?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="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:padding="10dp"
    android:background="@drawable/list_round"
    android:backgroundTint="#EAEAEA">

    <ImageView
        android:id="@+id/search_list_item_thumbnail"
        android:layout_width="170dp"
        android:layout_height="245dp"
        android:background="@color/black"/>

    <Space
        android:layout_width="5dp"
        android:layout_height="match_parent"/>

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

        <TextView
            android:id="@+id/search_list_item_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gothic_regular"
            android:text="책 제목"
            android:textColor="@color/black"
            android:textSize="16dp"
            android:textStyle="bold"/>

        <Space
            android:layout_width="match_parent"
            android:layout_height="5dp"/>

        <TextView
            android:id="@+id/search_list_item_authors"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gothic_regular"
            android:text="저자"
            android:textColor="@color/black"
            android:textSize="14dp"/>

        <Space
            android:layout_width="match_parent"
            android:layout_height="5dp"/>

        <TextView
            android:id="@+id/search_list_item_contents"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gothic_regular"
            android:text="책 줄거리"
            android:textColor="@color/black"
            android:textSize="15dp"
            android:maxLines="7"/>

        <Space
            android:layout_width="match_parent"
            android:layout_height="5dp"/>

        <TextView
            android:id="@+id/search_list_item_price"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gothic_regular"
            android:text="정가"
            android:textColor="@color/black"
            android:textSize="14dp"/>

        <Space
            android:layout_width="match_parent"
            android:layout_height="5dp"/>

        <TextView
            android:id="@+id/search_list_item_status"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gothic_regular"
            android:text="판매여부"
            android:textColor="@color/black"
            android:textSize="14dp"/>

        <Space
            android:layout_width="match_parent"
            android:layout_height="5dp"/>

        <TextView
            android:id="@+id/search_list_item_url"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:baselineAligned="false"
            android:fontFamily="@font/gothic_bold"
            android:text="🔍 책 정보 자세히 보기"
            android:textColor="#2196F3"
            android:textSize="14dp"/>

    </LinearLayout>

</LinearLayout>

 

activity_main.xml : Fragment를 띄워 줄 액티비티

fragment_home.xml : 메인 화면이 될 프래그먼트

fragment_search.xml : 검색 화면이 될 프래그먼트

history_list_item.xml : 검색 기록에 띄워질 항목

search_list_item.xml : 입력한 검색어와 일치하는 책들을 띄워 줄 프래그먼트

 

To be Continued..🧐