[ImageView] 이미지 비율은 맞추면서, 크기는 꽉 채우고 싶어요!!

디스코드 GIF 보내기 화면

디스코드에는 GIF(움짤)을 골라 보낼 수 있는 화면이 있습니다.

저는 위와 같은 화면을 만들어보기 위해 레이아웃은 RecyclerView에 StaggeredGridLayoutManager를 달아 구현하고,

Giphy Api에서 움짤을 받아와, Glide로 로딩하여 보여주는 방식으로 만들었습니다.

item_trending_gif.xml

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        app:cardElevation="4dp"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView에 들어갈, 움짤을 띄울 아이템의 레이아웃을 만들어 주었습니다.

CardView 안에 ImageView 하나밖에 없는 단순한 레이아웃입니다.

 

ConstraintLayout과 MaterialCardView, ImageView 모두 높이를 wrap_content로 설정하여 움짤을 받아오면

넓이는 부모 뷰 만큼 늘이고, 높이는 움짤의 비율에 맞춰 알아서 설정되게 했습니다.

 

움짤을 받아오는 과정과 ReyclerView Adapter 구현 등 이번 글과 상관없는 부분은 생략하고, 실행 결과를 보겠습니다.

작은 검은색 점들은 Glide로 달아놓은 ProgressBar입니다.

엥? 이게 뭐람?? 아이템들의 높이가 맞춰지기는 커녕 아예 뜨지도 않습니다.

wrap_content가 움짤의 높이를 정상적으로 반영하지 못하는 듯했습니다.

오?

오, 제가 받아온 데이터에 움짤의 높이가 들어있는 것 같네요?

imageView.layoutParams.apply {
    height = data.images.original.height.toInt()
}

그렇다면 위와 같이 제가 받아온 데이터에서 움짤의 높이대로 ImageView의 높이를 설정해주면 될까요?

오.. 되는 것 같은데??

하실 수도 있지만 자세히 보면 좌우에 거슬리는 여백이 보이고, 조금만 내려보면...

움짤 자체의 해상도가 낮아 높이도 낮은 움짤들은 ImageView의 넓이를 모두 채우지 못하는 모습을 볼 수 있습니다.

그럼 어떻게 해야 하나?

모두의 친구 구글을 뒤져 본 지 30초 만에 답을 얻을 수 있었습니다.

android:adjustViewBounds="true"

위 속성을 ImageView에 넣어주니 거짓말처럼 해결되었습니다.

깔끔하게 맞춰진 모습

왼쪽과 오른쪽 사진을 비교해보면 오른쪽이 좌우 여백 없이 깔끔하게 모두 채워지는 것을 볼 수 있죠?

adjustViewBounds 속성의 설명에 따르면, 이 속성은 ImageView가 자신이 표시하는 drawable의 비율에 맞춰 자신의 크기를 조절할 수 있게 한다고 나와 있습니다.

 

어제까지 있는지 조차 몰랐던 속성이었지만 이렇게 저를 도와주네요 ㅎ.