본문 바로가기

Programming/Android

[Android] TextView, 글자에 외곽선(Border, outline) 넣기

안드로이드에서 외곽선을 넣기 위해선 TextView를 Customizing해야한다.(다른방법이 있을 수도..;)


TextView를 상속받아서 뷰를 조금 수정해야하고,


편하게 사용하기 위해 attr을 선언해주면 된다.


먼저 TextView를 상속 받은 OutlineTextView를 만든다.


public class OutlineTextView extends TextView {

	private boolean hasStroke = false;
	private float mStrokeWidth = 0.0f;
	private int mStrokeColor;

	public OutlineTextView(Context context) {
		super(context);
	}

	public OutlineTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView(context, attrs);
	}

	public OutlineTextView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initView(context, attrs);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		if (hasStroke) {
			ColorStateList states = getTextColors();
			getPaint().setStyle(Style.STROKE);
			getPaint().setStrokeWidth(mStrokeWidth);
			setTextColor(mStrokeColor);
			super.onDraw(canvas);

			getPaint().setStyle(Style.FILL);
			setTextColor(states);
		}
		super.onDraw(canvas);
	}

	private void initView(Context context, AttributeSet attrs) {
		TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.OutlineTextView);
		hasStroke = typeArray.getBoolean(R.styleable.OutlineTextView_textStroke, false);
		mStrokeWidth = typeArray.getFloat(R.styleable.OutlineTextView_textStrokeWidth, 0.0f);
		mStrokeColor = typeArray.getColor(R.styleable.OutlineTextView_textStrokeColor, 0xffffffff);
	}
}


그리고 attr을 선언해준다. xml 파싱과정에서 관련된 value들을 받기 위해선 필수!

(\values\attrs.xml 에 선언해주면 된다.)


아래와 같이 선언해 놓으면 OutlineTextView를 사용할 때 해당 attribute를 사용할 수 있게 된다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="OutlineTextView">
        <attr name="textStroke" format="boolean"/>
        <attr name="textStrokeWidth" format="dimension"/>
        <attr name="textStrokeColor" format="color"/>
    </declare-styleable>
</resources>


마지막으로 layout에 추가해주면 된다.

* xmlns의 이름 부분에는 xml에서 사용할 이름을 지정하면 된다.

* 패키지명은 반드시 앱 패키지 명과 동일해야 한다.

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
	xmlns:@@이름@@="http://schemas.android.com/apk/res/@@ 패키지명 @@" 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	android:orientation="vertical">
	<com.fimtrus.flicktalk.view.OutlineTextView
		android:id="@+id/outlineTextView1" 
		android:layout_width="match_parent" 
		android:layout_height="wrap_content" 
		android:gravity="center_horizontal" 
		android:layout_above="@+id/relativeLayout1" 
		android:layout_centerhorizontal="true" 
		android:textsize="50sp" 
		android:layout_marginbottom="20dp" 
		android:text=" " 
		android:textcolor="@color/white" 
		android:padding="5dp" 
		android:singleline="false" 
		@@이름@@:textstroke="true" 
		@@이름@@:textstrokecolor="#000000" 
		@@이름@@:textstrokewidth="7.0">
	</com.fimtrus.flicktalk.view.OutlineTextView>
</linearlayout>