[Android] [인스타그램 클론 코딩] 스토리 UI 만들기 (원형 이미지 뷰: CircleImageView)

✏️ TIL(Today I Learned)

팀 프로젝트로 간단하게 인스타그램을 구현해 보기로 했다. 메인 페이지를 맡게 되어서 우선 스토리 UI를 만들어봤다.

 

우선 제일 왼쪽의 파란색 + 버튼이 겹쳐진 이미지 뷰를 클릭하면, 갤러리를 열어 사진을 선택할 수 있게 했다.

선택된 사진이 이미지 뷰에 등록되도록 했다.

 

HorizontalScrollView으로 스토리들이 좌우로 스크롤되도록 만들었다.     

android:scrollbars="none"으로 설정하여 아래에 스크롤바를 숨겼다.

 

그리고 FrameLayout을 사용해 파란색 + 이미지가 겹쳐지도록 했다.

// activity_main

<HorizontalScrollView
    android:id="@+id/sv_horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:scrollbars="none"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/btn_home" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/Iv_camera"
                android:layout_width="65dp"
                android:layout_height="65dp"
                android:layout_marginStart="15dp"
                android:src="@drawable/a1"
                android:background="@drawable/shape_imageview_circle"
                app:civ_border_color="@color/white"
                app:civ_border_overlay="true"
                app:civ_border_width="2dp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_iv_camera"
                android:layout_gravity="bottom|end"/>

        </FrameLayout>
            
            // 중간 생략

    </LinearLayout>

</HorizontalScrollView>

 

 

de.hdodenhof.circleimageview.CircleImageView를 사용해 스토리 이미지 뷰를 원형으로 만들었다.

CircleImageView는 ImageView를 확장한 라이브러리이다.

이를 사용하기 위해서는 아래 코드를  build.gradle(:app)의 dependencies에 추가해야 한다.

// build.gradle(:app)

dependencies {
    implementation ("de.hdodenhof:circleimageview:3.1.0")
}

 

 

그 후, 아래처럼 사용하면 된다.

여기서 중요한 점, padding을 적용하지 않으면 기껏 설정한 백그라운드의 그라데이션 색상이 이미지 뷰에 가려진다.

(이거를 몰라서 한참 동안 뭐가 문제인지 고민했다... 바보...)

// activity_main

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="65dp"
    android:layout_height="65dp"
    android:layout_marginStart="15dp"
    android:padding="2dp"
    android:src="@drawable/image"
    android:background="@drawable/shape_imageview_circle"
    app:civ_border_overlay="true"
    app:civ_border_color="@color/white"
    app:civ_border_width="2dp" />

• civ_border_overlay: CircleImageView의 테두리가 이미지와 겹칠 것인지 설정
  (true면 이미지와 겹치게 테두리, false(default) 면 이미지 바깥쪽에 테두리)
• civ_border_width: CircleImageView의 테두리(stoke) 굵기
• civ_border_color: CircleImageView의 테두리 색상

 

스토리의 테두리 부분(색상 그라데이션 )을 구현하기 위해

shape_imageview_circle를 만들어서 백그라운드로 설정했다.

// shape_imageview_circle

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    
    <gradient
        android:startColor="@color/startColor"
        android:centerColor="@color/centerColor"
        android:endColor="@color/endColor"
        android:angle="45" />
        
</shape>

 

• android:startColor: 그라데이션의 시작 색상을 지정
• android:centerColor (선택 속성): 그라데이션의 중간 색상을 지정
• android:endColor: 그라데이션의 끝 색상을 지정
• android:angle: 그라데이션의 각도를 지정
  • 0도: 오른쪽 방향
  • 45도: 오른쪽 위 대각선 방향
  • 90도: 위쪽 방향
  • 135도: 왼쪽 위 대각선 방향
  • 180도: 왼쪽 방향
  • 225도: 왼쪽 아래 대각선 방향
  • 270도: 아래쪽 방향
  • 315도: 오른쪽 아래 대각선 방향

---

 

📌 참고) 인스타그램 피그마 - Instagram UI Kit 1.0