화면크기에 따라 일정한 비율로 크기가 자동조절되는 TextView

모바일 기기, 특히 안드로이드 기기들은 다양한 화면크기와 해상도를 가지고 있습니다.

 

따라서 앱의 UI를 디자인할 때 각 요소들의 사이즈를 주의해서 설정 해 주어야 합니다.

 

 

버튼이나 이미지와 같은 UI 오브젝트에  px 이나 inch 값을 주게되면 기기마다 다른 크기로  보이게 되기 때문에

 

기기에 무관하게 동일한 크기로 보일 수 있도록 dp 값을 사용하는것이 기본이 된지 오래되었습니다.

 

 

같은 dp 값을 가지고 있다면 해당 오브젝트는 어떤 기기에서도 거의 동일한 크기로 보이게 되는데

 

기기의 화면크기가 모두 다르다는데서 또다른 문제가 다시 한번 발생합니다.    

 

 

 

그림 1. 다양한 화면사이즈의 모바일 기기에 대한 dp값의 예시.

 

 

예를 들어 가로 900dp 세로300dp의 오브젝트를 배치한다고 가정해 보면,

 

작은 스크린 사이즈의 기기에서는 해당 오브젝트가 잘리게 되기 때문입니다.

 

특정한 dp 값을 설정한 폰트로 가정을 해보면 아래와 같은 현상이 일어나게 됩니다.

 

그림 2. 다양한 화면사이즈의 모바일 기기에서 글자가 잘려서 표시되는 현상. 

 

여러 기기의 화면 크기에 문제없이 대응하기 위한 방법은 여러가지가 있습니다.

 

보통은 320dp, 600dp, 720dp 등으로, 화면의 최소 너비나 높이를 기준으로 레이아웃을 세분화하여 해결하는 방법이

 

가장 정확하지만, 유지보수에 손이 많이가기 때문에, 저는 개인적으로 RelativeLayout과 layout_weight등을

 

주로 사용하여 최대한 손이 적게가는 귀차니즘 친화적인 범용 레이아웃을 만드려고 노력합니다. 

 

 

그런데, 이번에 화면의 가로 전체나 세로 전체를 차지하는 TextView를 적용해야 하는 일이 생겼는데

 

특정 dp 값으로 고정해서 TextView의 TextSize를 설정 해 주니 그림 2와 같은 현상이 문제가 되었습니다.

 

 

TextView 하나만 알아서 기기의 화면 크기에 따라 유려하게 적용되기만 하면 되는데 레이아웃을 세분화하기는 귀찮아

 

여기저기 찾아보다 보니, android O(api26)부터 새로 추가된 Autosizing TextViews가 있었는데,

 

적용 가능한 안드로이드 버전도 버전이고, 생각하는 기능과 달라서

 

화면 사이즈에 맞게 알아서 대응해주는 코드를 만들었습니다.

 

 

 

먼저 앱이 실행되는 기기의 디스플레이 사이즈(해상도)를 반환해주는 코드입니다.

    public Point getScreenSize(Activity activity) {
        Display display = activity.getWindowManager().getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);

        return  size;
    }

 

다음은 기기별 해상도를 기기별 density로 나누어 모든 기기에 무관한 기준사이즈를 얻습니다.

int standardSize_X, standardSize_Y;
float density;

public void getStandardSize() {
	Point ScreenSize = getScreenSize(this);
	density  = getResources().getDisplayMetrics().density;
    
	standardSize_X = (int) (ScreenSize.x / density);
	standardSize_Y = (int) (ScreenSize.y / density);
}

 

해당 기준 사이즈인 standardSize를 기준으로 하여

어떤 기기에서도 화면 가로크기의 1/3으로 나타내고 싶을 경우 screenSize_X/3로 사용해주고

어떤 기기에서도 화면 세로크기의 1/5으로 나타내고 싶을 경우 screenSize_Y/5로 사용해주시면 됩니다. 

textView.setTextSize((float) (standardSize_X / 3));

textView.setTextSize((float) (standardSize_Y / 5));

 

 

 

그림 3. 화면크기에 따라  textView가 자동 조절되는 방법.

 

상단의 그림과 같이 화면 크기의 1/3을 차지하는 text사이즈라면, 어떤 기기에서도 text가 화면크기의 1/3를 차지하는 사이즈로 변환됩니다.