뷰모델을 사용하기 위한 gradle 추가

모듈 수준의 그래들에 의존성을 추가해준다.

implementation("androidx.activity:activity-ktx:1.8.2")
implementation("androidx.fragment:fragment-ktx:1.6.2")
implementation ("androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0")
implementation ("androidx.lifecycle:lifecycle-livedata-ktx:2.4.1")

data class

data class User(val name : String)

사용자 이름을 저장할 데이터 클래스를 하나 만들고~

ViewModel

뷰모델은 뷰와 모델의 중간다리 역할로 LiveData를 등록 시킨다.

class UserViewModel : ViewModel() {
    private val _user = MutableLiveData<User>()
    val user: LiveData<User> get() = _user

    fun setUserName(name: String) {
        _user.value = User(name)
    }
}

뷰모델을 설정 해주었다.

activity 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editTextName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

    <Button
        android:id="@+id/buttonSet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Set Name" />

    <TextView
        android:id="@+id/textViewGreeting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

LiveData

Jeckpat 라이브러리에서 제공하는 클래스

수명 주기 인식: LiveData는 수명 주기를 인식하여 관찰자(Observer)에게 데이터 변경 사항을 알립니다. 이는 메모리 누수를 방지하고 사용자가 활성화된 상태에서만 데이터를 업데이트하는 데 도움이 됩니다.

UI 업데이트: LiveData는 UI 컨트롤러(예: 액티비티, 프래그먼트)와 함께 사용되어 UI의 상태를 업데이트하는 데 사용됩니다. 데이터가 변경될 때마다 관찰자에게 자동으로 알림을 보내므로 UI를 업데이트하는 코드를 별도로 작성할 필요가 없습니다.

데이터 홀더: LiveData는 데이터를 보유하고 관찰자에게 전달하는 데 사용됩니다. 이는 앱의 데이터를 관리하고, UI와 데이터 간의 결합도를 낮추는 데 도움이 됩니다.

반응형 프로그래밍: LiveData는 반응형 프로그래밍 패턴을 따르며, 데이터의 변경에 따라 자동으로 반응하여 UI를 업데이트합니다. 이는 앱의 사용자 경험을 향상시키는 데 도움이 됩니다.

MainActivity

LiveData를 관찰하는 observer

class MainActivity : AppCompatActivity() {
    private val viewModel : UserViewModel by viewModels()

    private val binding by lazy {ActivityMainBinding.inflate(layoutInflater)}

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        binding.buttonSet.setOnClickListener {
            val name = binding.editTextName.text.toString()
            viewModel.setUserName(name)
        }

        viewModel.user.observe(this, Observer { user ->
            binding.textViewGreeting.text = "Hello ${user.name}"
        })
    }
}

KaKao api

Constants

우선 보완영상에서는 URL, HEADER, Preference key/Name이 Constants로 별도로 관리하였다.

object Constants {

    // Kakao Image Search API의 기본 URL입니다.
    const val BASE_URL = "https://dapi.kakao.com"

    // Kakao API를 사용하기 위한 인증 헤더입니다.
    const val AUTH_HEADER = "KakaoAK {API KEY}"

    // 앱의 Shared Preferences 파일 이름입니다.
    const val PREFS_NAME = "com.jblee.imagesearch.prefs"

    // 마지막 검색어를 저장하기 위한 키 값입니다.
    const val PREF_KEY = "IMAGE_SEARCH_PREF"
}

Retrofit작성하기

object retrofit_client {

    // API 서비스 객체를 반환한다.
    val apiService: Retrofit_interface
        get() = instance.create(Retrofit_interface::class.java)

    // Retrofit 인스턴스를 초기화하고 반환한다.
    private val instance: Retrofit
        private get() {
            // Gson 객체 생성. setLenient()는 JSON 파싱이 좀 더 유연하게 처리되도록 한다.
            val gson = GsonBuilder().setLenient().create()

            // Retrofit 빌더를 사용하여 Retrofit 인스턴스 생성
            return Retrofit.Builder()
                .baseUrl(Constants.BASE_URL)  // 기본 URL 설정
                .addConverterFactory(GsonConverterFactory.create(gson))  // JSON 파싱을 위한 컨버터 추가
                .build()
        }
}

interface

interface Retrofit_interface {

    @GET("v2/search/image")
    fun image_search(
        @Header("Authorization") apiKey: String?,
        @Query("query") query: String?,
        @Query("sort") sort: String?,
        @Query("page") page: Int,
        @Query("size") size: Int
    ): Call<ImageModel?>?
}

ImageModel

data class ImageModel(
    @SerializedName("documents")
    val documents: ArrayList<Documents>,

    @SerializedName("meta")
    val meta: Meta
) {
    /**
     * 이미지 검색 응답에서 단일 문서 혹은 결과를 나타내는 클래스.
     */
    data class Documents(
        @SerializedName("collection")
        val collection: String,

        @SerializedName("thumbnail_url")
        val thumbnailUrl: String,

        @SerializedName("image_url")
        val imageUrl: String,

        @SerializedName("width")
        val width: Int,

        @SerializedName("height")
        val height: Int,

        @SerializedName("display_sitename")
        val displaySitename: String,

        @SerializedName("doc_url")
        val docUrl: String,

        @SerializedName("datetime")
        val datetime: String
    )

    /**
     * 이미지 검색 응답에 대한 메타 정보를 나타내는 클래스.
     */
    data class Meta(
        @SerializedName("is_end")
        val isEnd: Boolean,

        @SerializedName("pageable_count")
        val pageableCount: Int,

        @SerializedName("total_count")
        val totalCount: Int
    )
}

Utils

api에서 받아온 시간을 원하는 표시형식으로 바꾸기 위한 코드

    fun getDateFromTimestampWithFormat(
        timestamp: String?,
        fromFormatformat: String?,
        toFormatformat: String?
    ): String {
        var date: Date? = null
        var res = ""
        try {
            val format = SimpleDateFormat(fromFormatformat)
            date = format.parse(timestamp)
        } catch (e: ParseException) {
            e.printStackTrace()
        }
        val df = SimpleDateFormat(toFormatformat)
        res = df.format(date)
        return res
    }

preference : 마지막 검색어를 저장하기 위한 코드.

fun saveLastSearch(context: Context, query: String) {
        val prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE)
        prefs.edit().putString(PREF_KEY, query).apply()
    }
fun getLastSearch(context: Context): String? {
        val prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE)
        return prefs.getString(PREF_KEY, null)
    }

SearchItemModel

data class SearchItemModel(
    var title: String,
    var dateTime: String,
    var url: String,
    var isLike: Boolean = false
)

MainActivity

공유저장소

var likedItems : ArrayList<SearchItemModel> = ArrayList()

나중에 클릭된 아이템들이 likedItems에 들어갈 수 있도록 만듬.

addLikedItem

fun addLikedItem(item: SearchItemModel) {
        if (!likedItems.contains(item)) {
            likedItems.add(item)
        }
    }

removeLikedItem

fun removeLikedItem(item: SearchItemModel) {
        likedItems.remove(item)
    }

Search

SearchFragment

setUpViews

private fun setupViews() {
        // RecyclerView 설정
        gridmanager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        binding.rvSearch.layoutManager = gridmanager
        .
        adapter = SearchAdapter(mContext)
        binding.rvSearch.adapter = adapter
        binding.rvSearch.itemAnimator = null
        .
        // 최근 검색어를 가져와 EditText에 설정
        val lastSearch = Utils.getLastSearch(requireContext())
        binding.etSearch.setText(lastSearch)
    }

setUpListeners

private fun setupListeners() {
        val imm = requireActivity().getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        binding.btnSearch.setOnClickListener {
            val query = binding.etSearch.text.toString()
            if (query.isNotEmpty()) {
                Utils.saveLastSearch(requireContext(), query)
                adapter.clearItem()
                fetchImageResults(query)
            } else {
                Toast.makeText(mContext, "검색어를 입력해 주세요.", Toast.LENGTH_SHORT).show()
            }
            // 키보드 숨기기
            imm.hideSoftInputFromWindow(binding.etSearch.windowToken, 0)
        }
    }

fetchImageResults

private fun fetchImageResults(query: String) {
        apiService.image_search(Constants.AUTH_HEADER, query, "recency", 1, 80)
            ?.enqueue(object : Callback<ImageModel?> {
                override fun onResponse(call: Call<ImageModel?>, response: Response<ImageModel?>) {
                    response.body()?.meta?.let { meta ->
                        if (meta.totalCount > 0) {
                            response.body()!!.documents.forEach { document ->
                                val title = document.displaySitename
                                val datetime = document.datetime
                                val url = document.thumbnailUrl
                                resItems.add(SearchItemModel(title, datetime, url))
                            }
                        }
                    }
                    adapter.items = resItems
                    adapter.notifyDataSetChanged()
                }
                override fun onFailure(call: Call<ImageModel?>, t: Throwable) {
                    Log.e("#jblee", "onFailure: ${t.message}")
                }
            })
    }

SearchAdapter

onBindViewHolder

override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        val currentItem = items[position]
        Glide.with(mContext)
            .load(currentItem.url)
            .into(holder.iv_thum_image)
        holder.iv_like.visibility = if (currentItem.isLike) View.VISIBLE else View.INVISIBLE
        holder.tv_title.text = currentItem.title
        holder.tv_datetime.text = getDateFromTimestampWithFormat(
            currentItem.dateTime,
            "yyyy-MM-dd'T'HH:mm:ss.SSS+09:00",
            "yyyy-MM-dd HH:mm:ss"
        )
    }

Bookmark

BookmarkFragment

class BookmarkFragment : Fragment() {
.
    private lateinit var mContext: Context
.
    // 바인딩 객체를 null 허용으로 설정 (프래그먼트의 뷰가 파괴될 때 null 처리하기 위함)
    private var binding: FragmentBookMarkBinding? = null
    private lateinit var adapter: BookmarkAdapter
.
    // 사용자의 좋아요를 받은 항목을 저장하는 리스트
    private var likedItems: List<SearchItemModel> = listOf()
.
    override fun onAttach(context: Context) {
        super.onAttach(context)
        mContext = context
    }
.
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // MainActivity로부터 좋아요 받은 항목을 가져옴
        val mainActivity = activity as MainActivity
        likedItems = mainActivity.likedItems
.
        Log.d("BookmarkFragment", "#jblee likedItems size = ${likedItems.size}")
.
        // 어댑터 설정
        adapter = BookmarkAdapter(mContext).apply {
            items = likedItems.toMutableList()
        }
.
        // 바인딩 및 RecyclerView 설정
        binding = FragmentBookMarkBinding.inflate(inflater, container, false).apply {
            rvBookmark.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
            rvBookmark.adapter = adapter
        }
.
        return binding?.root
    }
.
    override fun onDestroyView() {
        super.onDestroyView()
        // 메모리 누수를 방지하기 위해 뷰가 파괴될 때 바인딩 객체를 null로 설정
        binding = null
    }
}

프래그먼트에서 액티비티로의 데이터 전달. 처음엔 Fragment에서 인터페이스를 생성하고 DetailActivity에서 바로 인터페이스를 상속 받았는데 로그캣에서 이런 오류가 발생하였다.

RuntimeException MainActivity~

이건 프래그먼트에서 onAttach로 액티비티에서 프래그먼트리스너(인터페이스)가 없으면 throw로 나타나게 하였는데 분명 디테일 액티비티에상속을 시켰는데도 계속 이런 오류가 발생하였다. 찾아보니 메인액티비티에 인터페이스가 상속되지 않아서 발생한 오류라고 하였다.

그래서 데이터의 전달을 Fragment -> MainActivity -> DetailActivity로 진행하였다.

Interface생성

interface FragmentDataListener {
    fun onDataReceived(data: Bundle)
}

Fragment

리스너 전역 변수

private var listener : FragmentDataListener? = null

onAttach

override fun onAttach(context: Context) {
        super.onAttach(context)

        if (context is FragmentDataListener) {
            listener = context
        } else {
            throw RuntimeException("$context must implement FragmentDataListener")
        }
    }

onViewCreated

val musicalAdapter = MusicalAdapter(dataList)

        musicalAdapter.itemClick = object : MusicalAdapter.ItemClick {
            override fun onClick(view : View, position: Int) {
                val clickedItem =dataList[position]
                val data = Bundle().apply{
                    putParcelable("musicalItem", clickedItem)
                }

                listener?.onDataReceived(data)

            }
        }

데이터리스트의 항목을 선택하면 그 포지션의 데이터들을 번들에 담아준다.

MainActivity

interface상속 받아주기.

onDataReceived

override fun onDataReceived(data: Bundle) {
        val intent = Intent(this, DetailActivity::class.java)
        intent.putExtra("musicalItem", data.getParcelable<Parcelable>("musicalItem"))
        startActivity(intent)
    }

DetailActivity

val musicalItem = intent.getParcelableExtra<Musical>("musicalItem")

        binding.DetailIv.setImageResource(musicalItem?.musicalImage ?: 0)
        binding.DetailTopName.text = musicalItem?.musicalName
        binding.DetailLocation.text = musicalItem?.musicalLocation
        binding.DetailName.text = musicalItem?.musicalName
        binding.detailDate.text = musicalItem?.musicalDate

받아서 사용

서버에서 이미지를 내려 받아올 때 Glide를 이용하면 더 빨리 가능함.

gradle에 라이브러리 등록

dependencies {

    implementation ("com.github.bumptech.glide:glide:4.12.0")

사용 방법

Glide.with(context)
            .load(mItems[position].thumbnailUrl)
            .into(holder.image) //이미지 받아와서 searchImage에 넣는다!

load에 리소스 전달하고 into에 이미지 뷰 객체 전달. override를 사용하면 크기를 조절할 수 있음.

SimpleDateFormat은 첫번째 인자로 시간을 넣어주고 두번째 인자로 시간대, 지역설정을 할 수 있다. Locale는 지역 설정이다

fun main() {
    val currentTime = LocalDateTime.now()
    println("현재날짜&시간 $currentTime")

    val formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss", Locale.getDefault())
    val formatter2 = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm", Locale.getDefault())
    val formatter3 = DateTimeFormatter.ofPattern("yyyy-MM-dd HH", Locale.getDefault())
    val formattedDate = currentTime.format(formatter)
    val formattedDate2 = currentTime.format(formatter2)
    val formattedDate3 = currentTime.format(formatter3)

    println("포맷된 날짜&시간(년,월,일,시간,분,초): ${formattedDate}초")
    println("포맷된 날짜&시간(년,월,일,시간,분): ${formattedDate2}분")
    println("포맷된 날짜&시간(년,월,일,시간): ${formattedDate3}시")
}

컨셉 유지하기 위해 중간중간 얼렁뚱땅 넘어가는 부분이 있어요. 절ㄷ ㅐ 귀찮아서 그런거아니고 몰라서 그런건 맞음

처음부터 끝까지 과정을 무에서 유로 흘러가는 과정을 담아볼까 한다. 하나하나 세세하게 한달 뒤 또 까먹고 전전긍긍 하고있을게 분명하기 때문에ㅎㅎ

1일차 : UI구성 및 기능..

우선 viewPager2와 tabLayout 활용

*gradle에 추가 *

    //viewPager2
    implementation("androidx.viewpager2:viewpager2:1.0.0")

레트로핏 때 필요한거 미리 넣어놓기

    //retrofit
    implementation("com.google.code.gson:gson:2.10.1")
    implementation("com.squareup.retrofit2:retrofit:2.9.0")
    implementation("com.squareup.retrofit2:converter-gson:2.9.0")
    implementation("com.squareup.okhttp3:okhttp:4.10.0")
    implementation("com.squareup.okhttp3:logging-interceptor:4.10.0")

인터넷 권한 받아오기 그냥 한번에 넣어놓을게요 manifest에 넣으면 됨.

<uses-permission android:name="android.permission.INTERNET"/>

오키 여기까지 하고 까먹은거 있으면 추가로 넣어야지 fragment필요한거 생성해주시고 나는 이미지검색프래크먼트랑 저장소 프래그먼트 2개 만듬.

viewPagerAdapter

package com.android.searchproject

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class ViewPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {

    var fragments : ArrayList<Fragment> = ArrayList()

    override fun getItemCount(): Int {
        return fragments.size
    }

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }

    fun addFragment(fragment: Fragment){
        fragments.add(fragment)
        notifyItemInserted(fragments.size - 1)
    }

    fun removeFragment(){
        fragments.removeLast()
        notifyItemRemoved(fragments.size)
    }
}

MainActivity.kt

package com.android.searchproject

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.viewpager2.widget.ViewPager2
import com.android.searchproject.databinding.ActivityMainBinding
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {


    private lateinit var binding: ActivityMainBinding


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        initViewPager()
    }
    private fun initViewPager() {
        var viewPager2Adapter = ViewPagerAdapter(this)
        viewPager2Adapter.addFragment(SearchFragment())
        viewPager2Adapter.addFragment(StorageFragment())

        binding.viewPager.apply {
            adapter = viewPager2Adapter

            registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
                override fun onPageSelected(position: Int) {
                    super.onPageSelected(position)
                }
            })
        }
        TabLayoutMediator(binding.tapLayout, binding.viewPager) { tab, position ->
            when (position) {
                0 -> {
                    tab.text = "이미지 검색"
                }
                1 -> {
                    tab.text = "좋아요 보관함"
                }
            }
        }.attach()

    }
}

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

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="HaruSearch"
            android:textColor="@color/white"
            android:textSize="30sp"
            android:textStyle="bold" />
    </androidx.appcompat.widget.Toolbar>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#C5C5C5"
        android:paddingHorizontal="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar">

        <EditText
            android:id="@+id/et_main_search"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:paddingStart="5dp"

            android:hint=" 키워드"
            android:layout_marginEnd="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/btn_main_search"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/btn_main_search"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="검색"
            android:backgroundTint="#505050"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>






    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout2"
        app:layout_constraintBottom_toTopOf="@+id/tapLayout"/>



    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tapLayout"
        android:layout_width="409dp"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="682dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Search_recyclerview.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="wrap_content"
    android:padding="15dp">

    <ImageView
        android:id="@+id/search_Image"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:scaleType="centerCrop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/search_favorite"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:visibility="gone"
        android:src="@drawable/favorite"
        app:layout_constraintEnd_toEndOf="@+id/search_Image"
        app:layout_constraintTop_toTopOf="@+id/search_Image" />

    <TextView
        android:id="@+id/search_name"
        tools:text="name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:layout_marginTop="2dp"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/search_Image"/>

    <TextView
        android:id="@+id/search_datetime"
        tools:text="dateandTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:textSize="15sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/search_name" />
</androidx.constraintlayout.widget.ConstraintLayout>

이렇게 일단 대충 UI를 구성해주었다.

Kakao API 받아오기

나의 어플리케이션을 생성해서 받아와준다.

Search DataClass 생성해주기.

데이터 클래스를 작성할 때는 카카오에서 제공해주는 문서에 들어가면 친절하게 이름과 타입을 표로 만들어 놓았다. 우리는 이걸 보고 옮겨 적어주기만 하면된다.

package com.android.searchproject

import android.os.Parcelable
import android.provider.DocumentsContract
import com.google.gson.annotations.SerializedName

data class SearchResponse(
    @SerializedName("documents")
    val documents: MutableList<DocumentsContract.Document>?,
    @SerializedName("meta")
    val metaData: MetaData?
)

data class MetaData(
    @SerializedName("total_count")
    val totalCount : Int,
    @SerializedName("pageable_count")
    val pageableCount : Int,
    @SerializedName("is_end")
    val isEnd : Boolean
)

@Parcelize
data class Document(
    @SerializedName("collection")
    val collection: String,
    @SerializedName("datetime")
    val dateTime: String,
    @SerializedName("display_sitename")
    val displaySiteName: String,
    @SerializedName("doc_url")
    val docUrl: String,
    @SerializedName("height")
    val height: Int,
    @SerializedName("image_url")
    val imageUrl: String,
    @SerializedName("thumbnail_url")
    val thumbnailUrl: String,
    @SerializedName("width")
    val width: Int,
): Parcelable

Parcelable오류 (해결!!)

Parcelable이 정의가 되지 않았다는 오류가 생겼다.

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id ("kotlin-parcelize")
    id ("kotlin-kapt")
}

플러그인에 밑에 2줄을 추가해주니 해결 됨.

@SerializedName이 무엇인가요?

아 찾아봤는데 정리하기 귀찮다. 나중에 생각나면 다시 정리해야지

Retrofit 객체 생성, NetworkClient.kt

레트로핏에 대한 자세한 내용은 이전에 작성한 자료를 보시면 됩니다. (아직 작성 안했고 이 자리에 작성하는대로 링크 넣어야징~~)

object NetWorkClient {

    private const val BASE_URL = "https://dapi.kakao.com/"


    private fun createOkHttpClient(): OkHttpClient {
        val interceptor = HttpLoggingInterceptor()

        if (BuildConfig.DEBUG)
            interceptor.level = HttpLoggingInterceptor.Level.BODY
        else
            interceptor.level = HttpLoggingInterceptor.Level.NONE

        return OkHttpClient.Builder()
            .connectTimeout(20, TimeUnit.SECONDS)
            .readTimeout(20, TimeUnit.SECONDS)
            .writeTimeout(20, TimeUnit.SECONDS)
            .addNetworkInterceptor(interceptor)
            .build()
    }

    private val searchRetrofit = Retrofit.Builder()
        .baseUrl(BASE_URL)//
        .addConverterFactory(GsonConverterFactory.create()).client(
            createOkHttpClient()
        ).build()

    val searchNetwork: NetworkInterface = searchRetrofit.create(NetworkInterface::class.java)

}

Base_URL의 코드는 기본정보의 URL에서 가지고 오면 된다. (위에 사진 있음.)

NetworkInterface

interface NetworkInterface {

    @Headers("Authorization: API")
    @GET("v2/search/image")
    suspend fun searchImage(@QueryMap param: HashMap<String, String>) : SearchResponse
}

API에는 어플리케이션 생성하고 받은 REST_API 넣으면 됨.

SearchAdapter

package com.android.searchproject

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.core.view.isVisible
import androidx.recyclerview.widget.RecyclerView
import com.android.searchproject.databinding.SearchRecyclerviewBinding
import com.bumptech.glide.Glide
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale

class SearchAdapter(private val context: Context, private val results: MutableList<Document>, private val favoriteItems: MutableList<Document>) :
    RecyclerView.Adapter<SearchAdapter.SearchViewHolder>() {

    interface SearchThumbnailClickListener {
        fun onClick(view: View, position: Int)
    }

    var searchThumbnailClickListener: SearchThumbnailClickListener? = null

    private val inputFormat = SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX", Locale.getDefault())
    private val outputFormat = SimpleDateFormat("yyyy-MM-dd HH:mm:ss", Locale.getDefault())

    inner class SearchViewHolder(private val binding: SearchRecyclerviewBinding) :
        RecyclerView.ViewHolder(binding.root) {
        val image = binding.searchImage
        val name = binding.searchName
        val dateTime = binding.searchDatetime
        val favorite = binding.searchFavorite
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SearchViewHolder {
        return SearchViewHolder(
            SearchRecyclerviewBinding.inflate(
                LayoutInflater.from(parent.context),
                parent,
                false
            )
        )
    }

    override fun getItemCount(): Int {
        return results.size
    }

    override fun onBindViewHolder(holder: SearchViewHolder, position: Int) {
        holder.image.setOnClickListener {
            searchThumbnailClickListener?.onClick(holder.favorite, position)
        }

        Glide.with(context)
            .load(results[position].thumbnailUrl)
            .into(holder.image)
        holder.name.text = results[position].displaySiteName
        holder.dateTime.text =
            outputFormat.format(inputFormat.parse(results[position].dateTime) as Date)
        holder.favorite.isVisible = (favoriteItems.find { it == results[position] } != null)
    }
}

SearchFragment

아 몰라

2일차

우선 어제처럼 TIL을 작성하면 너무 비효율적인 것 같음. 오늘은 주말이지만 어제 해결하지 못한 오류가 계속 생각나서 코드 쳐다 봄.

오류 (ViewPager2 does not support direct child views)

처음엔 setFragment를 viewPager에 진행했었음. 애뮬레이터 실행은 되는데 검색어에 입력하고 검색버튼을 누르면 앱이 꺼지는 오류가 발생함

이렇게 사이트 검색은 가능하지만 ViewPager2 does not support direct child views와 같은 오류가 발생함. ViewPager2위에 직접적으로 자식뷰를 생성하는건 안된다고 한다

main_activity_xml. 그래서 뷰페이저를 프레임 레이아웃으로 감싸고

<FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout2"
        app:layout_constraintBottom_toTopOf="@+id/tapLayout">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

    </FrameLayout>

frameLayout위에 리사이클러뷰가 올라가질 수 있도록 함.

검색이 가능해졌다!!

일단 오늘은 여기까지 하고 3일차 목표

3일차 목표

이미지 클릭시 좋아요 보관함으로 이동 키보드 숨김처리 엔터 클릭 시 검색 리스트에서 특정 이미지를 선택하면 특별한 표시를 보여주도록 구현합니다

간단 요약

마지막 인덱스의 값이 바로 앞 인덱스의 값보다 작으면 마지막 값 - 그전 값 크면 마지막 값 * 2

문제 풀이

음.. 마지막 인덱스를 어떻게 표현할지 몰라서 그냥 num_list[num_list.lastIndex] 이런식으로 표현 했다. 마지막 인덱스와 그 앞 인덱스로 변수로 설정해주면 쉽게 풀수 있는 문제였다. 처음엔 answer에 lastNl -nl1 값만 넣어줘서 출력값이 [5] , [10] 으로 밖에 안나왔다. 그래서 numList.add(lastNl- nl1) answer.add(num_List)이런 식으로 표현했다.ㅋㅋ몽총이 잉 어찌 넣어줘야지...하고 구글에 검색해보니 addAll이란 함수가 있었다.

class Solution {
    fun solution(num_list: IntArray): IntArray {
        val answer = ArrayList<Int>()
        var lastNl = num_list[num_list.lastIndex]
        var nl1 = num_list[num_list.lastIndex - 1]

        if(lastNl > nl1) {
             answer.addAll(num_list.toList() + (lastNl - nl1))
        } else {
            answer.addAll(num_list.toList() + (lastNl * 2))
        }
        return answer.toIntArray()
    }
}

addAll

addAll은 ArrayList간 데이터 복사 할수 있다고 한다. 그냥 배열을 복사한다고 생각하면 된다고 한다.

MVVM패턴?

카카오API를 이용해서 데이터를 가지고 오는 과제를 하고 있었는데 VIEW MODEL을 알게 되었고 MVVM패턴에서 파생된거라고 하길래 또 MVVM패턴이 뭔지 궁금해져서 정리하게 되었다.

음...이게 뭘까??... 봐도 모르겠는 걸...!! 일단 어떤 것인지만 알아놓고 지금 하고 있는 과제 끝나고 시간 남으면 더 알아봐야겠다.

디자인 패턴

MVC, MVP, MVVM 이렇게 3개가 소프트웨어에서 자주 사용하는 디자인 패턴이라고 한다.

MVC 패턴

Model, View, Controller 3개가 이루어져 동작한다고 한다. 평소에 우리가 사용하는 것이 MVC패턴으로 보편적으로 사용 되지만 앱이 커질수록 유지보수가 어려워진다고 한다.

Model

view에 표시되기 위한 데이터

view

XML, HTML과 같은 UI 구성요소 controller 부터 받은 UI데이터를 표시하는 역할을 함.

controller

사용자의 요청을 처리하는 역할을 담당 Model을 통해 받은 데이터를 처리하거나, 결과 값을 View에 반환하는 역할 일반적으로 View와 Model사이를 중재하는 역할

MVP 패턴

여기서는 controller 대신 presenter라는 아이가 역할을 다한다.

present

view를 통해 사용자의 입력을 받고 Model에 도움을 받아 사용자의 데이터를 처리하고 결과를 View로 다시 전달. present는 interface를 통해 View와 상호작용.

MVVM 패턴

ViewModel

ViewModel는 View 상태를 유지 및 변화시키고, View에 대한 작업의 결과로 Model을 조작하고, View에서 발생되는 이벤트를 트리거하는데 도움이 되는 메서드, 명령, 또는 다른 속성들을 노출하는 역할을 합니다.

View는 ViewModel에 관한 참조를 가지고 있지만, ViewModel은 View에 관한 정보를 모릅니다. 이는 View와 ViewModel사이의 n:1의 의존관계가 생기며 다수의 View는 하나의 ViewModel에 매핑될 수 있습니다. 이로서 ViewModel은 다수의 View에 대해 완전히 독립적입니다.

안드로이드에서 단방향 혹은 양방향 데이터 바인딩을 사용한다면 ViewModel의 속성들과 View와 동기화를 보장할 수 있습니다.

[참고자료]...및 복붙... https://velog.io/@blucky8649/MVC-MVP-MVVM-%ED%8C%A8%ED%84%B4%EC%9D%98-%ED%8A%B9%EC%A7%95

뭐라는거야... 이렇게 글로만 보니 이해가 안된다ㅠㅠ 실습을 통해 돌아오겠읍니다..총총.. 이해가 안되니까 대충 쓰게 됨.. 캵캵캵캵 티스토리 쓰다가 velog엄청 이쁘길래 넘어왔는데 마음에 드네