[내일배움캠프][TIL] 24.02.29 (목) - 최종 프로젝트 2주차 : 개발 4일차

1. 최종 프로젝트 2주차

 

어제는 디자인 피드백과 함께 디자인에 대한 회의를 진행하느라고 개발에 시간을 할애하지 못했다.

 

오늘은 우선 수정된 디자인을 적용시키는 것부터 진행하고, 개발을 마저 진행하기로 했다.

 

 

디자인 수정

 

수정된 디자인 본이다.

 

이렇게 보면 이전 것과 크게 달라진 점이 없는데, 이걸 자세히 보면 군데군데 달라진 점이 눈에 보인다.

그 중에서, 내가 담당하고 있는 'MountainDetailActivity'쪽을 예로 들자면

 

 

• 기존에 드롭다운 박스로 표현하려던 상행 시간, 하행 시간을 아예 하단에 배치시켜서 알아보기 쉽게 해두었다.
• 해발고도와 총 등산 시간의 배치를 변경시켰다.
• 산 정보와 산 개요 사이에 구분선을 추가시켰다.
• 소제목 옆에 배치시켰던 더보기(자세히 보기)를 글귀 밑에 배치시켰다.

 

이제 이걸 바탕으로 디자인을 수정해보자.

 

추가한 부분

           <TextView
                android:id="@+id/tv_uptime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="50dp"
                android:layout_marginTop="5dp"
                android:hint="@string/sandetail_uptime"
                android:textSize="12sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/cl_info_box" />

            <TextView
                android:id="@+id/tv_uptime_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:text="@string/sandetail_uptime_info"
                android:textSize="12sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="@id/tv_uptime"
                app:layout_constraintStart_toEndOf="@id/tv_uptime"
                app:layout_constraintTop_toTopOf="@id/tv_uptime" />

            <TextView
                android:id="@+id/tv_downtime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp"
                android:hint="@string/sandetail_downtime"
                android:textSize="12sp"
                app:layout_constraintBottom_toBottomOf="@id/tv_downtime_info"
                app:layout_constraintEnd_toStartOf="@id/tv_downtime_info"
                app:layout_constraintTop_toTopOf="@id/tv_downtime_info" />

            <TextView
                android:id="@+id/tv_downtime_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_marginEnd="50dp"
                android:text="@string/sandetail_downtime_info"
                android:textSize="12sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@id/cl_info_box" />

            <View
                android:id="@+id/v_line_cut"
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_marginTop="40dp"
                android:background="@color/offroader_description"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/cl_info_box" />

 

 

음. 얼추 비슷하게 맞춰뒀다.

 

이제 진짜 개발하러 가야지.

 

 

무한 스크롤 + 자동 스크롤

 

어제는 잠깐 무한 스크롤과 자동 스크롤을 어떻게 구현할지 고민만 해봤다.

 

오늘은 실제로 한번 코드를 적어보고 적용시켜보고 싶은데 문제는 이 MountainDetailActivity에 들어가려면 산 리스트 Fragment를 완성시켜야 하는데 아직 이 부분이 완성이 되지 않아서 우선은 코드만 짜놓고 추후에 문제가 생기면 다시 수정하는 식으로 진행할 예정이다.

 

아, 그리고 MountainDetailActivity의 데이터를 어떻게 받아올까 고민을 했었는데

우선은 이미지 부분과 나머지 부분을 분리시켜서 따로 받는 식으로 구성하였다. 이게 아무래도 이미지가 한 산 당 여러개가 들어있다보니 한 객체에 다 집어넣기에는 굉장히 더러워질 것 같았다.

 

 

ImageAdapter.kt

class SanImageAdapter(var mItems: List<SanDetailImageData>): RecyclerView.Adapter<SanImageAdapter.Holder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        val binding = ItemAdapterMountainBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return Holder(binding)
    }

    override fun onBindViewHolder(holder: Holder, position: Int) {
        val realPosition = position % 5

        holder.mountainImage.setImageResource(mItems[realPosition].img)
    }

    override fun getItemCount(): Int {
        return Int.MAX_VALUE
    }

    inner class Holder(val binding: ItemAdapterMountainBinding): RecyclerView.ViewHolder(binding.root){
        var mountainImage = binding.ivMountain
    }
}

 

 

MountainDetailActivity.kt

class SanDetailActivity : AppCompatActivity() {
    private var _binding: ActivitySanDetailBinding? = null
    private val binding get() = _binding!!
    private val imageList = mutableListOf<SanDetailImageData>()
    private val slideImageHandler: Handler = Handler()
    private val slideImageRunnable =
        Runnable { binding.vpMountain.currentItem = binding.vpMountain.currentItem + 1 }

    private lateinit var imageAdapter: SanImageAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        _binding = ActivitySanDetailBinding.inflate(layoutInflater)
        setContentView(binding.root)

        initImage()
    }

    override fun onResume() {
        super.onResume()
        slideImageHandler.postDelayed(slideImageRunnable, 5000)
    }

    override fun onPause() {
        super.onPause()
        slideImageHandler.removeCallbacks(slideImageRunnable)
    }

    // 자동 스크롤되는 ViewPager2 이미지
    private fun initImage() {
        imageAdapter = SanImageAdapter(imageList)
        binding.vpMountain.adapter = imageAdapter
        binding.vpMountain.orientation = ViewPager2.ORIENTATION_HORIZONTAL

        binding.vpMountain.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                slideImageHandler.removeCallbacks(slideImageRunnable)
                slideImageHandler.postDelayed(slideImageRunnable, 5000)
            }
        })
    }
}

 

이제 확인은 산 리스트 Fragment가 완성되는 즉시 해볼 예정이다.

 

 

내일부터 일요일까지 연휴이지만, 아무래도 이 날 다 쉬어버리면 시간이 너무 빠듯해질 것 같아서 추가적으로 코딩을 해야할 것 같다. (추가 근무 미리 체험하기)