RecyclerView Grid Layout에서 이미지 일정한 크기로 보여주기

RecyclerView에 GridLayoutManager를 적용하여 그리드를 만든 후 이미지 크기가 일정하게 보이지 않는 문제를 해결했습니다.

1. RelativeLayout를 상속한 SquareLayout 클래스를 추가합니다.

package com.tistory.webnautes.imagesaveinsqlite; import android.annotation.TargetApi; import android.content.Context; import android.os.Build; import android.util.AttributeSet; import android.widget.RelativeLayout; /** * Created by Lincoln on 05/04/16. */ class SquareLayout extends RelativeLayout {    public SquareLayout(Context context) {        super(context);    }    public SquareLayout(Context context, AttributeSet attrs) {        super(context, attrs);    }    public SquareLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    @TargetApi(Build.VERSION_CODES.LOLLIPOP)    public SquareLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {        super(context, attrs, defStyleAttr, defStyleRes);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // Set a square layout.        super.onMeasure(widthMeasureSpec, widthMeasureSpec);    } }

2. 앞에서 정의한 SquareLayout 클래스를 사용하도록  레이아웃을 수정합니다. 앞부분에 패키지 이름을 적어줘야 합니다.

com.tistory.webnautes.imagesaveinsqlite.SquareLayout

적용하면 같은 크기의 정사각형 영역에 이미지가 보여집니다.  

이미지 뷰에  이미지가 꽉차는게 좋지 않을까 싶어서 수정해봅니다.  

ImageView에 다음 속성을 추가해주면 이미지 중앙에서 일정 범위로 이미지를 잘라서 보여줍니다.

android:scaleType="centerCrop"

3. 두가지를 모두 적용한 레이아웃 파일입니다.  그리드상의 이미지뷰 아래에 텍스트뷰를 하나씩 보여주기 위해 사용합니다.

<?xml version="1.0" encoding="utf-8"?> <com.tistory.webnautes.imagesaveinsqlite.SquareLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:layout_weight="1"    android:layout_margin="1dp"    android:orientation="vertical" >    <ImageView        android:id="@+id/imageview_recyclerview_image"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/textview_recyclerview_title"        android:layout_centerHorizontal="true"        android:scaleType="centerCrop"        android:layout_margin="5dp"        android:adjustViewBounds="true"/>    <TextView        android:id="@+id/textview_recyclerview_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center"        android:layout_alignStart="@+id/imageview_recyclerview_image"        android:layout_alignParentBottom="true"        android:layout_alignEnd="@+id/imageview_recyclerview_image"        android:text="Text"        android:textSize="5sp" /> </com.tistory.webnautes.imagesaveinsqlite.SquareLayout>

설명이 부족시 같이 보면 좋을 포스팅입니다.

Android RecyclerView 간단한 예제

https://webnautes.tistory.com/1214

Android RecyclerView를 사용하여 GridView 구현하기

https://webnautes.tistory.com/1298

이미지뷰에서 이미지 위아래에 공백이 생기는 문제 해결

https://webnautes.tistory.com/1297