drcarter의 DevLog

Android 의 TextView에는 shadow 효과가 기본적으로 있습니다. shadow효과로 다양한 TextStyle을 만들 수 있는데 이번 포스트에서는 shadow효과의 다양한 value에 의해서 어떤 효과가 나오는지 확인해 볼려고 합니다.

우선 TextView에 있는 shadow 효과에 사용되는 xml attribute와 method를 확인해 보면

이와 같습니다. shadowColor는 shadow의 색상, shadowDx는 shadow의 X방향 offset, shadowDy는 shadow의 Y방향 offset, shadowRadius는 shadow의 반지름이 됩니다.

샘플코드를 확인해 보겠습니다.

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:padding="10dip" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#7F000000"
            android:shadowDx="3"
            android:shadowDy="3"
            android:shadowRadius="0.01"
            android:text="Shadow Style"
            android:textColor="#000000" />
</LinearLayout>

이와 같이 하면 결과는

이와 같습니다. 검은 Shodow Style 아래에 회색의 shadow가 있는 것을 확인할 수 있습니다. 그림자 위치를 더 멀리 하고 싶아면 shadowDx와 shadowDy값을 더 많이 주면 됩니다.

위의 결과에 shadowRadius값을 변경했을 때 코드는

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:padding="10dip" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#7F000000"
            android:shadowDx="3"
            android:shadowDy="3"
            android:shadowRadius="1.5"
            android:text="Shadow Style"
            android:textColor="#000000" />
</LinearLayout>

이와 같이 했을 경우 결과는

이렇게 됩니다. shadowRadius값에 따라서 shadow모양이 변경된 것을 볼 수 있습니다.

그럼 이번에는 shadow의 방향을 바꾸도록 하겠습니다.

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"


        android:padding="10dip" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#7F000000"
            android:shadowDx="3"
            android:shadowDy="-3"
            android:shadowRadius="1.5"
            android:text="Shadow Style"
            android:textColor="#000000" />
    </LinearLayout>

이와 같이 했을 때 결과는

이와 같습니다.그림자가 오른쪽 위 방향으로 변경되었습니다. shadowDx와 shadowDy의 값의 +- 에 따라서 값이 shadow방향이 변경 됩니다. 소위 발하는 그림자가 45` 방향이면 shadowDx는 +, shadowDy는 -을 주고, 135`방향을 경우는 둘다 +의 값을 주면 됩니다.

이번에는 shoadow를 이용한 blur 효과 비슷하게 주는 방법입니다.

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10dip" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#FFFFFF"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="3"
            android:text="Shadow Style"
            android:textColor="#FFFFFF" />
    </LinearLayout>

이와 같이 shadowDx와 shadowDy의 값을 0.. shadowRadius값만 +로 주었을 때 결과는

이와 같습니다. 글자 주변으로 blur 효과가 나타는 것을 볼 수 있습니다.

이번에는 네온사인?? 같은 효과 입니다.

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10dip" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#FFFFFF"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="2"
            android:text="Shadow Style"
            android:textColor="#000000" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10dip" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#00FF00"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="2"
            android:text="Shadow Style"
            android:textColor="#000000" />
    </LinearLayout>

이와 같이 했을 때 결과는

이와 같습니다. 이건 단지 배경과 글자색을 같게 하고 그림자 색상만 다르게 했을 때 입니다. 

TextView의 shadowDx, shadowDy, shadowRadius값에 따라서 TextView의 효과를 확인해보았습니다. 그런데 저는 제일 많이 쓰는 것은 단지 ShadowDx=2 shadowDy=2 shadowRadius=2 인것 같습니다. 이건 단지 개인별로 차이가 있겟지만요 ^^

TextView에서 글시체에 Bold 속성을 주기 위해서는 여러가지 방법이 있습니다.
간단하게는 xml에서 TextView의 속성중에 android:textStyle="bold"을 주는 방법도 있습니다.
하지만 여기에 단순한 문제가 있습니다. 지금 한국에서 그래도 제일 많이 풀린 갤럭시S에서는 위에 속성을 주었을 경우 Bold속성에 문제가 없지만, 개발자 입장에서 에뮬레이터나 다른 디바이스에서는 TextView에서 Bold 속성을 주어도 한글에서는 Bold속성이 들어간 텍스트가 보여지지 않습니다. 영어는 Bold 속성을 주어도 되지만... 한글에서는 안되는.. ㅜㅜ// 좀 황당하지요?? 그래서 좀 해결책을 보여주고자 이 포스트를 작성해 봅니다.

TextView에 보면 setPaintFlags 라는 메소드가 있습니다. 그 내용을 확인해보면

이런 내용이 되어 있습니다.. See Also에 있는 setFlags(int) 의 내용도 보게 되면


이 속성을 잘 이용하면 Bold 효과를 준 한글의 텍스트를 만들 수 있습니다.
그에 대한 코드는

textEx5.setText("한글 볼드 테스트");
textEx5.setPaintFlags(textEx5.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);

이런식으로 만들어 주면 됩니다.
중요한건
이 부분일 것이라고 생각됩니다.

제가 테스트한 결과 화면입니다.

첫번째 글씨는 단순히 영문 텍스트만 넣은 것이고.
두번째 글씨는 영문 텍스트에 xml에서 TextView에 bold 스타일을 추가했을 경우 입니다.
세번째 글씨는 TextView에 한글만 넣은 상태이고
네번째 글씨는 TextView에 Bold 스타일을 추가한 것인데... 한글에는 변화가 없지만 영어에만 bold 스타일이 적용된 것이 확인됩니다. 좀... 안습이죠... 적용되면 여러사람 고민안했을 문제이였을 터인데 ㅎㅎ
다섯번째 글씨는... 한글에 Bold 스타일이 해결된 상태입니다 ㅎㅎ

에뮬레이터나 다른 디바이스에서 한글에 대한 폰트 지원을 제대로 해주지 않는 것으로 생각이 됩니다. 머 그래도 이렇게라도 해결할 수 있는 방법이 있으니 다행이라고는 생각됩니다. 테스트한 코드는 압축파일로 첨부합니다. :-)

TextView에서 text의 길이가 길면 맨 뒤에 있는 글자들은 잘려서 안보이게 됩니다.
그럴 경우 좌에서 우로 움직이며 보이게 하는 효과를 줄 수 있습니다.
방법으로는

xml에서속성 중에서

이 3개의 속성은 꼭 해줘야 합니다... 그리고 실행하면 안나옵니다.
선택을 해 줘야 좌에서 우로 보이는 marquee 텍스트가 보이는데... 화면에 다 안보이는 텍스트 일 때 바로 marquee 효과가 나오게 할려면



을 해 줘야지 좌에서 우로 보이는 marquee 텍스트를 볼 수 있습니다. :)