나인패치(9Patch)의 컨텐트 영역 설정에 따른 이슈 해결 방법

안녕하세요.

오늘은 나인패치를 적용함에 있어서 컨텐트 영역을 지정할때 생기는 이슈에 대해서 풀어볼까 합니다.

 

 우측 나인패치 Height 컨텐트 영역 설정

 

나인패치가 적용된 이미지입니다.

우측 컨텐트 영역의 나인패치 영역을 보시면 중간쯔음 일부 영역을 나인패치 컨텐트 영역으로 잡았습니다.

저 부분에만 컨텐트가 들어간다는 의미입니다.

만약 이렇게 나인패치 컨텐트 영역을 설정하게 되면 버튼의 Height 영역에 문제가 발생하게 됩니다.

 

 

 

나인패치 Height 컨텐트 영역으로 인하여 생긴 문제의 버튼

 

 

사진을 잘 보시면 맨 좌측에 있는 삼각형 모양이 들어가 있는 버튼의 이미지는 위에서 나인패치를 처리한 이미지를

Button의 백그라운으로 준 상황입니다.

우측에 다른 버튼들은 나인패치를 사용하지 않은 이미지들입니다.

둘의 높이를 자세히 보면 미묘한 차이가 있는 것을 발견 하실 수 있습니다.

이 문제를 해결하기 위해선 나인패치의 Height 컨텐트 영역을 전체를 잡아주시면 해결이 가능합니다.

 

 

나인패치 Height 컨텐트 영역을 위에서 아래까지 전체를 설정

 

나인패치 Height 컨텐트 영역을 풀로 잡지 않으면 해당 영역이 실제 컨텐트 영역을 차지하며 이미지가 약간 더 늘어나는 현상이 발생합니다.

그러므로 Height 컨텐트 영역을 풀로 잡아주면 Height 컨텐트 영역에 대한 영향을 받지 않기 때문에 위와 같은 문제가 사라지게 됩니다.

 

 

말끔히 해결된걸 보실 수 있습니다.

혹시나 동일한 문제로 고생하시던 분들께 좋은 해결책이 되었으면 합니다.

만약 더 정확한 원인을 알고 계시거나 더 좋은 방법을 알고 계신분께서는 공유 부탁드립니다.^^