반응형


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



문제 발생시 지나치지 마시고 댓글 남겨주시면 가능한 빨리 답장드립니다.


제가 쓴 책도 한번 검토해보세요 ^^

+ Recent posts