7주차 1일 팀프로젝트를 끝내며

팀 프로젝트를 진행하면서 TIL을 작성할 생각을 못했다.

평일은 정신없이 기능을 구현하고 주말도 갑자기 문득문득 생각나는 부분을 살펴보다보니 한 주가 지나갔다.

 

팀 프로젝트를 하면서 가장 잘 배운것은 '테두리'씌우기와 constrainlayout의 강력한 기능이다.

 

1. 테두리 씌우기

 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <gradient
        android:startColor="#ff0000"
        android:endColor="#0000ff"
        android:angle="0"/>

</shape>

먼저 원 모양의 둥근 drawable xml resource파일을 만들어줬다.

그라데이션을 줘서 해당 모양을 배경으로 사용했을 때 태두리가 예쁘게 나오도록 구성했다.

 

2. framlayout

 

       <FrameLayout
                    android:layout_width="74dp"
                    android:layout_height="74dp"
                    android:foreground="@drawable/rainbow"
                    app:layout_constraintStart_toStartOf="@id/circleImageView"
                    app:layout_constraintTop_toTopOf="@id/circleImageView"
                    tools:ignore="NotSibling" />

 

이를 프레임 레이아웃으로 만든 뒤 foreground로 넣어서 앞면에 배치하게 했다.

background로 사용해도 같은 결과값이 나오긴 한다.

 

여기서 제일 중요한 부분이

 

app:layout_constraintStart_toStartOf="@id/circleImageView"
app:layout_constraintTop_toTopOf="@id/circleImageView"

 

이 부분인데.

이 레이아웃이 씌워질 뷰와의 관계를 이렇게 정한다면, constrainlayout에서는 강력하게도 반드시 그 이미지를 따라다닌다.

또한 배치도 정확하게 가운데로 맞춰준다.

 

<de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/circleImageView"
                    android:layout_width="74dp"
                    android:layout_height="74dp"
                    android:layout_marginStart="16dp"
                    android:padding="2dp"
                    android:src="@drawable/iu"
                    app:civ_border_color="@color/design_default_color_background"
                    app:civ_border_overlay="true"
                    app:civ_border_width="5dp"
                    android:layout_marginVertical="5dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.266" />

이를 서클이미지 뷰에 감싸준다.

 

1. 프레임 레이아웃의 크기와 이미지뷰의 크기를 같게 만든다.

2. 이미지 뷰에 패딩을 줘서 패딩만큼의 두께를 가지는 배경 테두릴 만들어준다

 

이에 대한 결과값이다.

 

얼마나 아름다운가.

이를 구현하기 위해 compose로 1차적으로 구현했으나 상당히 뒷내용이라 다시 구현하였다.

이에 거의 2일이 소모되었다.

 

튜터님의 도움을 통해 구현의 마무리를 지을 수 있었고 완성했을 때의 성취감이란 뭐라 말할 수 없는 좋은 경험인 것 같다.

 

3. activity와 fragment와의 데이터 전달관계, viewpager2의 라이프 싸이클

 

팀 프로젝트는 끝났어도, 선발대의 과제는 끝나지 않았다.

 

fragment는 recyclearview와 연결되어 있으며 이는 viewpager2의 라이프 싸이클을 통해 관리가 가능하다.

 

액티비티 -> 프래그먼트

 

로 데이터를 전달할 때는 bundle형태로 전달하지만, 직접적으로 전달한다면 잘못하다간 생명주기와 맞물리지 못해 낭패를 보게된다. 따라서 메인 액티비티에 연결된 viewpager2에서 데이터를 받아서 최신화해주는 과정이 필요하다.

 

 

우리 팀 깃 허브

https://github.com/hosiker/SNS_App_Project

GitHub - hosiker/SNS_App_Project

노션

https://teamsparta.notion.site/15-902191439bed48b48a741a4594e52b39

🐱 채널 십오야 🎉