klaus/sodalive-android
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(character detail): 캐릭터 상세 페이지 UI 추가

Browse Source
This commit is contained in:
klaus
2025-08-12 22:15:52 +09:00
parent 5090809be8
commit ac2482a645
16 changed files with 888 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/main/res/drawable/bg_character_status_character.xml Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#009D68" />
<corners android:radius="6dp" />
</shape>

6
app/src/main/res/drawable/bg_character_status_clone.xml Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#0020C9" />
<corners android:radius="6dp" />
</shape>

6
app/src/main/res/drawable/bg_character_status_creator.xml Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#F86660" />
<corners android:radius="6dp" />
</shape>

6
app/src/main/res/drawable/bg_round_corner_16_solid_3bb9f1.xml Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="16dp" />
<solid android:color="@color/color_3bb9f1" />
</shape>

9
app/src/main/res/drawable/bg_round_corner_16_stroke_37474f.xml Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/transparent" />
<stroke
android:width="1dp"
android:color="#37474F" />
<corners android:radius="16dp" />
</shape>

9
app/src/main/res/drawable/bg_round_corner_16_stroke_3bb9f1.xml Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/transparent" />
<stroke
android:width="1dp"
android:color="#3BB9F1" />
<corners android:radius="16dp" />
</shape>

14
app/src/main/res/drawable/ic_chevron_down.xml Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/transparent"
android:strokeColor="#607D8B"
android:strokeWidth="2"
android:strokeLineCap="round"
android:strokeLineJoin="round"
android:pathData="M7,10L12,15L17,10" />
</vector>

14
app/src/main/res/drawable/ic_chevron_up.xml Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/transparent"
android:strokeColor="#607D8B"
android:strokeWidth="2"
android:strokeLineCap="round"
android:strokeLineJoin="round"
android:pathData="M17,14L12,9L7,14" />
</vector>

389
app/src/main/res/layout/activity_character_detail.xml Normal file
View File

@@ -0,0 +1,389 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="@color/color_131313">
<!-- 상단 툴바 -->
<include
android:id="@+id/detail_toolbar"
layout="@layout/detail_toolbar" />
<!-- 메인 스크롤 영역 -->
<androidx.core.widget.NestedScrollView
android:id="@+id/scroll_view_character_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/btn_chat"
android:layout_below="@+id/detail_toolbar"
android:clipToPadding="false"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- 캐릭터 이미지 및 프로필 영역 -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/rl_character_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp">
<!-- 캐릭터 배경 이미지 -->
<ImageView
android:id="@+id/iv_character_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="@null"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- 딤 처리 -->
<View
android:id="@+id/view_character_dim"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/color_99000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- 캐릭터 정보 -->
<LinearLayout
android:id="@+id/ll_character_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="24dp"
android:layout_marginBottom="24dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<!-- 캐릭터명과 상태 -->
<LinearLayout
android:id="@+id/ll_character_name_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_character_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/pretendard_bold"
android:textColor="@color/white"
android:textSize="26sp"
tools:text="캐릭터명" />
<TextView
android:id="@+id/tv_character_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:background="@drawable/bg_character_status_clone"
android:fontFamily="@font/pretendard_regular"
android:paddingHorizontal="5dp"
android:paddingVertical="1dp"
android:textColor="@color/white"
android:textSize="12sp"
tools:text="Clone" />
</LinearLayout>
<!-- 캐릭터 소개 -->
<TextView
android:id="@+id/tv_character_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/pretendard_regular"
android:textColor="@color/color_b0bec5"
android:textSize="18sp"
tools:text="캐릭터 한줄 소개" />
<!-- 태그 -->
<TextView
android:id="@+id/tv_character_tags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/pretendard_regular"
android:textColor="@color/color_3bb9f1"
android:textSize="14sp"
tools:text="#커버곡 #라이브 #연애 #썸 #채팅 #라방" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- 세계관 섹션 -->
<LinearLayout
android:id="@+id/ll_worldview_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="24dp"
android:layout_marginBottom="16dp"
android:orientation="vertical">
<!-- 섹션 제목 -->
<TextView
android:id="@+id/tv_worldview_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/pretendard_bold"
android:text="세계관"
android:textColor="@color/white"
android:textSize="16sp" />
<!-- 세계관 내용 -->
<TextView
android:id="@+id/tv_worldview_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/pretendard_regular"
android:lineSpacingExtra="4dp"
android:textColor="@color/color_b0bec5"
android:textSize="16sp"
tools:text="특별한 꽃을 길러낼 수 있는 능력을 가진 리엘라.\n\n그녀는 호손 공작의 상속자가 되고 말아버리는데..." />
<!-- 전체보기 버튼 -->
<LinearLayout
android:id="@+id/ll_worldview_expand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_worldview_expand"
android:layout_width="20dp"
android:layout_height="20dp"
android:contentDescription="@null"
android:src="@drawable/ic_chevron_down" />
<TextView
android:id="@+id/tv_worldview_expand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/pretendard_regular"
android:text="전체보기"
android:textColor="@color/color_607d8b"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<!-- 성격 섹션 (세계관과 동일 UI) -->
<LinearLayout
android:id="@+id/ll_personality_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="24dp"
android:layout_marginBottom="16dp"
android:orientation="vertical">
<!-- 섹션 제목 -->
<TextView
android:id="@+id/tv_personality_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/pretendard_bold"
android:text="성격"
android:textColor="@color/white"
android:textSize="16sp" />
<!-- 성격 내용 -->
<TextView
android:id="@+id/tv_personality_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/pretendard_regular"
android:lineSpacingExtra="4dp"
android:textColor="@color/color_b0bec5"
android:textSize="16sp"
tools:text="밝고 쾌활하지만 때로는 고집이 센 면모도 있습니다.\n\n친구를 소중히 여기며, 어려움 앞에서도 물러서지 않습니다." />
<!-- 전체보기 버튼 -->
<LinearLayout
android:id="@+id/ll_personality_expand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_personality_expand"
android:layout_width="20dp"
android:layout_height="20dp"
android:contentDescription="@null"
android:src="@drawable/ic_chevron_down" />
<TextView
android:id="@+id/tv_personality_expand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/pretendard_regular"
android:text="전체보기"
android:textColor="@color/color_607d8b"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<!-- 원작 섹션 -->
<LinearLayout
android:id="@+id/ll_original_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="24dp"
android:layout_marginBottom="16dp"
android:orientation="vertical">
<!-- 섹션 제목 -->
<TextView
android:id="@+id/tv_original_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/pretendard_bold"
android:text="[원작]"
android:textColor="@color/white"
android:textSize="16sp" />
<!-- 원작 내용 -->
<TextView
android:id="@+id/tv_original_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/pretendard_regular"
android:textColor="@color/color_b0bec5"
android:textSize="16sp"
tools:text="네이버 시리즈 독 안에 든 선생님" />
<!-- 원작 보러가기 버튼 -->
<TextView
android:id="@+id/tv_original_link"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_marginTop="8dp"
android:background="@drawable/bg_round_corner_16_stroke_3bb9f1"
android:fontFamily="@font/pretendard_bold"
android:gravity="center"
android:text="원작 보러가기"
android:textColor="@color/color_3bb9f1"
android:textSize="16sp" />
</LinearLayout>
<!-- 캐릭터톡 대화 가이드 섹션 -->
<LinearLayout
android:id="@+id/ll_chat_guide_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="24dp"
android:layout_marginBottom="24dp"
android:background="@drawable/bg_round_corner_16_stroke_37474f"
android:orientation="vertical"
android:paddingHorizontal="16dp"
android:paddingVertical="12dp">
<!-- 가이드 제목 -->
<TextView
android:id="@+id/tv_chat_guide_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/pretendard_bold"
android:text="⚠️ 캐릭터톡 대화 가이드"
android:textColor="@color/color_b0bec5"
android:textSize="16sp" />
<!-- 가이드 내용 -->
<TextView
android:id="@+id/tv_chat_guide_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/pretendard_regular"
android:lineSpacingExtra="4dp"
android:text="보이스온 AI캐릭터톡은 대화의 자유도가 높아 대화에 참여하는 당신은 누구든 될 수 있습니다.\n\n세계관 속 캐릭터로 대화를 하거나 새로운 인물로\n캐릭터와 당신만의 스토리를 만들어보세요."
android:textColor="@color/color_7c7c80"
android:textSize="16sp" />
<!-- 주의사항 -->
<TextView
android:id="@+id/tv_chat_guide_notice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/pretendard_regular"
android:lineSpacingExtra="4dp"
android:text="※ AI캐릭터톡은 오픈베타 서비스 중이며, 캐릭터의 대화가 어색하거나 불완전할 수 있습니다. 대화 초반에 캐릭터 붕괴가 느껴진다면 대화를 리셋하고 다시 시도해보세요."
android:textColor="@color/color_7c7c80"
android:textSize="14sp" />
</LinearLayout>
<!-- 장르의 다른 캐릭터 섹션 -->
<LinearLayout
android:id="@+id/ll_other_characters_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:orientation="vertical">
<!-- 섹션 제목 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingHorizontal="24dp">
<TextView
android:id="@+id/tv_other_characters_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:fontFamily="@font/pretendard_bold"
android:text="장르의 다른 캐릭터"
android:textColor="@color/white"
android:textSize="26sp" />
</LinearLayout>
<!-- 캐릭터 리스트 -->
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_other_characters"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:clipToPadding="false"
android:paddingHorizontal="24dp" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<!-- 하단 고정 대화하기 버튼 -->
<TextView
android:id="@+id/btn_chat"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_alignParentBottom="true"
android:layout_marginHorizontal="24dp"
android:layout_marginBottom="10dp"
android:background="@drawable/bg_round_corner_16_solid_3bb9f1"
android:fontFamily="@font/pretendard_bold"
android:gravity="center"
android:text="대화하기"
android:textColor="@color/white"
android:textSize="16sp" />
</RelativeLayout>

38
app/src/main/res/layout/item_other_character.xml Normal file
View File

@@ -0,0 +1,38 @@
<?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="168dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_thumb"
android:layout_width="match_parent"
android:layout_height="168dp"
android:contentDescription="@null" />
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:fontFamily="@font/pretendard_bold"
android:maxLines="1"
android:textColor="@color/white"
android:textSize="14sp"
tools:text="이름" />
<TextView
android:id="@+id/tv_tags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:ellipsize="end"
android:fontFamily="@font/pretendard_regular"
android:maxLines="1"
android:textColor="@color/color_3bb9f1"
android:textSize="12sp"
tools:text="#태그" />
</LinearLayout>

2
app/src/main/res/values/colors.xml
View File

@@ -133,4 +133,6 @@
<color name="color_7849bc">#7849BC</color>
<color name="color_607d8b">#607D8B</color>
<color name="color_b0bec5">#B0BEC5</color>
<color name="color_7c7c80">#7C7C80</color>
<color name="color_37474f">#37474F</color>
</resources>