[내일배움캠프][TIL] 24.02.07 (수) - 팀 프로젝트(심화) : 상세 화면 UI 제작

1. 팀 프로젝트(심화)

 

어제까지 이틀 간 진행한 프로젝트 회의 끝에 전체적인 스케치를 끝냈고, 오늘부터 그 스케치를 토대로 작업을 시작하였다.

 

중간에 설 연휴가 끼어있어서 의외로 완성하는 데에 빠듯할 수 있지만, 그래도 하나하나 차근차근 밟아가자.

 

 

상세 화면 UI 만들기

 

이번에 내가 맡은 부분은 '상세 화면' 이다.

 

우선, 상세 화면의 UI 스케치는 다음과 같다.

 

참고로, 상세 화면은 검색 결과 화면에서 특정 영상을 누르면 그 영상의 자세한 정보를 보여주는 화면이므로, 상세 화면에 있는 정보들 중에서는 검색 결과 화면에서 받은 데이터를 옮겨야 한다.

검색 결과 화면에서 받아와야 하는 정보로는

• 동영상 이름
• 영상 썸네일 or 영상
• 영상 링크
• 게시자 이름
• 게시 날짜
• 조회수

가 있다.

 

좋아요 버튼을 누르면 좋아요가 찍히게 되고, 마이페이지에 좋아요를 표시한 동영상 항목에 나타나게 해야 한다. (물론 이건 내 관할이 아닐 수도 있다. 마이페이지에서 좋아요가 있는 동영상만을 가져오는 코드를 짜는 게 더 쉽다던가.)

 

공유하기 버튼을 누르면 우리가 흔히 볼 수 있는 그 '공유' 화면을 띄운다.

 

마지막으로, 댓글 칸은 우선 생각하기로는 댓글을 적고 입력을 누르면 밑에 댓글을 남기는 형식으로 만들 예정인데 현재 이 댓글 기능 자체에 의문이 있어서 보류 중이다.

 

 

그렇다면 이제 이걸 한 번 만들어보자.

<?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=".VideoDetailFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/const_detail_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/const_detail_video"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/tv_detail_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="동영상 이름"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginStart="15dp"
            android:src="@drawable/icon_foot"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/tv_detail_title"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginEnd="15dp"
            android:src="@drawable/icon_foot"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/tv_detail_title"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/const_detail_video"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        app:layout_constraintBottom_toTopOf="@id/const_detail_info"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/const_detail_title">

        <ImageView
            android:id="@+id/img_video"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_foot_line"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/const_detail_info"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:background="@color/BG_Item"
        app:layout_constraintBottom_toTopOf="@id/const_detail_reply"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/const_detail_video">

        <Button
            android:id="@+id/btn_like"
            android:layout_width="170dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:backgroundTint="@color/white"
            android:drawableLeft="@drawable/ic_drawable_resizefoot"
            android:text="좋아요"
            android:textColor="@color/String"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@id/btn_share"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/btn_share"
            android:layout_width="170dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:backgroundTint="@color/white"
            android:drawableLeft="@drawable/ic_drawable_resizeshare"
            android:text="공유하기"
            android:textColor="@color/String"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/btn_like"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_name_detail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="이름"
            android:textSize="16sp"
            app:layout_constraintBottom_toTopOf="@id/tv_viewcount_detail"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/btn_like" />

        <TextView
            android:id="@+id/tv_date_detail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="날짜"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="@id/tv_name_detail"
            app:layout_constraintStart_toEndOf="@id/tv_name_detail"
            app:layout_constraintTop_toTopOf="@id/tv_name_detail" />

        <TextView
            android:id="@+id/tv_viewcount_detail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="조회수"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/const_detail_reply"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/BG_color"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/const_detail_info">

        <EditText
            android:id="@+id/edt_reply"
            android:layout_width="250dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/ic_rounded_background"
            android:clipToOutline="true"
            android:hint="댓글을 남겨주세요."
            android:paddingLeft="20dp"
            app:layout_constraintEnd_toStartOf="@id/btn_reply"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/btn_reply"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:backgroundTint="@color/nav_blue"
            android:text="입력"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/edt_reply"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerview_reply"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/edt_reply" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

댓글 기능은 우선 보류 중이지만, 만약 추가한다면 RecyclerView 형식으로 만들어야 적절해보여서 RecyclerView로 만들었다.

 

이제 이걸 코드로 구현시키면 되는데 우선 이것들을 어떻게 구현시켜야할까?

 

• 데이터를 받아와야 하는 것들 : Parcelable
• 좋아요 누르기 : 이것 역시 데이터에서 isLike = false 를 받아와야 구현 가능할듯싶다.
• 공유하기 : Intent.ACTION_SEND를 이용하기. 대신에 공유할 내용이 url이기 때문에 역시 링크를 받아와야 한다.
• 댓글 : RecyclerView + Adapter

 

여기서 문제점들이 몇가지가 있는데

• 좋아요 : 보통 우리가 생각하는 좋아요는 안 누른 상태면 비어 있다가 누르면 꽉 채워진 모양이다. 즉, 위의 화면에서 평소에는 텅빈 발바닥이었다가 좋아요를 눌러야 저렇게 꽉찬 발바닥의 형태로 만들고 싶은데 문제는 현재 저 발바닥 이미지가 따로 떨어진 게 아니고 버튼 안에 'drawable' 형태로 있어서 id를 할당할 수가 없다. 다만, 그렇다고 이걸 각각의 이미지로 따로 떼어놓기에는 코드가 더 번잡해질 가능성이 높다. 이걸 어떻게 해결할지가 관건.
• 동영상 : 여기에는 두 가지 문제가 있다.
  • 유튜브를 참고해보면, 일반 영상과 Shorts의 화면 형태가 다르다. 일반 영상은 가로가 긴 형태지만, Shorts는 세로가 긴 형태이기 때문. 만약 이걸 고려하지 않는다면 Shorts를 보여줄 때 양옆이 짤린 형태로 나올 수도 있다.
  • 상세 화면에서 썸네일만 보여주고 화면을 클릭하면 링크로 이동시켜줄지, 아니면 아예 그 영상을 직접 보여줄지 선택해야 한다.

 

여기까지가 오늘 작업한 작업물이다.

내일은 API로 받은 데이터들을 정제해서 상세 화면에 적용시키는 걸 해보겠다.