안드로이드 ImageView에 radius가 적용이 되지 않을 때 해결법/ setOutlineProvider/outline/ 테두리 둥글게 하기 TIL#20

오늘은 집중해서 만들고 있는 프로젝트에 진도를 많이 쭉 뺐다.

 

mysql과 연동을 위해 볼리를 많이 이용했는데,

 

잘하다가 다음과 같은 문제가 생겼다.

 

 

다음과 같이 사진에서 위에 테두리도 밑에 둥글기와

 

같이 둥글게 나와야 하는데,

 

직각으로 저런 식으로 표시되는 것이다.

 

물론 이미지를 넣지 않을 때는

 

xml 속성으로 설정해놓아서,

 

 

이런 식으로 나온다.

 

아 물론 scaleType을 fitCenter로 하면 다음과 같이 잘 나오지만,

 

내가 원하는 것은 centerCrop속성이었다.

 

이상하게 이 속성으로 이미지 뷰에 이미지를 넣으면,

 

저렇게 둥글기가 사라지는 것이었다.

 

커뮤니티에 물어보니 원래 이미지 뷰에 이미지를 넣으면 저런 상태가 된다는 것이다.

 

그래서 비트맵으로 변환해서 크기를 조정해 넣으라는데...

 

잘 몰라 여러 방법을 찾다 보니 해결법을 찾았다.

 

 

 

---

해결법

우선

 

그래도 이미지 뷰에 backgroud.xml은 필요할 수 있으니 올려두겠다.

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle" >
    <solid android:color="@color/point" />
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"/>

</shape>

 

이런 식으로 이미지가 이미지 뷰에 들어가지 않을 때는,

 

원하는 둥글기를 주었다.

 

그리고 imageView에 속성이다.

 

<ImageView
            android:scaleType="centerCrop"
            android:src="@drawable/no_image"
            android:id="@+id/diaryImage"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="6"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/viewpage_image_up"
            android:gravity="center"
             />

 

그리고 이미지 뷰에 아이디 값을 주어,

 

java코드에서 참조를 해준다.

 

그리고 다음과 같이 입력한다.

 

public class DiaryFrag extends Fragment {
	private ImageView diaryImage; //이미지뷰
    
	 @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.diary_frag, container, false);
        
        diaryImage = view.findViewById(R.id.diaryImage);
        
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            diaryImage.setOutlineProvider(new ViewOutlineProvider() {
                @Override
                public void getOutline(View view, Outline outline) {
                    outline.setRoundRect(0,0, view.getWidth(), view.getHeight() + 200, 40);
                }
            });

            diaryImage.setClipToOutline(true);
        }
        
        return view;
        }
}

바로 OutlineProvider이다.!!

 

나도 처음 써보는 처음 써보는 메서드이다.

 

들어보니 보통 외곽선이나, 테두리를 임의로 조정할 때,

 

사용한다고 한다.

 

마침 나한테 너무 필요한 속성이다.!!

 

우선은 API21 이상부터 사용할 수 있다고 가정해둔다.

 

getOutline메서드 안에

 

ououtline.setRoundRect메서드를 호출하고,

 

그 안에 left, top, right, bottom, radius 인자를 순서대로 넣는다.

 

(0,0, view.getWidth(), view.getHeight() + 200, 40)

 

이런 식으로 넣어준다.

 

우선 left와 top을 0점을 기준으로,

 

이 이미지 뷰에 객체에 가로와 세로 길이를 가져와

 

임의로 테두리를 만들어 동시에 길이로 표시를 한다.

 

끝에는 40은 radius이다. 나 같은 경우는 xml에서 20dp radius를 사용했으므로,

 

float형태로 넣을 때는 그에 두배인 40을 넣어준다.

 

그리고 저 view.getHeight()에 + 200을 해준 이유는 

 

코드에서 나타내지는 않았지만, 

 

이미지 뷰에 아래 텍스트뷰가 있어서

 

절묘하게 아래 radius를 가려주기 때문이다.

 

만약 200이란 숫자를 빼버리면, 아래와 같이 나오게 된다.

 

 

 

그림과 같이 텍스트뷰에 가려지지 못해 아래 radius가 드러나버렸다.

 

이를 가려주기 위해 height 길이에 200 정도를 더해준 것이다.

 

 

그러면 우리가 원하는 이미지 뷰에 이미지를 넣어도

 

테두리가 둘 다 둥근 모양을 만들 수 있다.

 

 

이렇게 오늘도 하나의 난관을 헤쳐나갔다.

 

이 OutlineProvider를 많이 쓸 일은 없겠다만,

 

이런 임의로 테두리를 지정하는 일이 생긴다면,

 

꼭 기억하고, 응용해야겠다.